Shorthand for the most common occurrence of blue. Equivalent to blue700

Shorthand for the most common occurrence of gray. Equivalent to gray700

Shorthand for the most common occurrence of green. Equivalent to green500

Shorthand for the most common occurrence of red. Equivalent to red600

Shorthand for the most common occurrence of yellow. Equivalent to yellow500

The design system describes four main entries that here are called Hues.

A hue is one of the five pure colors of the palette.

Each hue can be paired with eight different shades.

The shades are 800, 700, 600, 500, 400, 300, 200 and 100.

Palette.Color holds data about some desired color.

Given a hue and shade it constructs a color.

Palette.color hueBlue shade600

Shorthand for setting background colors

Element.row
    [ Palette.blue600 |> Palette.toBackgroundColor
    ]
    []

Shorthand for setting font colors

Element.row
    [ Palette.blue600 |> Palette.toFontColor
    , Font.size 16
    , Font.justify
    ]
    []

Shorthand for setting border colors

Element.row
    [ Palette.blue600 |> Palette.toBorderColor
    , Border.width 2
    , Border.solid
    ]
    []

Applies an alpha value to the color adding transparency.

backgroundColor
    |> Palette.withAlpha 0.5
    |> Palette.toElementColor
    |> Element.Background.color

Manually transforms a Palette.Color into an Elm-UI-compatible color.

let
    backgroundColor =
        Palette.color tonePrimary brightnessMiddle
in
Element.el
    [ backgroundColor
        |> Palette.toElementColor
        |> Element.Font.color
    , backgroundColor
        |> Palette.toElementColor
        |> Element.Background.color
    ]
<|
    Element.text "Hello World!"

Transforms a Palette.Color into a CSS-compatible parameter.

Palette.blue700
    |> Palette.toCssColor
    |> Html.Attributes.style "font-color"