simonh1000/elm-colorpicker/2.0.0

NOTE: the latest version is 2.0.3

ColorPicker

An Elm library to help you implement a color picker tool.

type State

Opaque type. Needs to be added to your model. You will also need to store a Color in your model

type alias Model =
    { myColour : Color
    , colorPicker : ColorPicker.Model
    }
type Msg

Opaque type. These messages are handled by ColorPicker.update

Initial ColorPicker state

init =
    { myColour = Color.red
    , colorPicker = ColorPicker.empty
    }
update : Msg -> Color -> State -> ( State, Maybe Color )

On each update, ColorPicker returns its model and (where appropriate) the new selected colo(u)r.

ColorPickermsg msg ->
    let
        (cp, col) =
            ColorPicker.update msg model.colorPicker
    in
        { model | colorPicker = cp, myColor = Maybe.withDefault model.myColor col }
view : Color -> State -> Html Msg

Renders the color picker on screen

The main picker is for saturation and lightness, while the sliders below are for hue and opacity respectively.