Browse keycolor presetsKey colors in, production-ready tokens out.
AI-Optimized Formula System
Traditional systems store #0054DC and #FFFFFF as static values · rebrand or ship dark mode and the relationships quietly break. OpenColor stores AI-optimized recipes instead: a small sequence of OKLCH transforms on a source role, tuned by LLM-driven analysis. Swap one key color and all 130 tokens recompute · hover stays 8% lighter, pressed 10% darker, focus rings keep their contrast. Relationships live in math, not values.
OKLCH Perceptual Color Space
In HSL, a 50%-lightness blue looks far darker than a 50%-lightness yellow · human eyes weight hues unevenly. OpenColor is built on OKLCH: L maps to perceptual brightness, C decouples saturation from lightness, H moves uniformly around the wheel. Every op · darken, contrast, harmony-search · runs in OKLCH. Only export converts to HEX, oklch(), or RGB. Palettes look balanced to the eye, not just on paper.
Infinite Preset Library
Tens of thousands of named colors come pre-computed with OKLCH coordinates and ready-to-use presets. Pick a slot (Primary, Secondary, Tertiary, Neutral) and a harmony (Analogous, Triadic, Split, Complementary) and the system surfaces fresh combinations at matching hue offsets. Each slot × harmony unlocks a new preset set · the explorable space is effectively infinite.
130 Tokens Across 10 Groups
A complete component-ready token system, organized by a strict color.{component}.{variant}.{property}.{state} convention. 130 tokens across 10 groups: Surface (13), Border (5), Text (8), On-Color (10), Action (38), Input (10), Feedback (16), Brand (7), Nav (7), Data Viz (16). Every token ships with both light and dark recipes from the same source. Flip modes without redesigning anything.
Auto Calibration & Quality Lint
Three-stage quality pipeline, entirely at the recipe layer. Calibrate corrects hue drift (success green turning yellow), enforces contrast, re-orders L between states. Enhance runs AAA upgrades and gamut-clips to sRGB/P3 without hue shift. Lint flags duplicates (hover == default) and auto-nudges L by ±2–4. Every fix modifies the recipe, not the value · so when you swap key colors, corrections follow the formula.
Export to Any Stack
Formats: Md (AI-ready token reference with component mapping and prompts), CSS Variables, Tailwind (v3 config + v4 CSS-first), Style Dictionary (web + iOS + Android), and DTCG JSON (W3C standard, Figma / Tokens Studio compatible). Color spaces: HEX, oklch(), or RGB. Modes: light, dark, or combined via prefers-color-scheme or [data-theme]. Because the source is formulas, every export is reproducible · re-export in any format and the output is mathematically identical.
Free to explore, sign up to unlock
All features are free for members. Just create an account.
Start exploring without an account.
- Key color → 130 tokens preview
- Preset library
- Extract colors from image
- Light + Dark mode preview
- WCAG contrast check
- Component integrity test
Full access to every feature. Free forever.
- Everything in Guest
- Save & share token sets
- Edit token color recipes
- Export CSS · JSON · Tailwind · DTCG
- Style Dictionary · iOS · Android
- Shareable export link