Color

This package defines a standard Color type with the hope that all packages that produce or consume colors will use this type to allow all such packages to easily interoperate.

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.

Extracting 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).

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).
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.

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
black : 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
gray : Color
darkGray : Color