Color

This package defines a standard Color type with the hope that all Elm packages that produce colors and all Elm packages that consume colors will use this type to allow all such packages to easily interoperate for the ultimate benefit of all Elm developers.

Note about color space conversions: When converting between RGB and HSL, this module produce results consistent with the algorithm specified in the CSS Color Module Level 3, Section 4.2.4. HSL color values.

Types

type Color

Represents a color.

Creating colors

From numbers

These are the most concise ways to create colors:

rgb255 : Int -> Int -> Int -> Color

Creates a color from RGB (red, green, blue) integer values between 0 and 255.

This is a convenience function if you find passing RGB channels as integers scaled to 255 more intuitive.

See also:

If you want to provide RGB values as Float values between 0.0 and 1.0, see rgb.

rgb : Float -> Float -> Float -> Color

Creates a color from RGB (red, green, blue) values between 0.0 and 1.0 (inclusive).

This is a convenience function for making a color value with full opacity.

See also:

If you want to pass RGB values as Int values between 0 and 255, see rgb255.

If you need to provide an alpha value, see rgba.

If you want to be more explicit with parameter names, see fromRgba.

rgba : Float -> Float -> Float -> Float -> Color

Creates a color from RGBA (red, green, blue, alpha) values between 0.0 and 1.0 (inclusive).

See also:

If you want to be more concise and want full alpha, see rgb.

If you want to be more explicit with parameter names, see fromRgba.

hsl : Float -> Float -> Float -> Color

Creates a color from HSL (hue, saturation, lightness) values between 0.0 and 1.0 (inclusive).

See also:

If you need to provide an alpha value, see hsla.

If you want to be more explicit with parameter names, see fromHsla.

hsla : Float -> Float -> Float -> Float -> Color

Creates a color from HSLA (hue, saturation, lightness, alpha) values between 0.0 and 1.0 (inclusive).

See also:

If you want to be more concise and want full alpha, see hsl.

If you want to be more explicit with parameter names, see fromHsla.

From records

These ways to make colors make the names of each component explicit, and are compatible with the corresponding to... function.

fromRgba :

{ red : Float

, green : Float

, blue : Float

, alpha : Float

}

-> Color

Creates a color from a record of RGBA values (red, green, blue, alpha) between 0.0 and 1.0 (inclusive).

The RGB values are interpreted in the sRGB color space, which is the color space specified by the HTML, CSS, and SVG specs (and is also widely considered the default color space for digital images that do not explicitly contain color space information).

This is a strict function that will force you to name all channel parameters, to avoid mixing them up.

See also:

If you want to be more concise, see rgba or rgb.

fromHsla :

{ hue : Float

, saturation : Float

, lightness : Float

, alpha : Float

}

-> Color

Creates a color from HSLA (hue, saturation, lightness, alpha) values between 0.0 and 1.0 (inclusive).

See also:

If you want to be more concise, see hsla or hsl.

Using colors with HTML/CSS/SVG

toCssString : Color -> String

Converts a color to a string suitable for use in CSS. The string will conform to CSS Color Module Level 3, which is supported by all current web browsers, all versions of Firefox, all versions of Chrome, IE 9+, and all common mobile browsers (browser support details).

Html.Attributes.style "background-color" (Color.toCssString Color.lightPurple)

Note: the current implementation produces a string in the form rgba(rr.rr%,gg.gg%,bb.bb%,a.aaa), but this may change in the future, and you should not rely on this implementation detail.

Extracing values from colors

toRgba :

Color

-> { red : Float

, green : Float

, blue : Float

, alpha : Float

}

Extract the RGBA (red, green, blue, alpha) components from a color. The component values will be between 0.0 and 1.0 (inclusive).

toHsla :

Color

-> { hue : Float

, saturation : Float

, lightness : Float

, alpha : Float

}

Extract the HSLA (hue, saturation, lightness, alpha) components from a color. The component values will be between 0.0 and 1.0 (inclusive).

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.