Representation of colors.

Create RGB colors from numbers between 0 and 255 inclusive.

Create RGB colors with an alpha component for transparency. The alpha component is specified with numbers between 0 and 1.

Create HSL colors. This gives you access to colors more like a color wheel, where all hues are arranged in a circle that you specify with standard Elm angles (radians).

red =
    hsl (degrees 0) 1 0.5


green =
    hsl (degrees 120) 1 0.5


blue =
    hsl (degrees 240) 1 0.5


pastelRed =
    hsl (degrees 0) 0.7 0.7

To cycle through all colors, just cycle through degrees. The saturation level is how vibrant the color is, like a dial between grey and bright colors. The lightness level is a dial between white and black.

Create HSL colors with an alpha component for transparency.

Produce a gray based on the input. 0 is white, 1 is black.

Produce a gray based on the input. 0 is white, 1 is black.

Produce a “complementary color”. The two colors will accent each other. This is the same as rotating the hue by 180°.

Abstract representation of a color gradient.

Create a linear gradient. Takes a start and end point and then a series of “color stops” that indicate how to interpolate between the start and end points. See this example for a more visual explanation.

Create a radial gradient. First takes a start point and inner radius. Then takes an end point and outer radius. It then takes a series of “color stops” that indicate how to interpolate between the inner and outer circles. See this example for a more visual explanation.

Extract the components of a color in the RGB format.

Extract the components of a color in the HSL format.