You will generate colors using a combination of 2 types, Tone
and Brightness
, and the function you should use is Palette.color
.
Example:
Palette.color Palette.toneDanger Palette.brightnessMiddle
After having a Color
you have 2 ways to use it, transform in a Element.Color
or transform in a String that can be used along Html.Attributes.
Example:
Palette.color Palette.toneDanger Palette.brightnessMiddle
|> Background.color
UI.Palette
has 5 different tones (toneGray, tonePrimary, toneSuccess, toneWarning and toneDanger) and 5 different brightnesses (brightnessDarkest, brightnessMiddle, brightnessLight, brightnessLighter, brightnessLightest).
For more information, check the docs """