Chromatics — color as code

A scriptable color language and interactive studio. Derive a whole palette from one brand color, inspect any color across ~100 color models, check accessibility (WCAG + APCA), and preview it on real UI — all in the browser. OKLCH-native.

Chromatics
Mixer Models
Editor
8 colors
brand ≈ mediumslateblue P3
primary ≈ mediumslateblue P3
derives from brand
accent ≈ green P3
derives from primary
muted ≈ mediumpurple P3
derives from primary
bg ≈ black P3
derives from brand
surface ≈ black P3
derives from bg
fg ≈ ghostwhite P3
derives from brand
primary_fg ≈ black P3
derives from primaryfgbg
Previews
palette preview.palette
#6c5ce7#468b00#6e6bbc
ramp preview.ramp
50
100
200
300
400
500
600
700
800
900
950
oklch · ΔE 2.9–10.2 · 8 out of sRGB
legibility preview.pair
WCAG 3.96 Fail
APCA 30Lc Spot

APCA's verdict depends on size & weight — that's why the specimen spans several.

Heading
Color is a power which directly influences the soul

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small caption — 12px regular weight, the readability floor.
THIN LABEL · 11PX · 300
darkmode preview.ui
Acme Dashboard New

A compact themed component swatch with real controls.