Colorizr

A modern color library focused on perceptual correctness and accessibility.

• 🏖 Easy to use: Works with Hex, HSL, RGB, OKLAB, and OKLCH.
• ♿️ Accessibility: WCAG 2.x contrast and APCA (WCAG 3.0) support.
• 🎨 Design Systems: Generate perceptual color scales with variants.
• 🖥 Modern Displays: P3 gamut optimization and OkLCH operations.
• 🟦 TypeScript: Full type safety, zero dependencies.

📖 Official Website

Setup

npm i colorizr

Generating Scales & Palettes

Build design system color scales with customizable variants:

import { scale, palette, scheme } from 'colorizr';

scale('#3366ff');
// { 50: '#f0f5ff', 100: '#e4edff', ..., 900: '#06009a', 950: '#020052' }

palette('#ff0044');
// ['#ff0044', '#ffbb00', '#44ff00', '#00ffbb', '#0044ff', '#bb00ff']

scheme('#ff0044', 'triadic');
// ['#ff0044', '#44ff00', '#0044ff']

Accessibility & Contrast

Analyze contrast ratios and find readable text colors:

import { contrast, readableColor, compare, apcaContrast } from 'colorizr';

contrast('#1a1a2e', '#ffffff'); // 17.05
readableColor('#ff0044'); // '#ffffff'
apcaContrast('#000000', '#ffffff'); // 106.04067

compare('#ff0044', '#ffffff');
// { contrast: 3.94, normalAA: false, largeAA: true, ... }

Manipulating Colors

Adjust lightness, saturation, hue, and opacity:

import { lighten, darken, saturate, mix, rotate } from 'colorizr';

lighten('#ff0044', 20); // '#ff668f'
darken('#ff0044', 10);  // '#cc0036'
rotate('#ff0044', 180); // '#00ffbb'

mix('#ff0044', '#0066ff');                         // '#bc34d7'
mix('#ff0044', '#0066ff', 0.5, { space: 'hsl' });  // '#aa00ff'

Converting Colors

Convert between all supported color spaces:

import { convertCSS, hex2oklch, parseCSS } from 'colorizr';

convertCSS('#ff0044', 'oklch'); // 'oklch(63.269% 0.25404 19.902)'
convertCSS('#ff0044', 'hsl');   // 'hsl(344 100% 50%)'

hex2oklch('#ff0044');
// { l: 0.63269, c: 0.25404, h: 19.90224 }

parseCSS('hsl(344 100% 50%)');
// { h: 344, s: 100, l: 50 }

Class API

Create an instance to work with a single color:

import Colorizr from 'colorizr';

const color = new Colorizr('#ff0044');
color.luminance;      // 0.2168
color.chroma;         // 1
color.readableColor;  // '#ffffff'
color.lighten(20);    // '#ff668f'
color.mix('#0066ff'); // '#bc34d7'

📖 Read the full documentation

Credits / References

color.js
chroma-js
calculating-color-contrast
Colour Contrast Check
Converting Color Spaces in typescript
A perceptual color space for image processing
SAPC-APCA

License

MIT