         ),
         @renderPicker()
       )
-    )+    )
+
+  renderPicker: ->
+    {div} = React.DOM
+    return null unless @state.isPickerVisible
+
+    rows = [("hsl(0, 0%, #{i}%)" for i in [0..100] by 10)]
+    for hue in [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
+      rows.push("hsl(#{hue}, 100%, #{i}%)" for i in [10..90] by 8)
+
+    (div {className: 'color-picker-popup'},
+      rows.map((row, ix) =>
+        (div {className: 'color-row', key: ix, style: {width: 20 * row.length}},
+          row.map((cellColor, ix2) =>
+            className = React.addons.classSet
+              'color-cell': true
+              'selected': @state.color == cellColor
+            (div \
+              {
+                className,
+                onClick: => @setColor(cellColor)
+                style: {backgroundColor: cellColor}
+                key: ix2
+              }
+            )
+          )
+        )
+      )
+    )

          className: React.addons.classSet
            'color-well-container': true
            'selected': @state.isPickerVisible
          onClick: @openPicker
          style: {
            backgroundColor: 'white'
            position: 'relative'

  }
  getInitialState: -> @getState()

  togglePicker: -> @setState {isPickerVisible: not @state.isPickerVisible}
  closePicker: -> @setState {isPickerVisible: false}
  setColor: (c) ->
    @props.lc.setColor(@props.colorName, c)
    @setState @getState()

  render: ->
    {div, label} = React.DOM
