Colorizr
Color conversion, manipulation and comparison.
Highlights
- 🏖 Easy to use: Works with most color models, including CSS strings
- ♿️ Acessibility: Full WCAG analysis and comparison.
- 🛠 Small: Less than 4k (gzipped) and zero dependencies.
- 🟦 Modern: Written in Typescript.
Setup
Install
npm install --save colorizr
And import it:
import Colorizr from 'Colorizr';
Usage
const colorizr = new Colorizr('#ff0044');
colorizr.hex
colorizr.hsl
colorizr.rgb
API
Getters
colorizr.hex
returns the hex
colorizr.hsl
returns the hsl object
colorizr.rgb
returns the rgb object
colorizr.hue
returns the color hue, between 0 and 360
colorizr.saturation
returns the color saturation, between 0 and 100
colorizr.lightness
returns the color lightness, between 0 and 100
colorizr.red
returns the color red level, between 0 and 255
colorizr.green
returns the color green level, between 0 and 255
colorizr.blue
returns the color blue level, between 0 and 255
colorizr.luminance
returns the color luminance, between 0 and 1
colorizr.chroma
returns the color chroma, between 0 and 1
colorizr.textColor
returns a hex value with the contrasted color
Manipulation
colorizr.lighten(percentage: number = 10)
returns a hex value with the increased lightness
colorizr.darken(percentage: number = 10)
returns a hex value with the decreased lightness
colorizr.saturate(percentage: number = 10)
returns a hex value with the increased saturation
colorizr.saturate(percentage: number = 10)
returns a hex value with the decreased lightness
colorizr.invert()
returns a hex value with the inverted color
colorizr.fade(percentage: number = 10)
returns a css value with alpha
Comparison
colorizr.compareTo(color: string)
returns an object with the analysis
{
brightnessDifference: 189.041,
colorDifference: 595,
compliant: 2,
contrast: 10.67,
largeAA: true,
largeAAA: true,
normalAA: true,
normalAAA: true,
}
Helpers
brightnessDifference
get the brightness difference between 2 colors
colorDifference
get the color difference between 2 colors
contrast
get the color contrast between 2 colors
harmony
get the harmony scheme for a color
hex2hsl
hex2rgb
hsl2hex
hsl2rgb
hue2rgb
luminance
palette
parse-css
parse-hex
random
rgb2hex
rgb2hsl
rotate
shift
text-color
valid-hex
wcag
References
calculating-color-contrast
Colour Contrast Check
Contrast Checker