Module

CSS.Color

Package: purescript-css
Repository: slamdata/purescript-css

Re-exports from Color

#ColorSpace Source

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

#Color Source

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 Source

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:

#white Source

white :: Color

Pure white.

#toXYZ Source

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

Get XYZ coordinates according to the CIE 1931 color space.

See:

#toRGBA' Source

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 Source

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 Source

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 Source

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 Source

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 Source

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 Source

toGray :: Color -> Color

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

#textColor Source

textColor :: Color -> Color

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

#saturate Source

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 Source

rotateHue :: Number -> Color -> Color

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

#rgba' Source

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

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

#rgba Source

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' Source

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

Create a Color from RGB values between 0.0 and 1.0.

#rgb Source

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

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

#mix Source

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 Source

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 Source

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 Source

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 Source

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 Source

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 Source

isLight :: Color -> Boolean

Determine whether a color is perceived as a light color.

isLight c = brightness c > 0.5

#hsla Source

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 Source

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 Source

graytone :: Number -> Color

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

#fromInt Source

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 Source

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 Source

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 Source

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 Source

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 Source

cssStringRGBA :: Color -> String

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

#cssStringHSLA Source

cssStringHSLA :: Color -> String

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

#contrast Source

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 Source

complementary :: Color -> Color

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

#brightness Source

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 Source

black :: Color

Pure black.

Re-exports from Color.Scheme.X11

#yellowgreen Source

yellowgreen :: Color

#yellow Source

yellow :: Color

#whitesmoke Source

whitesmoke :: Color

#wheat Source

wheat :: Color

#violet Source

violet :: Color

#turquoise Source

turquoise :: Color

#tomato Source

tomato :: Color

#thistle Source

thistle :: Color

#teal Source

teal :: Color

#tan Source

tan :: Color

#steelblue Source

steelblue :: Color

#springgreen Source

springgreen :: Color

#snow Source

snow :: Color

#slategrey Source

slategrey :: Color

#slategray Source

slategray :: Color

#slateblue Source

slateblue :: Color

#skyblue Source

skyblue :: Color

#silver Source

silver :: Color

#sienna Source

sienna :: Color

#seashell Source

seashell :: Color

#seagreen Source

seagreen :: Color

#sandybrown Source

sandybrown :: Color

#salmon Source

salmon :: Color

#saddlebrown Source

saddlebrown :: Color

#royalblue Source

royalblue :: Color

#rosybrown Source

rosybrown :: Color

#red Source

red :: Color

#purple Source

purple :: Color

#powderblue Source

powderblue :: Color

#plum Source

plum :: Color

#pink Source

pink :: Color

#peru Source

peru :: Color

#peachpuff Source

peachpuff :: Color

#papayawhip Source

papayawhip :: Color

#palevioletred Source

palevioletred :: Color

#paleturquoise Source

paleturquoise :: Color

#palegreen Source

palegreen :: Color

#palegoldenrod Source

palegoldenrod :: Color

#orchid Source

orchid :: Color

#orangered Source

orangered :: Color

#orange Source

orange :: Color

#olivedrab Source

olivedrab :: Color

#olive Source

olive :: Color

#oldlace Source

oldlace :: Color

#navy Source

navy :: Color

#navajowhite Source

navajowhite :: Color

#moccasin Source

moccasin :: Color

#mistyrose Source

mistyrose :: Color

#mintcream Source

mintcream :: Color

#midnightblue Source

midnightblue :: Color

#mediumvioletred Source

mediumvioletred :: Color

#mediumturquoise Source

mediumturquoise :: Color

#mediumspringgreen Source

mediumspringgreen :: Color

#mediumslateblue Source

mediumslateblue :: Color

#mediumseagreen Source

mediumseagreen :: Color

#mediumpurple Source

mediumpurple :: Color

#mediumorchid Source

mediumorchid :: Color

#mediumblue Source

mediumblue :: Color

#mediumaquamarine Source

