Color overview
Added in v0.1.0
Table of contents
constructors
black
Pure black.
Signature
export declare const black: HSLA.HSLA
Added in v0.1.0
fromHexString
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 Option.none if the string is in a wrong format.
Signature
export declare const fromHexString: (hex: string) => O.Option<Color>
Added in v0.1.0
fromInt
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:
Signature
export declare const fromInt: (i: number) => Color
Example
import * as C from 'ts-colors/Color'
C.fromInt(0xff0000)
Added in v0.1.0
graytone
Create a gray tone from a lightness values (0.0 is black, 1.0 is white).
Signature
export declare const graytone: (l: number) => Color
Added in v0.1.0
hsl
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.
Signature
export declare const hsl: (h: number, s: number, l: number) => Color
Added in v0.1.0
hsla
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.
Signature
export declare const hsla: (h: number, s: number, l: number, a: number) => Color
Added in v0.1.0
hsv
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.
Signature
export declare const hsv: (h: number, s: number, v: number) => Color
Added in v0.1.0
hsva
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.
Signature
export declare const hsva: (h: number, s: number, v: number, a: number) => Color
Added in v0.1.0
lab
Create a Color from L, a and b 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
Signature
export declare const lab: (l: number, a: number, b: number) => Color
Added in v0.1.0
lch
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
Signature
export declare const lch: (l: number, c: number, h: number) => Color
Added in v0.1.0
rgb
Create a Color from integer RGB values between 0 and 255.
Signature
export declare const rgb: (r: number, g: number, b: number) => Color
Added in v0.1.0
rgb2
Create a Color from RGB values between 0.0 and 1.0.
Signature
export declare const rgb2: (r: number, g: number, b: number) => Color
Added in v0.1.0
rgba
Create a Color from integer RGB values between 0 and 255 and a floating point alpha value between 0.0 and 1.0.
RGB to HSL conversion algorithm adapted from https://en.wikipedia.org/wiki/HSL_and_HSV
Signature
export declare const rgba: (r: number, g: number, b: number, a: number) => Color
Added in v0.1.0
rgba2
Create a Color from RGB and alpha values between 0.0 and 1.0.
Signature
export declare const rgba2: (r: number, g: number, b: number, a: number) => Color
Added in v0.1.0
white
Pure white.
Signature
export declare const white: HSLA.HSLA
Added in v0.1.0
xyz
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
Signature
export declare const xyz: (x: number, y: number, z: number) => Color
Added in v0.1.0
destructors
hue
Get the color hue in the interval [0, 360].
Signature
export declare const hue: (c: Color) => number
Added in v0.1.4
toCSS
A CSS representation of the color
Signature
export declare const toCSS: (s: ColorSpace) => (c: Color) => string
Added in v0.1.5
toHSLA
Convert a Color to its Hue, Saturation, Lightness and Alpha values. See hsla for the ranges of each channel.
Signature
export declare const toHSLA: (c: Color) => HSLA.HSLA
Added in v0.1.0
toHSLAString
A CSS representation of the color in the form hsl(..) or hsla(...).
Signature
export declare const toHSLAString: (c: Color) => string
Added in v0.1.5
toHSVA
Convert a Color to its Hue, Saturation, Value and Alpha values. See hsva for the ranges of each channel.
Signature
export declare const toHSVA: (c: Color) => HSVA.HSVA
Added in v0.1.0
toHexString
Signature
export declare const toHexString: (c: Color) => string
Added in v0.1.0
toLCh
Get L, C and h coordinates according to the CIE LCh color space. See: https://en.wikipedia.org/wiki/Lab_color_space
Signature
export declare const toLCh: (c: Color) => LCh.LCh
Added in v0.1.0
toLab
Get L, a and b coordinates according to the Lab color space.
See: https://en.wikipedia.org/wiki/Lab_color_space
Signature
export declare const toLab: (c: Color) => Lab.Lab
Added in v0.1.0
toRGBA
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.
Signature
export declare const toRGBA: (c: Color) => RGBA.RGBA
Added in v0.1.0
toRGBAString
A CSS representation of the color in the form rgb(..) or rgba(...)
Signature
export declare const toRGBAString: (c: HSLA.HSLA) => string
Added in v0.1.5
toXYZ
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
Signature
export declare const toXYZ: (c: Color) => XYZ.XYZ
Added in v0.1.0
cssStringHSLA
Use toHSLAString instead
Signature
export declare const cssStringHSLA: (c: Color) => string
Added in v0.1.0
cssStringRGBA
Use toRGBAString instead
Signature
export declare const cssStringRGBA: (c: Color) => string
Added in v0.1.0
instances
Eq
Signature
export declare const Eq: Equals.Eq<HSLA.HSLA>
Added in v0.1.0
- The
Eqinstance compares twoColors 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).
OrdBrightness
Signature
export declare const OrdBrightness: Ord.Ord<HSLA.HSLA>
Added in v0.1.4
OrdLuminance
Signature
export declare const OrdLuminance: Ord.Ord<HSLA.HSLA>
Added in v0.1.0
Show
Signature
export declare const Show: Sh.Show<HSLA.HSLA>
Added in v0.1.0
model
Color (type alias)
Colors are represented by their HSL values (hue, saturation, lightness) internally, as this provides more flexibility than storing RGB values.
Signature
export type Color = HSLA.HSLA
Added in v0.1.0
ColorSpace (type alias)
Signature
export type ColorSpace = 'RGB' | 'HSL' | 'LCh' | 'Lab'
Added in v0.1.0
utils
Interpolator (type alias)
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.
Signature
export type Interpolator = (a: Color) => (b: Color) => (ratio: number) => Color
Added in v0.1.0
alpha
get the alpha channel of a color
Signature
export declare const alpha: (c: Color) => number
Added in v0.1.7
brightness
The percieved brightness of the color (A number between 0.0 and 1.0). See: https://www.w3.org/TR/AERT#color-contrast
Signature
export declare const brightness: (c: Color) => number
Added in v0.1.0
complementary
Get the complementary color (hue rotated by 180°).
Signature
export declare const complementary: (c: HSLA.HSLA) => HSLA.HSLA
Added in v0.1.0
contrast
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
Signature
export declare const contrast: (c1: Color) => (c2: Color) => number
Added in v0.1.0
darken
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.
Signature
export declare const darken: (f: number) => Endomorphism<Color>
Added in v0.1.0
desaturate
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.
Signature
export declare const desaturate: (f: number) => Endomorphism<Color>
Added in v0.1.0
distance
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
Signature
export declare const distance: (a: Color) => (b: Color) => number
Added in v0.1.0
isLight
Determine whether a color is perceived as a light color.
Signature
export declare const isLight: (c: Color) => boolean
Added in v0.1.0
isReadable
Determine whether text of one color is readable on a background of a different color (see contrast). This function is symmetric in both arguments.
Signature
export declare const isReadable: (c1: Color) => (c2: Color) => boolean
Added in v0.1.0
lighten
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.
Signature
export declare const lighten: (f: number) => (c: Color) => Color
Added in v0.1.0
luminance
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
Signature
export declare const luminance: (color: Color) => number
Added in v0.1.0
mix
Mix two colors by linearly interpolating between them in the RGB color space.
Signature
export declare const mix: (space: ColorSpace) => Interpolator
Added in v0.1.0
mixHSL
Mix two colors by linearly interpolating between them in the HSL colorspace. The shortest path is chosen along the circle of hue values.
Signature
export declare const mixHSL: Interpolator
Added in v0.1.0
mixLCh
Mix two colors by linearly interpolating between them in the LCh color space.
Signature
export declare const mixLCh: Interpolator
Added in v0.1.0
mixLab
Mix two colors by linearly interpolating between them in the Lab color space.
Signature
export declare const mixLab: Interpolator
Added in v0.1.0
mixRGB
Mix two colors by linearly interpolating between them in the RGB color space.
Signature
export declare const mixRGB: Interpolator
Added in v0.1.0
rotateHue
Rotate the hue of a Color by a certain angle (in degrees).
Signature
export declare const rotateHue: (angle: number) => (c: Color) => Color
Added in v0.1.0
saturate
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.
Signature
export declare const saturate: (f: number) => (c: Color) => Color
Added in v0.1.0
setAlpha
get the alpha channel of a color
Signature
export declare const setAlpha: (alpha: number) => Endomorphism<Color>
Added in v0.1.7
textColor
Return a readable foreground text color (either black or white) for a given background color.
Signature
export declare const textColor: (c: Color) => Color
Added in v0.1.0
toGray
Convert a color to a gray tone with the same perceived luminance (see luminance)
Signature
export declare const toGray: Endomorphism<HSLA.HSLA>
Added in v0.1.0