     initialColor = "##{initialColor}" unless initialColor[0] == '#'
 
     createColorDiv = (color) ->
-      el = $("<div class='small-colorpicker-color' data-color='#{color}' style='background-color:##{color};'></div>")
+      el = $("<div class='small-colorpicker-color' data-color='##{color}' style='background-color:##{color};'></div>")
       el.addClass('small-colorpicker-color-white') if color.toLowerCase() == 'ffffff'
       el
 
-    createCustom = () ->
+    createCustom = () =>
       container = $("<div/>").addClass("small-colorpicker-custom-container")
       label = $("<div/>").text("Custom:").addClass("small-colorpicker-custom-label")
       input = $("<input/>")
         .val(initialColor)
         .addClass("small-colorpicker-custom")
+        .attr("type", "color")
+        .css
+          backgroundColor: initialColor
+          color: @fontFromColor(initialColor)
+
       container.append(label)
       container.append(input)
 

    colorsContainer.append(createCustom())

    @input = picker.find('.small-colorpicker-custom')
    @input.minicolors
      theme: 'colorpicker'
      change: (hex) =>
        @setHexColor(hex)
    @input.css
      backgroundColor: initialColor
      color: @fontFromColor(initialColor)
    @input.on 'keydown', (event) =>
      @closePicker() if event.which == 13
    picker.find('.minicolors-panel > div').each (_, div) ->
      $(div).css
        top: parseInt($(div).css('top')) + 3
        left: parseInt($(div).css('left')) + 3
    colorsContainer.append("<div class='clearfix'></div>").end()
   
  setHexColor: (hex) ->
    return unless /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)
    unless @options.dontSetElementColor

      @picker.off "click.colorPickerColor"
      @picker.on "click.colorPickerColor", ".small-colorpicker-color", (event) =>
        hex = $(event.target).data('color')
        @input.minicolors('value', hex) unless @native
        @setHexColor(hex)
        @closePicker()
        false