mediumaquamarine :: Color

#maroon Source

maroon :: Color

#magenta Source

magenta :: Color

#linen Source

linen :: Color

#limegreen Source

limegreen :: Color

#lime Source

lime :: Color

#lightyellow Source

lightyellow :: Color

#lightsteelblue Source

lightsteelblue :: Color

#lightslategrey Source

lightslategrey :: Color

#lightslategray Source

lightslategray :: Color

#lightskyblue Source

lightskyblue :: Color

#lightseagreen Source

lightseagreen :: Color

#lightsalmon Source

lightsalmon :: Color

#lightpink Source

lightpink :: Color

#lightgrey Source

lightgrey :: Color

#lightgreen Source

lightgreen :: Color

#lightgray Source

lightgray :: Color

#lightgoldenrodyellow Source

lightgoldenrodyellow :: Color

#lightcyan Source

lightcyan :: Color

#lightcoral Source

lightcoral :: Color

#lightblue Source

lightblue :: Color

#lemonchiffon Source

lemonchiffon :: Color

#lawngreen Source

lawngreen :: Color

#lavenderblush Source

lavenderblush :: Color

#lavender Source

lavender :: Color

#khaki Source

khaki :: Color

#ivory Source

ivory :: Color

#indigo Source

indigo :: Color

#indianred Source

indianred :: Color

#hotpink Source

hotpink :: Color

#honeydew Source

honeydew :: Color

#grey Source

grey :: Color

#greenyellow Source

greenyellow :: Color

#green Source

green :: Color

#gray Source

gray :: Color

#goldenrod Source

goldenrod :: Color

#gold Source

gold :: Color

#ghostwhite Source

ghostwhite :: Color

#gainsboro Source

gainsboro :: Color

#fuchsia Source

fuchsia :: Color

#forestgreen Source

forestgreen :: Color

#floralwhite Source

floralwhite :: Color

#firebrick Source

firebrick :: Color

#dodgerblue Source

dodgerblue :: Color

#dimgrey Source

dimgrey :: Color

#dimgray Source

dimgray :: Color

#deepskyblue Source

deepskyblue :: Color

#deeppink Source

deeppink :: Color

#darkviolet Source

darkviolet :: Color

#darkturquoise Source

darkturquoise :: Color

#darkslategrey Source

darkslategrey :: Color

#darkslategray Source

darkslategray :: Color

#darkslateblue Source

darkslateblue :: Color

#darkseagreen Source

darkseagreen :: Color

#darksalmon Source

darksalmon :: Color

#darkred Source

darkred :: Color

#darkorchid Source

darkorchid :: Color

#darkorange Source

darkorange :: Color

#darkolivegreen Source

darkolivegreen :: Color

#darkmagenta Source

darkmagenta :: Color

#darkkhaki Source

darkkhaki :: Color

#darkgrey Source

darkgrey :: Color

#darkgreen Source

darkgreen :: Color

#darkgray Source

darkgray :: Color

#darkgoldenrod Source

darkgoldenrod :: Color

#darkcyan Source

darkcyan :: Color

#darkblue Source

darkblue :: Color

#cyan Source

cyan :: Color

#crimson Source

crimson :: Color

#cornsilk Source

cornsilk :: Color

#cornflowerblue Source

cornflowerblue :: Color

#coral Source

coral :: Color

#chocolate Source

chocolate :: Color

#chartreuse Source

chartreuse :: Color

#cadetblue Source

cadetblue :: Color

#burlywood Source

burlywood :: Color

#brown Source

brown :: Color

#blueviolet Source

blueviolet :: Color

#blue Source

blue :: Color

#blanchedalmond Source

blanchedalmond :: Color

#bisque Source

bisque :: Color

#beige Source

beige :: Color

#azure Source

azure :: Color

#aquamarine Source

aquamarine :: Color

#aqua Source

aqua :: Color

#antiquewhite Source

antiquewhite :: Color

#aliceblue Source

aliceblue :: Color