Accepts hex, rgb(), hsl(), oklch(), oklab()…
Adjust lightness, chroma, and hue independently in OKLCH space — producing perceptually uniform steps that HSL cannot. Mix colors in sRGB or OKLab, apply grayscale, invert, and more. All methods are immutable and chainable.
Generate color palettes using hue rotation in OKLCH space. Seven schemes: complementary, analogous, triadic, tetradic, split-complementary, rectangle, and double-split-complementary. Click any swatch to set it as the active color.
Check contrast between any two colors against WCAG 2.x (AA and AAA) and APCA — the perceptually accurate contrast model proposed for WCAG 3.0. The active color is automatically used as the background.
npm install @colordx/coreimport { colordx } from '@colordx/core';
const color = colordx('#ff6b35');
color.toHex() // '#ff6b35'
color.toRgbString() // 'rgb(255, 107, 53)'
color.toHslString() // 'hsl(19.2, 100%, 60%)'
color.toOklch() // { l: 0.68, c: 0.19, h: 38.18 }
color.toOklchString() // 'oklch(0.6827 0.1946 38.18)'
color.toOklab() // { l: 0.68, a: 0.149, b: 0.118 }import { inGamutSrgb, toGamutSrgb } from '@colordx/core';
inGamutSrgb('oklch(0.5 0.4 180)') // false — out of sRGB
inGamutSrgb('oklch(0.5 0.1 180)') // true — in sRGB
// Map out-of-gamut color to nearest sRGB boundary
const mapped = toGamutSrgb('oklch(0.5 0.4 180)');
mapped.toHex() // '#00866e'APCA (Accessible Perceptual Contrast Algorithm) is the contrast model proposed for WCAG 3.0. Unlike the WCAG 2.x ratio, it accounts for polarity (dark-on-light vs light-on-dark), spatial frequency, and human contrast sensitivity — producing results that align much more closely with how people actually perceive text readability.
WCAG 2.x uses a simple luminance ratio that treats dark-on-light and light-on-dark pairs symmetrically, which does not reflect human vision. It is known to fail on mid-tone and dark backgrounds — sometimes rating a barely visible combination as passing, or a clearly readable one as failing. APCA fixes this with a polarity-aware model.
Load the a11y plugin and call apcaContrast(background) to get the signed Lc
value, or isReadableApca(background) to check against APCA thresholds — Lc 75 for body
text, Lc 60 for large text. The existing contrast() and isReadable()
methods continue to use WCAG 2.x.
A positive Lc value means dark text on a light background; negative means light text on a dark background. The absolute value is what determines readability — Lc −75 and Lc 75 are equally readable. The sign only indicates polarity, which APCA uses internally to apply different contrast curves for each direction.
OKLCH is a perceptually uniform color space derived from OKLab. It represents colors using Lightness (L), Chroma (C), and Hue (H). Unlike sRGB or HSL, equal steps in OKLCH correspond to equal perceived differences — making it far more predictable when building color palettes and design systems.
Modern browsers support OKLCH natively via CSS Color Level 4. OKLCH lets you adjust lightness and chroma independently without the perceptual distortions that come with HSL. It's especially powerful for design tokens, accessible color systems, and dynamic theming.
OKLab uses Cartesian coordinates (L, a, b) where a is the green–red axis and b is the blue–yellow axis. OKLCH is OKLab converted to polar coordinates — the same color described by Lightness, Chroma (distance from neutral), and Hue (angle). OKLCH is more intuitive; OKLab is better for programmatic color math.
Yes. colordx exports inGamutSrgb() to check whether a color is within the sRGB gamut, and
toGamutSrgb() to map an out-of-gamut color to the nearest sRGB boundary via chroma-reduction
binary search — the approach recommended by the CSS Color 4 specification.
Core: HEX, RGB, HSL, HWB, OKLab, OKLCH. Optional plugins add CIE Lab, CIE LCH, XYZ, CMYK, color delta (ΔE), and named CSS colors. The plugin system keeps the core bundle small — import only what you need.
colordx is API-compatible with colord and designed as a drop-in upgrade. It adds first-class OKLCH/OKLab support, gamut utilities, and a fully-typed plugin system. Most colord usage can be migrated by replacing the import.
OKLab uses Cartesian coordinates — L (lightness), a (green–red axis), and b (blue–yellow axis) — in a
perceptually uniform space. Equal numeric distances correspond to equal perceived color differences, making
it ideal for color interpolation, palette generation, and any operation where consistency matters more than
intuition. Use toOklab() or toOklabString() to convert.
Hexadecimal (#rrggbb) is the most compact CSS color notation and the default format for
design tools, HTML attributes, and image editors. colordx parses both 3-digit (#f00) and
6-digit forms and always outputs lowercase 6-digit hex. Use toHex() to convert from any
input format.
rgb() expresses colors as red, green, and blue channel values from 0 to 255 — the native
encoding of the sRGB color space used by screens. It is the most direct format for canvas operations,
WebGL, and any API that consumes integer channels. colordx outputs rounded integer channels via
toRgb() and toRgbString().
hsl() describes colors by Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). It maps
more intuitively to how designers think about color than RGB does, making it popular in CSS theming and
design tokens. Note that HSL lightness is not perceptually uniform — OKLCH is a better choice when
consistent brightness steps matter.
HSV (Hue, Saturation, Value) is the color model used internally by most design tools — Photoshop,
Figma, and Sketch all show HSV pickers. Value represents the brightness of the fully saturated hue,
which maps well to the concept of "how much color" is present. colordx exposes it via the
hsv plugin with toHsv() and toHsvString().
HWB (Hue, Whiteness, Blackness) is a CSS Color Level 4 format designed to be the most human-readable
color model. You start with a pure hue and mix in white or black to lighten or darken it. All modern
browsers support hwb() natively. colordx adds toHwb() and
toHwbString() via the hwb plugin.
Display P3 is a wide-gamut color space used by Apple displays, modern smartphones, and high-end monitors.
Its gamut is roughly 25% larger than sRGB, allowing more vivid reds, greens, and cyans that sRGB cannot
reproduce. CSS supports it via color(display-p3 r g b). colordx converts to P3 with
toP3() and toP3String() via the p3 plugin.
toNumber() returns the color as a 24-bit integer (0xff0000 for red) — the
format used by PixiJS, Discord embeds, Three.js, and other libraries that encode color as a single
number. It is equivalent to parsing the hex string as a base-16 integer and works for any fully opaque
sRGB color.