samueldple / material-color / MaterialColor

This library contains all of Google's material colors along with black, white, and custom colors.

It works seamlessly with rtfeldman/elm-css.

Defining Colors


type Color
    = Red Shade
    | Pink Shade
    | Purple Shade
    | DeepPurple Shade
    | Indigo Shade
    | Blue Shade
    | LightBlue Shade
    | Cyan Shade
    | Teal Shade
    | Green Shade
    | LightGreen Shade
    | Lime Shade
    | Yellow Shade
    | Amber Shade
    | Orange Shade
    | DeepOrange Shade
    | Brown Shade
    | Grey Shade
    | BlueGrey Shade
    | White
    | Black
    | WhiteWithAlpha String
    | BlackWithAlpha String
    | Hex String

A color value, usually encompassing a color variant and a shade of the color. Exceptions are black, white, and custom colors.

Black and white have variants which accept a 2-character hex string for an alpha value (i.e. "80" would be 50% alpha).

Custom colors can be defined by hex values as you would in css (without the #).


type Shade
    = S50
    | S100
    | S200
    | S300
    | S400
    | S500
    | S600
    | S700
    | S800
    | S900
    | S50A String
    | S100A String
    | S200A String
    | S300A String
    | S400A String
    | S500A String
    | S600A String
    | S700A String
    | S800A String
    | S900A String

The shade of color per the material design specification. Variants of shades with "A" appended allow a 2-character hex value for alpha to be supplied.

Using Colors with rtfeldman/elm-css

toCssColor : Color -> Css.Color

Converts from a Color to a Css.Color (from rtfeldman/elm-css).