colorizr

Colorizr

Color conversion, manipulation and comparison.

Highlights

• 🏖 Easy to use: Works with HSL and RGB, including CSS strings
• ♿️ Acessibility: 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 (check the wcga result below)

Helpers

These are named exports in case you don't need the whole instance.

import { hex2hsl } from 'colorizr';

brightnessDifference(left: string, right: string): number
get the brightness difference between 2 colors

colorDifference(left: string, right: string): number
get the color difference between 2 colors

contrast(left: string, right: string): number
get the color contrast between 2 colors

formatCSS(input: HSL | RGB, options?: FormatOptions): string
get the css string for a color model

formatHex(input: string): string
format a short hex string 3 (or 4) digits into a 6 (or 8) digits.

harmony(input: string, type: Harmony): string[]
get the harmony scheme for a color

hex2hsl(input: string): HSL
convert a hex string into a HSL object

hex2rgb(input: string): RGB
convert a hex string into a RGB object

hsl2hex(input: HSL): string
convert a HSL object into a hex string

hsl2rgb(input: HSL): RGB
convert a HSL object into a RGB object

hue2rgb

isValidHex(input: any): boolean
check if the input is a validHex

luminance(input: string): number
get the color luminance

palette(input: string, options?: PaletteOptions): string[]
get a palette for a color

parseCSS(input: string, output: ColorTypes = 'hex')
parse a css string to hex, hsl or rgb

random(): string
get a random color

rgb2hex(input: RGB | RGBArray): string
convert a RGB object into a hex string

rgb2hsl(input: RGB | RGBArray): HSL
convert a RGB object into a HSL object

rotate(input: string, degrees = 15): string

shift(input: string, options: Partial<HSL | RGB>): string

text-color(input: string): string
get the constrasting color for the input

wcag(left: string, right: string): Analysis
get the WCAG analysis for two colors

{
  brightnessDifference: 189.041,
  colorDifference: 595,
  compliant: 2,
  contrast: 10.67,
  largeAA: true,
  largeAAA: true,
  normalAA: true,
  normalAAA: true,
}

References

calculating-color-contrast
Colour Contrast Check
Contrast Checker