CSS.Color

data ColorSpace

Definition of a color space.

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

Constructors

• RGB
• HSL
• LCh
• Lab

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

• Show Color
• Eq Color

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:

• https://en.wikipedia.org/wiki/CIE_1931_color_space
• https://en.wikipedia.org/wiki/SRGB

white :: Color

Pure white.

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

Get XYZ coordinates according to the CIE 1931 color space.

See:

• https://en.wikipedia.org/wiki/CIE_1931_color_space
• https://en.wikipedia.org/wiki/SRGB

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.

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.

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

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.

toGray :: Color -> Color

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

textColor :: Color -> Color

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

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.

rotateHue :: Number -> Color -> Color

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

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

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

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' :: Number -> Number -> Number -> Color

Create a Color from RGB values between 0.0 and 1.0.

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

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

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.

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

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.

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

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

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

isLight :: Color -> Boolean

Determine whether a color is perceived as a light color.

isLight c = brightness c > 0.5

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

graytone :: Number -> Color

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

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

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.

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

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.

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.

cssStringRGBA :: Color -> String

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

cssStringHSLA :: Color -> String

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

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

complementary :: Color -> Color

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

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

black :: Color

Pure black.

yellowgreen :: Color

yellow :: Color

whitesmoke :: Color

wheat :: Color

violet :: Color

turquoise :: Color

tomato :: Color

thistle :: Color

teal :: Color

tan :: Color

steelblue :: Color

springgreen :: Color

snow :: Color

slategrey :: Color

slategray :: Color

slateblue :: Color

skyblue :: Color

silver :: Color

sienna :: Color

seashell :: Color

seagreen :: Color

sandybrown :: Color

salmon :: Color

saddlebrown :: Color

royalblue :: Color

rosybrown :: Color

red :: Color

purple :: Color

powderblue :: Color

plum :: Color

pink :: Color

peru :: Color

peachpuff :: Color

papayawhip :: Color

palevioletred :: Color

paleturquoise :: Color

palegreen :: Color

palegoldenrod :: Color

orchid :: Color

orangered :: Color

orange :: Color

olivedrab :: Color

olive :: Color

oldlace :: Color

navy :: Color

navajowhite :: Color

moccasin :: Color

mistyrose :: Color

mintcream :: Color

midnightblue :: Color

mediumvioletred :: Color

mediumturquoise :: Color

mediumspringgreen :: Color

mediumslateblue :: Color

mediumseagreen :: Color

mediumpurple :: Color

mediumorchid :: Color

mediumblue :: Color

mediumaquamarine :: Color

maroon :: Color

magenta :: Color

linen :: Color

limegreen :: Color

lime :: Color

lightyellow :: Color

lightsteelblue :: Color

lightslategrey :: Color

lightslategray :: Color

lightskyblue :: Color

lightseagreen :: Color

lightsalmon :: Color

lightpink :: Color

lightgrey :: Color

lightgreen :: Color

lightgray :: Color

lightgoldenrodyellow :: Color

lightcyan :: Color

lightcoral :: Color

lightblue :: Color

lemonchiffon :: Color

lawngreen :: Color

lavenderblush :: Color

lavender :: Color

khaki :: Color

ivory :: Color

indigo :: Color

indianred :: Color

hotpink :: Color

honeydew :: Color

grey :: Color

greenyellow :: Color

green :: Color

gray :: Color

goldenrod :: Color

gold :: Color

ghostwhite :: Color

gainsboro :: Color

fuchsia :: Color

forestgreen :: Color

floralwhite :: Color

firebrick :: Color

dodgerblue :: Color

dimgrey :: Color

dimgray :: Color

deepskyblue :: Color

deeppink :: Color

darkviolet :: Color

darkturquoise :: Color

darkslategrey :: Color

darkslategray :: Color

darkslateblue :: Color

darkseagreen :: Color

darksalmon :: Color

darkred :: Color

darkorchid :: Color

darkorange :: Color

darkolivegreen :: Color

darkmagenta :: Color

darkkhaki :: Color

darkgrey :: Color

darkgreen :: Color

darkgray :: Color

darkgoldenrod :: Color

darkcyan :: Color

darkblue :: Color

cyan :: Color

crimson :: Color

cornsilk :: Color

cornflowerblue :: Color

coral :: Color

chocolate :: Color

chartreuse :: Color

cadetblue :: Color

burlywood :: Color

brown :: Color

blueviolet :: Color

blue :: Color

blanchedalmond :: Color

bisque :: Color

beige :: Color

azure :: Color

aquamarine :: Color

aqua :: Color

antiquewhite :: Color

aliceblue :: Color