Color
Working with Colors
HSL values
HSL is short for hue, saturation, and lightness (or luminosity, or random other L words depending on who you ask. Think "brightness", and you'll be on the right track).
You may be intuitively familiar with HSL color modeling if you've worked with a color wheel before. It also may be a great place to start working with color if you enjoyed playing with unit circles and polar coordinates in trigonometry.
(Image can be seen in context on the HSL and HSV arcticle on Wikipedia. By HSL_color_solid_cylinder.png: SharkDderivative work: SharkD Talk - HSL_color_solid_cylinder.png, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=9801661)
HSL models hues as values on a circle. We can pick a hue by providing a degree. We start at red -- meaning that we can get to red by saying that our hue is 0 degrees or by saying that our hue is at 360 degrees. Green is at 90, teal is at 180, and there's a lovely purple is at 270.
Saturation is how much of the hue is present. If the saturation is 100% (and the lightness is a middling value) then you'll recognize the hue immediately. When you see a hue of 0 degrees, a saturation of 100%, and lightness of 50%, your reaction is going to be "Schnickeys! that's red!" If the saturation where to change to 0%, you'd see gray.
Lightness is brightness -- 100% is white and 0% is black, no matter the hue or saturation.
Build a new color based on HSL values.
import Color exposing (Color)
red : Color
red =
Color.fromHSL ( 0, 100, 50 )The hue is specified in degrees, and uses modular arithmetic such that whether you
pass in 0, 360, or -360, you'll still end up with a red hue.
Saturation is a percentage value. It's clamped between 0 and 100 (inclusive). Lightness is a percentage value. It's clamped between 0 and 100 (inclusive).
Extract the hue, saturation, and lightness values from an existing Color.
Get the HSL representation of a color as a String.
RGB values
RGB is short for red-green-blue. This representation of color specifies how much red, green, and blue are in the color.
Build a new color based on RGB values.
import Color exposing (Color)
red : Color
red =
Color.fromRGB ( 255, 0, 0 )
green : Color
green =
Color.fromRGB ( 0, 255, 0 )
blue : Color
blue =
Color.fromRGB ( 0, 0, 255 )This function clamps each rgb value between 0 and 255 (inclusive).
Get the RGB representation of a color as a String.
Color properties
Luminance calculation adopted from https://www.w3.org/TR/WCAG20-TECHS/G17.html