   foreground.redraw()
   redrawSliderPositions()
   redrawSwatch()
+  updateHexText()
 
 sliderHue = d3.slider()
   .min(0)

    H = value
    foreground.redraw()
    redrawSwatch()

sliderSaturation = d3.slider()
  .min(0)

  .on 'slide', (e, value) ->
    L = value
    background.redraw()
    redrawCanvas(sameColorSquareSize)
    foreground.redraw()
    redrawSwatch()
    updateHexText()

d3.select("#picker div.control-hue").call(sliderHue)
d3.select("#picker div.control-saturation").call(sliderSaturation)
d3.select("#picker div.control-lightness").call(sliderLightness)

stringIsValidHex = (string) ->
  string.match(/#?[0-9a-f]{6}/)
  
d3.select("#picker .hex").on 'input', ->
  if stringIsValidHex(@value)
    [H, S, L] = $.husl.fromHex @value
    background.redraw()
    redrawCanvas(sameColorSquareSize)
    foreground.redraw()
    redrawSliderPositions()
    redrawSwatch()

background.redraw()
redrawCanvas(sameColorSquareSize)
foreground.redraw()
redrawSliderPositions()
redrawSwatch()
updateHexText()
