Elm ColorPicker widget

An Elm library to help you implement a colo(u)r picker tool without relying upon the presence - or otherwise - of a built-in browser widget.

Example

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

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