CSS.Color
- Package
- purescript-css
- Repository
- purescript-contrib/purescript-css
Re-exports from Color
#ColorSpace
data ColorSpace
Definition of a color space.
RGB
: red, green, blueHSL
: hue, saturation, lightnessLCh
: Lightness, chroma, hueLab
: Lightness, a, b
Constructors
RGB
HSL
LCh
Lab
#Color
data Color
The representation of a color.
Note:
- The
Eq
instance compares twoColor
s 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
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
white :: Color
Pure white.
#toXYZ
toXYZ :: Color -> { x :: Number, y :: Number, z :: Number }
Get XYZ coordinates according to the CIE 1931 color space.
See:
#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.
#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.
#toLab
toLab :: Color -> { a :: Number, b :: Number, l :: Number }
Get L, a and b coordinates according to the 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.
#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.
#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.
#toGray
toGray :: Color -> Color
Convert a color to a gray tone with the same perceived luminance (see
luminance
).
#textColor
textColor :: Color -> Color
Return a readable foreground text color (either black
or white
) for a
given background color.
#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.
#rotateHue
rotateHue :: Number -> Color -> Color
Rotate the hue of a Color
by a certain angle (in degrees).
#rgba'
rgba' :: Number -> Number -> Number -> Number -> Color
Create a Color
from RGB and alpha values between 0.0 and 1.0.
#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' :: Number -> Number -> Number -> Color
Create a Color
from RGB values between 0.0 and 1.0.
#rgb
rgb :: Int -> Int -> Int -> Color
Create a Color
from integer RGB values between 0 and 255.
#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.
#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
#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.
#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.
#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.
#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
#isLight
isLight :: Color -> Boolean
Determine whether a color is perceived as a light color.
isLight c = brightness c > 0.5
#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.
#graytone
graytone :: Number -> Color
Create a gray tone from a lightness values (0.0 is black, 1.0 is white).
#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
#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.
#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.
#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.
#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.
#cssStringRGBA
cssStringRGBA :: Color -> String
A CSS representation of the color in the form rgb(..)
or rgba(...)
.
#cssStringHSLA
cssStringHSLA :: Color -> String
A CSS representation of the color in the form hsl(..)
or hsla(...)
.
#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
#complementary
complementary :: Color -> Color
Get the complementary color (hue rotated by 180°).
#brightness
brightness :: Color -> Number
The percieved brightness of the color (A number between 0.0 and 1.0).
#black
black :: Color
Pure black.
Re-exports from Color.Scheme.X11
#yellowgreen
yellowgreen :: Color
#yellow
yellow :: Color
#whitesmoke
whitesmoke :: Color
#wheat
wheat :: Color
#violet
violet :: Color
#turquoise
turquoise :: Color
#tomato
tomato :: Color
#thistle
thistle :: Color
#teal
teal :: Color
#tan
tan :: Color
#steelblue
steelblue :: Color
#springgreen
springgreen :: Color
#snow
snow :: Color
#slategrey
slategrey :: Color
#slategray
slategray :: Color
#slateblue
slateblue :: Color
#skyblue
skyblue :: Color
#silver
silver :: Color
#sienna
sienna :: Color
#seashell
seashell :: Color
#seagreen
seagreen :: Color
#sandybrown
sandybrown :: Color
#salmon
salmon :: Color
#saddlebrown
saddlebrown :: Color
#royalblue
royalblue :: Color
#rosybrown
rosybrown :: Color
#red
red :: Color
#purple
purple :: Color
#powderblue
powderblue :: Color
#plum
plum :: Color
#pink
pink :: Color
#peru
peru :: Color
#peachpuff
peachpuff :: Color
#papayawhip
papayawhip :: Color
#palevioletred
palevioletred :: Color
#paleturquoise
paleturquoise :: Color
#palegreen
palegreen :: Color
#palegoldenrod
palegoldenrod :: Color
#orchid
orchid :: Color
#orangered
orangered :: Color
#orange
orange :: Color
#olivedrab
olivedrab :: Color
#olive
olive :: Color
#oldlace
oldlace :: Color
#moccasin
moccasin :: Color
#mistyrose
mistyrose :: Color
#mintcream
mintcream :: Color
#midnightblue
midnightblue :: Color
#mediumvioletred
mediumvioletred :: Color
#mediumturquoise
mediumturquoise :: Color
#mediumspringgreen
mediumspringgreen :: Color
#mediumslateblue
mediumslateblue :: Color
#mediumseagreen
mediumseagreen :: Color
#mediumpurple
mediumpurple :: Color
#mediumorchid
mediumorchid :: Color
#mediumblue
mediumblue :: Color
#mediumaquamarine
mediumaquamarine :: Color
#maroon
maroon :: Color
#magenta
magenta :: Color
#linen
linen :: Color
#limegreen
limegreen :: Color
#lime
lime :: Color
#lightyellow
lightyellow :: Color
#lightsteelblue
lightsteelblue :: Color
#lightslategrey
lightslategrey :: Color
#lightslategray
lightslategray :: Color
#lightskyblue
lightskyblue :: Color
#lightseagreen
lightseagreen :: Color
#lightsalmon
lightsalmon :: Color
#lightpink
lightpink :: Color
#lightgrey
lightgrey :: Color
#lightgreen
lightgreen :: Color
#lightgray
lightgray :: Color
#lightgoldenrodyellow
lightgoldenrodyellow :: Color
#lightcyan
lightcyan :: Color
#lightcoral
lightcoral :: Color
#lightblue
lightblue :: Color
#lemonchiffon
lemonchiffon :: Color
#lawngreen
lawngreen :: Color
#lavenderblush
lavenderblush :: Color
#lavender
lavender :: Color
#khaki
khaki :: Color
#ivory
ivory :: Color
#indigo
indigo :: Color
#indianred
indianred :: Color
#hotpink
hotpink :: Color
#honeydew
honeydew :: Color
#grey
grey :: Color
#greenyellow
greenyellow :: Color
#green
green :: Color
#gray
gray :: Color
#goldenrod
goldenrod :: Color
#gold
gold :: Color
#ghostwhite
ghostwhite :: Color
#gainsboro
gainsboro :: Color
#fuchsia
fuchsia :: Color
#forestgreen
forestgreen :: Color
#floralwhite
floralwhite :: Color
#firebrick
firebrick :: Color
#dodgerblue
dodgerblue :: Color
#dimgrey
dimgrey :: Color
#dimgray
dimgray :: Color
#deepskyblue
deepskyblue :: Color
#deeppink
deeppink :: Color
#darkviolet
darkviolet :: Color
#darkturquoise
darkturquoise :: Color
#darkslategrey
darkslategrey :: Color
#darkslategray
darkslategray :: Color
#darkslateblue
darkslateblue :: Color
#darkseagreen
darkseagreen :: Color
#darksalmon
darksalmon :: Color
#darkred
darkred :: Color
#darkorchid
darkorchid :: Color
#darkorange
darkorange :: Color
#darkolivegreen
darkolivegreen :: Color
#darkmagenta
darkmagenta :: Color
#darkkhaki
darkkhaki :: Color
#darkgrey
darkgrey :: Color
#darkgreen
darkgreen :: Color
#darkgray
darkgray :: Color
#darkgoldenrod
darkgoldenrod :: Color
#darkcyan
darkcyan :: Color
#darkblue
darkblue :: Color
#cyan
cyan :: Color
#crimson
crimson :: Color
#cornsilk
cornsilk :: Color
#cornflowerblue
cornflowerblue :: Color
#coral
coral :: Color
#chocolate
chocolate :: Color
#chartreuse
chartreuse :: Color
#cadetblue
cadetblue :: Color
#burlywood
burlywood :: Color
#brown
brown :: Color
#blueviolet
blueviolet :: Color
#blue
blue :: Color
#blanchedalmond
blanchedalmond :: Color
#bisque
bisque :: Color
#beige
beige :: Color
#azure
azure :: Color
#aquamarine
aquamarine :: Color
#aqua
aqua :: Color
#antiquewhite
antiquewhite :: Color
#aliceblue
aliceblue :: Color
- Modules
- CSS
- CSS.
Animation - CSS.
Background - CSS.
Border - CSS.
Box - CSS.
Color - CSS.
Common - CSS.
Cursor - CSS.
Display - CSS.
Elements - CSS.
Flexbox - CSS.
Font - CSS.
FontFace - CSS.
FontStyle - CSS.
Geometry - CSS.
Gradient - CSS.
ListStyle - CSS.
ListStyle. Image - CSS.
ListStyle. Position - CSS.
ListStyle. Type - CSS.
Media - CSS.
Overflow - CSS.
Property - CSS.
Pseudo - CSS.
Render - CSS.
Selector - CSS.
Size - CSS.
String - CSS.
Stylesheet - CSS.
Text - CSS.
Text. Overflow - CSS.
Text. Shadow - CSS.
Text. Transform - CSS.
Text. Whitespace - CSS.
TextAlign - CSS.
Time - CSS.
Transform - CSS.
Transition - CSS.
VerticalAlign