Color token generator: OKLCH scales, semantic tokens, and multi-format export
Pick your brand colours, and the generator produces full 12-shade primitive scales, semantic tokens for light and dark modes, and exports in CSS, Tailwind v3/v4, or JSON.
A dual-algorithm approach to colour theory
The system detects whether a color is chromatic or achromatic and applies the appropriate algorithm:
Why Two Algorithms?
Chromatic colors
Blues, greens, oranges, etc. benefit from vibrant mid-tones and smooth transitions
Achromatic colors
Grays, neutrals need subtle light shades for backgrounds and high-contrast dark shades for text
The OKLCH Foundation
Both algorithms use OKLCH color space, which provides perceptually uniform color manipulation. This means equal numeric changes produce equal visual changes, something RGB and HSL can't guarantee.
What is OKLCH?
L - Lightness (0-1):
Perceived brightness from black (0) to white (1). Unlike HSL, lightness values match human perception.
C - Chroma (0+):
Colorfulness or saturation. Higher values = more vibrant. Can exceed 0.37 for very saturated colors.
H - Hue (0-360°):
Color angle: 0° = red, 120° = green, 240° = blue, etc.
APCA Contrast for Accessibility
The generator uses APCA (Advanced Perceptual Contrast Algorithm) to ensure color scales meet modern accessibility standards. Unlike WCAG 2.x contrast ratios, APCA provides perceptually accurate, context-aware contrast measurements.
Why APCA Over WCAG 2.x?
Perceptually Accurate:
APCA accounts for how humans actually perceive contrast, including spatial frequency, polarity effects, and ambient lighting conditions.
Directional Awareness:
Unlike WCAG ratios, APCA recognizes that light text on dark backgrounds needs different treatment than dark text on light backgrounds.
Context-Aware Scoring:
APCA Lc values directly relate to use cases: Lc 90 for body text, Lc 75 for large text, Lc 60 for UI elements, Lc 45 for disabled states.
Playing with the algorithms
1. Adaptive Lightness Distribution
Lightness uses adaptive scaling based on available headroom above and below the base color. Smooth easing curves at the light end optimize for UI backgrounds, while larger jumps at the dark end ensure text contrast and accessibility.
Adaptive Lightness Distribution
This adaptive approach ensures optimal results regardless of your base color's lightness, whether you start with a light pastel or a dark, rich hue.
2. Progressive Chroma Easing
Chroma follows a progressive easing curve that creates subtle pastel tints at the light end while maintaining full vibrancy through the interactive range (shades 400-900).
Progressive Chroma Easing
Chroma progression ensures light backgrounds remain subtle while interactive elements maintain full vibrancy
This distribution ensures light backgrounds feel clean and subtle while interactive elements (buttons, links, badges) remain vibrant and engaging. The extended peak range through shade 900 maintains color presence even in darker UI elements.
3. Constant Hue Throughout Scale
Unlike some algorithms that apply hue rotation, we maintain constant hue across all shades. This ensures perfect brand color consistency and creates a cohesive, recognizable palette.
Perceptually Uniform
OKLCH ensures equal lightness changes produce equal visual changes. Shade 300 looks equally lighter than 400 as 700 looks darker than 600. It just kinda, looks right.
Vibrant Mid-Tones
The parabolic chroma curve creates punchy, engaging colors for interactive elements like buttons and links without over saturating the tones used for backgrounds and subtle accents.
Excellent Readability
Neutral scales provide high-contrast text options while keeping light shades subtle enough for backgrounds and dividers.
The OKLCH algorithm is open source: View oklch.ts on GitHub