colordxnpm ↗GitHub ↗
OKLCH picker

Pick a color

Drag a chart. Each one sets two channels. Or paste any CSS color. Every format below is one click to copy.

Tools

Take it further

The active color follows you to every page.

PaletteA ramp, harmonies, and mixes from one seed. Export to CSS, Tailwind, or JSON.Open ContrastWCAG and APCA. Fix a pair. See it with color blindness. Keep status colors apart.Open ThemeA light and dark theme from three seeds. Every pair checked. shadcn-ready.Open
Library

Use it in code

8 KB gzipped. Zero dependencies. Typed. Tree-shakeable. Plugins add what you need and nothing else.

Install
npm install @colordx/core
Convert and adjust
import { colordx } from '@colordx/core';

const color = colordx('#ff6b35');
color.toHex()           // '#ff6b35'
color.toRgbString()     // 'rgb(255 107 53)'
color.toHslString()     // 'hsl(16.04 100% 60.39%)'
color.toOklchString()   // 'oklch(0.70452 0.19259 39.23079)'
color.lighten(0.1).toHex()   // '#ff9068'
Gamut
import { colordx, inGamutSrgb } from '@colordx/core';

inGamutSrgb('oklch(0.5 0.4 180)')   // false
colordx('oklch(0.5 0.4 180)').toHex()                     // '#00986c'  clipped, like a browser
colordx('oklch(0.5 0.4 180)').mapSrgb().toOklchString()   // 'oklch(0.50907 0.09379 177.84892)'  CSS Color 4
Plugins
import { colordx, extend } from '@colordx/core';
import a11y from '@colordx/core/plugins/a11y';
import p3 from '@colordx/core/plugins/p3';

extend([a11y, p3]);

colordx('#777').contrast('#fff')          // 4.48
colordx('#777').fixContrast('#fff')       // Colordx at 4.5, same hue
colordx('#ff0000').toP3String()           // 'color(display-p3 0.9175 0.2003 0.1386)'
Full API ↗From tinycolor2 ↗
CLI + agent skill

Check contrast in CI

@colordx/cli checks, audits, and fixes contrast in your design tokens. It reads CSS, Tailwind, SCSS, and DTCG JSON. It also ships a Claude Code skill, so your agent runs the math instead of guessing.

Install and try

npm install -D @colordx/cli
npx colordx check '#777' '#fff'         # one pair
npx colordx audit src/globals.css       # every known pair
npx colordx scale '#3b82f6'             # a ramp, 50 to 950
npx colordx theme --primary '#3b82f6'   # shadcn roles

Every command prints JSON, one record per pair. Add --format table for a human view. Exit code is 1 on any fail.

{
  "fgToken": "--muted-foreground",
  "bgToken": "--muted",
  "wcag": { "ratio": 4.47, "min": 4.5, "pass": false },
  "apca": { "lc": 71.1, "min": 75, "pass": false },
  "result": "fail",
  "fix": "#777677",
  "source": { "file": "src/globals.css", "line": 17 }
}

Skill for Claude Code

claude plugin marketplace add dkryaklin/colordx-a11y
claude plugin install colordx-a11y@colordx

The skill has the rules. The CLI has the math. A hook runs audit after every token edit and hands the result back to the model.

Codex, Cursor, or any agent that reads SKILL.md:

npx skills add dkryaklin/colordx-a11y

One step in CI

- run: npx @colordx/cli audit --strict

--strict also fails on warn and unpaired. Files, presets, and skips live in colordx.config.json.

Words

pairone fg on one bg
stackfg, bg, and every bg behind it
usebody, large, or ui
gatewcag, apca, or both
resultpass, fail, warn, unpaired, skip
fixthe nearest color that passes
GitHub ↗npm ↗Full docs ↗
FAQ

Short answers

What is OKLCH?

A color space where equal steps look equal. L is lightness, C is chroma, H is hue. Change one and the others hold. HSL cannot do that.

Why not HSL?

HSL lightness is not perceptual. Yellow at 50% is bright, blue at 50% is dark. OKLCH fixes that, so ramps and themes come out even.

What is gamut?

The set of colors a screen can show. sRGB is the base. P3 is wider. OKLCH can describe colors outside both. The picker shows where the edges are.

Clip or map?

toHex() clips, like a browser. mapSrgb() reduces chroma and keeps hue and lightness, per CSS Color 4. Use it for tokens and palettes.

WCAG or APCA?

WCAG 2.2 is the law in most places. APCA is the better model and a WCAG 3 candidate. Check both. The tools here do.

Which formats?

Core: HEX, RGB, HSL, OKLab, OKLCH. Plugins: HWB, HSV, Lab, LCH, XYZ, CMYK, P3, Rec.2020, A98, ProPhoto, names, contrast, color blindness, mixing.