Library for working with colors. Includes RGB and HSL creation, gradients, and built-in names.
Representation of colors.
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°.
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.
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.
These colors come from the Tango palette which provides aesthetically reasonable defaults for colors. Each color also comes with a light and dark version.
red : Color
orange : Color
yellow : Color
green : Color
blue : Color
purple : Color
brown : Color
lightRed : Color
lightOrange : Color
lightYellow : Color
lightGreen : Color
lightBlue : Color
lightPurple : Color
lightBrown : Color
darkRed : Color
darkOrange : Color
darkYellow : Color
darkGreen : Color
darkBlue : Color
darkPurple : Color
darkBrown : Color
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