colorizr

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 // #ff0044
colorizr.hsl // { h: 344, s: 100, l: 50 };
colorizr.rgb // { r: 255, g: 0, b: 68 };

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