# Elm ColorPicker widget

An Elm library to help you implement a colo(u)r picker tool without relying upon the presence - or [otherwise](http://caniuse.com/#feat=input-color) - of a built in browser widget.

<img src="https://github.com/simonh1000/elm-colorpicker/raw/master/screenshot.png" alt="screen shot">

## Example

```elm
import ColorPicker

type alias Model =
    { colorPicker : ColorPicker.State
    , colour : Color
    }

init : Model
init =
    { colorPicker = ColorPicker.empty
    , colour = Color.rgb 255 0 0
    }

type Msg
    = ColorPickerMsg ColorPicker.Msg

update : Msg -> Model -> Model
update message model =
    case message of
        ColorPickerMsg msg ->
            let
                ( m, colour ) =
                    ColorPicker.update msg model.colour model.colorPicker
            in
                { model
                    | colorPicker = m
                    , colour = colour |> Maybe.withDefault model.colour
                }

view : Model -> Html Msg
view model =
    ColorPicker.view model.colour model.colorPicker
        |> Html.map ColorPickerMsg
```

## Example

See it in action

```sh
$ cd example
$ npm install
$ npm run dev
Open http://localhost:3000
```

### To Do

 * Enable use of different sizes of svg elements

### Changelog

 * 2.0.0 : Remove two exposed helpers that were no longer needed, and buggy
 * 1.1.4 : add opacity picker; better styling; add classes to elements of widget; improved modelling under the hood
 * 1.1.3 : 0.19 (with new Color library)
 * 1.0.0 : Initial release


### Inspired by

 * https://github.com/bendc/color-picker
 * https://github.com/DavidDurman/FlexiColorPicker
 * https://stackoverflow.com/questions/17242144/javascript-convert-hsb-hsv-color-to-rgb-accurately?answertab=votes#tab-top
 * Elm-sortable-table's API