Color

Library for working with colors. Includes RGB and HSL creation, gradients, and built-in names.

Colors


type Color

[]

Representation of colors.


Creation


rgb : Basics.Int -> Basics.Int -> Basics.Int -> Color.Color

Create RGB colors from numbers between 0 and 255 inclusive.


rgba : Basics.Int -> Basics.Int -> Basics.Int -> Basics.Float -> Color.Color

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


hsl : Basics.Float -> Basics.Float -> Basics.Float -> Color.Color

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.


hsla : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color.Color

Create HSL colors with an alpha component for transparency.


greyscale : Basics.Float -> Color.Color

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


grayscale : Basics.Float -> Color.Color

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


complement : Color.Color -> Color.Color

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


Gradients


type Gradient

[]

Abstract representation of a color gradient.


linear : ( Basics.Float, Basics.Float ) -> ( Basics.Float, Basics.Float ) -> List.List ( Basics.Float, Color.Color ) -> 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.


radial : ( Basics.Float, Basics.Float ) -> Basics.Float -> ( Basics.Float, Basics.Float ) -> Basics.Float -> List.List ( Basics.Float, Color.Color ) -> Color.Gradient

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.


Extracting Colors


toRgb : Color.Color -> { red : Basics.Int, green : Basics.Int, blue : Basics.Int, alpha : Basics.Float }

Extract the components of a color in the RGB format.


toHsl : Color.Color -> { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float, alpha : Basics.Float }

Extract the components of a color in the HSL format.


Built-in Colors

These colors come from the Tango palette which provides aesthetically reasonable defaults for colors. Each color also comes with a light and dark version.

Standard


red : Color.Color


orange : Color.Color


yellow : Color.Color


green : Color.Color


blue : Color.Color


purple : Color.Color


brown : Color.Color


Light


lightRed : Color.Color


lightOrange : Color.Color


lightYellow : Color.Color


lightGreen : Color.Color


lightBlue : Color.Color


lightPurple : Color.Color


lightBrown : Color.Color


Dark


darkRed : Color.Color


darkOrange : Color.Color


darkYellow : Color.Color


darkGreen : Color.Color


darkBlue : Color.Color


darkPurple : Color.Color


darkBrown : Color.Color


Eight Shades of Grey

These colors are a compatible series of shades of grey, fitting nicely with the Tango palette.


white : Color.Color


lightGrey : Color.Color


grey : Color.Color


darkGrey : Color.Color


lightCharcoal : Color.Color


charcoal : Color.Color


darkCharcoal : Color.Color


black : Color.Color


These are identical to the grey versions. It seems the spelling is regional, but that has never helped me remember which one I should be writing.


lightGray : Color.Color


gray : Color.Color


darkGray : Color.Color