elm-athlete / athlete / 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

Create RGB colors from numbers between 0 and 255 inclusive.

rgba : Basics.Int -> Basics.Int -> Basics.Int -> Basics.Float -> 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

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

Create HSL colors with an alpha component for transparency.

greyscale : Basics.Float -> Color

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

grayscale : Basics.Float -> Color

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

complement : 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 ( Basics.Float, 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 ( Basics.Float, 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 -> { red : Basics.Int, green : Basics.Int, blue : Basics.Int, alpha : Basics.Float }

Extract the components of a color in the RGB format.

toHsl : 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

orange : Color

yellow : Color

green : Color

blue : Color

purple : Color

brown : Color

Light

lightRed : Color

lightOrange : Color

lightYellow : Color

lightGreen : Color

lightBlue : Color

lightPurple : Color

lightBrown : Color

Dark

darkRed : Color

darkOrange : Color

darkYellow : Color

darkGreen : Color

darkBlue : Color

darkPurple : Color

darkBrown : Color

Eight Shades of Grey

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

white : Color

lightGrey : Color

grey : Color

darkGrey : Color

lightCharcoal : Color

charcoal : Color

darkCharcoal : Color

lightGray : Color

gray : Color

darkGray : Color