Module

Color

This module provides basic types and functions for dealing with colors.

Colors can be constructed from HSL values, RGB values or Hex strings / integers. In addition, a lot of standardized named colors can be found in Color.Scheme.X11.

This module also provides functions to modify colors (e.g. lighten/darken, saturate/desaturate, complementary), to combine colors (mix) and to analyze colors (e.g. brightness, luminance, contrast).

Implementation detail: Colors are represented by their HSL values (hue, saturation, lightness) internally, as this provides more flexibility than storing RGB values. In particular, note that only colors within the sRGB gamut can be represented.

#Color 

data Color

The representation of a color.

Note:

  • The Eq instance compares two Colors by comparing their (integer) RGB values. This is different from comparing the HSL values (for example, HSL has many different representations of black (arbitrary hue and saturation values).
  • Colors outside the sRGB gamut which cannot be displayed on a typical computer screen can not be represented by Color.

Instances

#ColorSpace 

data ColorSpace

Definition of a color space.

  • RGB: red, green, blue
  • HSL: hue, saturation, lightness
  • LCh: Lightness, chroma, hue
  • Lab: Lightness, a, b

Constructors

#rgba 

rgba :: Int -> Int -> Int -> Number -> Color

Create a Color from integer RGB values between 0 and 255 and a floating point alpha value between 0.0 and 1.0.

#rgb 

rgb :: Int -> Int -> Int -> Color

Create a Color from integer RGB values between 0 and 255.

#rgba' 

rgba' :: Number -> Number -> Number -> Number -> Color

Create a Color from RGB and alpha values between 0.0 and 1.0.

#rgb' 

rgb' :: Number -> Number -> Number -> Color

Create a Color from RGB values between 0.0 and 1.0.

#hsla 

hsla :: Number -> Number -> Number -> Number -> Color

Create a Color from Hue, Saturation, Lightness and Alpha values. The Hue is given in degrees, as a Number between 0.0 and 360.0. Saturation, Lightness and Alpha are numbers between 0.0 and 1.0.

#hsl 

hsl :: Number -> Number -> Number -> Color

Create a Color from Hue, Saturation and Lightness values. The Hue is given in degrees, as a Number between 0.0 and 360.0. Both Saturation and Lightness are numbers between 0.0 and 1.0.

#hsva 

hsva :: Number -> Number -> Number -> Number -> Color

Create a Color from Hue, Saturation, Value and Alpha values. The Hue is given in degrees, as a Number between 0.0 and 360.0. Saturation, Value and Alpha are numbers between 0.0 and 1.0.

#hsv 

hsv :: Number -> Number -> Number -> Color

Create a Color from Hue, Saturation and Value values. The Hue is given in degrees, as a Number between 0.0 and 360.0. Both Saturation and Value are numbers between 0.0 and 1.0.

#xyz 

xyz :: Number -> Number -> Number -> Color

Create a Color from XYZ coordinates in the CIE 1931 color space. Note that a Color always represents a color in the sRGB gamut (colors that can be represented on a typical computer screen) while the XYZ color space is bigger. This function will tend to create fully saturated colors at the edge of the sRGB gamut if the coordinates lie outside the sRGB range.

See:

#lab 

lab :: Number -> Number -> Number -> Color

Create a Color from L, a and b coordinates coordinates in the Lab color space. Note: See documentation for xyz. The same restrictions apply here.

See: https://en.wikipedia.org/wiki/Lab_color_space

#lch 

lch :: Number -> Number -> Number -> Color

Create a Color from lightness, chroma and hue coordinates in the CIE LCh color space. This is a cylindrical transform of the Lab color space. Note: See documentation for xyz. The same restrictions apply here.

See: https://en.wikipedia.org/wiki/Lab_color_space

#fromHexString 

fromHexString :: String -> Maybe Color

Parse a hexadecimal RGB code of the form #rgb or #rrggbb. The # character is required. Each hexadecimal digit is of the form [0-9a-fA-F] (case insensitive). Returns Nothing if the string is in a wrong format.

#fromInt 

fromInt :: Int -> Color

Converts an integer to a color (RGB representation). 0 is black and 0xffffff is white. Values outside this range will be clamped.

This function is useful if you want to hard-code Hex values. For example:

red = fromInt 0xff0000

#toHSLA 

toHSLA :: Color -> { a :: Number, h :: Number, l :: Number, s :: Number }

Convert a Color to its Hue, Saturation, Lightness and Alpha values. See hsla for the ranges of each channel.

#toHSVA 

toHSVA :: Color -> { a :: Number, h :: Number, s :: Number, v :: Number }

Convert a Color to its Hue, Saturation, Value and Alpha values. See hsva for the ranges of each channel.

#toRGBA 

toRGBA :: Color -> { a :: Number, b :: Int, g :: Int, r :: Int }

Convert a Color to its red, green, blue and alpha values. The RGB values are integers in the range from 0 to 255. The alpha channel is a number between 0.0 and 1.0.

#toRGBA' 

toRGBA' :: Color -> { a :: Number, b :: Number, g :: Number, r :: Number }

Convert a Color to its red, green, blue and alpha values. All values are numbers in the range from 0.0 to 1.0.

#toXYZ 

toXYZ :: Color -> { x :: Number, y :: Number, z :: Number }

Get XYZ coordinates according to the CIE 1931 color space.

See:

#toLab 

toLab :: Color -> { a :: Number, b :: Number, l :: Number }

Get L, a and b coordinates according to the Lab color space.

See: https://en.wikipedia.org/wiki/Lab_color_space

#toLCh 

toLCh :: Color -> { c :: Number, h :: Number, l :: Number }

Get L, C and h coordinates according to the CIE LCh color space.

See: https://en.wikipedia.org/wiki/Lab_color_space

#toHexString 

toHexString :: Color -> String

Return a hexadecimal representation of the color in the form #rrggbb, where rr, gg and bb refer to hexadecimal digits corresponding to the RGB channel values between 00 and ff. The alpha channel is not represented.

#cssStringHSLA 

cssStringHSLA :: Color -> String

A CSS representation of the color in the form hsl(..) or hsla(...).

#cssStringRGBA 

cssStringRGBA :: Color -> String

A CSS representation of the color in the form rgb(..) or rgba(...).

#black 

black :: Color

Pure black.

#white 

white :: Color

Pure white.

#graytone 

graytone :: Number -> Color

Create a gray tone from a lightness values (0.0 is black, 1.0 is white).

#rotateHue 

rotateHue :: Number -> Color -> Color

Rotate the hue of a Color by a certain angle (in degrees).

#complementary 

complementary :: Color -> Color

Get the complementary color (hue rotated by 180°).

#lighten 

lighten :: Number -> Color -> Color

Lighten a color by adding a certain amount (number between -1.0 and 1.0) to the lightness channel. If the number is negative, the color is darkened.

#darken 

darken :: Number -> Color -> Color

Darken a color by subtracting a certain amount (number between -1.0 and 1.0) from the lightness channel. If the number is negative, the color is lightened.

#saturate 

saturate :: Number -> Color -> Color

Increase the saturation of a color by adding a certain amount (number between -1.0 and 1.0) to the saturation channel. If the number is negative, the color is desaturated.

#desaturate 

desaturate :: Number -> Color -> Color

Decrease the saturation of a color by subtracting a certain amount (number between -1.0 and 1.0) from the saturation channel. If the number is negative, the color is saturated.

#toGray 

toGray :: Color -> Color

Convert a color to a gray tone with the same perceived luminance (see luminance).

#Interpolator 

type Interpolator = Color -> Color -> Number -> Color

A function that interpolates between two colors. It takes a start color, an end color, and a ratio in the interval [0.0, 1.0]. It returns the mixed color.

#mix 

mix :: ColorSpace -> Interpolator

Mix two colors by linearly interpolating between them in the specified color space. For the HSL colorspace, the shortest path is chosen along the circle of hue values.

#mixCubehelix 

mixCubehelix :: Number -> Interpolator

Mix two colors via Dave Green's cubehelix by interpolating between them. Takes a gamma correction value as an argument and returns an Interpolator function.

For more details see:

Ported from:

#brightness 

brightness :: Color -> Number

The percieved brightness of the color (A number between 0.0 and 1.0).

See: https://www.w3.org/TR/AERT#color-contrast

#luminance 

luminance :: Color -> Number

The relative brightness of a color (normalized to 0.0 for darkest black and 1.0 for lightest white), according to the WCAG definition.

See: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

#contrast 

contrast :: Color -> Color -> Number

The contrast ratio of two colors. A minimum contrast ratio of 4.5 is recommended to ensure that text is readable on a colored background. The contrast ratio is symmetric on both arguments: contrast c1 c2 == contrast c2 c1.

See http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef

#isLight 

isLight :: Color -> Boolean

Determine whether a color is perceived as a light color.

isLight c = brightness c > 0.5

#isReadable 

isReadable :: Color -> Color -> Boolean

Determine whether text of one color is readable on a background of a different color (see contrast). This function is symmetric in both arguments.

isReadable c1 c2 = contrast c1 c2 > 4.5

#textColor 

textColor :: Color -> Color

Return a readable foreground text color (either black or white) for a given background color.

#distance 

distance :: Color -> Color -> Number

Compute the perceived 'distance' between two colors according to the CIE76 delta-E standard. A distance below ~2.3 is not noticable.

See: https://en.wikipedia.org/wiki/Color_difference

Modules