Accepts hex, rgb(), and hsl() formats
| Shade | Swatch | White text on shade | Black text on shade | Shade text on white | Shade text on black |
|---|---|---|---|---|---|
| 50 | ✗ Fail1.2 | ✓ AAA17.6 | ✗ Fail1.2 | ✓ AAA17.6 | |
| 100 | ✗ Fail1.4 | ✓ AAA14.7 | ✗ Fail1.4 | ✓ AAA14.7 | |
| 200 | ✗ Fail1.8 | ✓ AAA11.5 | ✗ Fail1.8 | ✓ AAA11.5 | |
| 300 | ✗ Fail2.4 | ✓ AAA8.6 | ✗ Fail2.4 | ✓ AAA8.6 | |
| 400 | ✗ Fail3.4 | ✓ AA6.2 | ✗ Fail3.4 | ✓ AA6.2 | |
| 500 | ✓ AA5.0 | ✗ Fail4.2 | ✓ AA5.0 | ✗ Fail4.2 | |
| 600 | ✓ AAA7.5 | ✗ Fail2.8 | ✓ AAA7.5 | ✗ Fail2.8 | |
| 700 | ✓ AAA10.1 | ✗ Fail2.1 | ✓ AAA10.1 | ✗ Fail2.1 | |
| 800 | ✓ AAA12.5 | ✗ Fail1.7 | ✓ AAA12.5 | ✗ Fail1.7 | |
| 900 | ✓ AAA14.7 | ✗ Fail1.4 | ✓ AAA14.7 | ✗ Fail1.4 | |
| 950 | ✓ AAA18.9 | ✗ Fail1.1 | ✓ AAA18.9 | ✗ Fail1.1 |
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#F8E5FF',
100: '#EECCFF',
200: '#DEACFF',
300: '#C28EFF',
400: '#A46CFF',
500: '#8445F7',
600: '#6C1ED7',
700: '#5500B8',
800: '#40009A',
900: '#30007F',
950: '#160042',
},
},
},
},
}Building a cohesive color system from scratch is harder than picking a single brand color. A proper design system needs 10 shades per hue (50 through 950), semantic roles (primary, secondary, success, warning, danger), and accessibility validation for every text/background pairing. WCAG 2.1 criteria AA and AAA define the contrast ratios that determine whether a design is legally compliant in many jurisdictions. Generating all of this from one input color — in a perceptually uniform color space — collapses hours of manual work into seconds.
When you enter a brand color, the tool converts it from the input color space (hex, RGB, or HSL) into the OKLCH (Oklab lightness-chroma-hue) color space. OKLCH is a perceptually uniform space, meaning that a change of 0.1 in the L (lightness) channel produces the same perceived brightness shift regardless of hue. The 10 shades (50–950) are computed by distributing lightness values along a carefully tuned curve — lighter shades cluster near L=0.95 and darker shades near L=0.2 — while keeping chroma and hue as close to the original as possible.
The WCAG contrast ratio for each shade pair is calculated using the relative luminance formula from WCAG 2.1 Section 1.4.3. Relative luminance converts sRGB values through a linearization function and applies a weighted sum (0.2126R + 0.7152G + 0.0722B). The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance.
Export targets include Tailwind CSS config (colors object in tailwind.config.js), CSS custom properties (--color-primary-500 etc.), and W3C Design Token Community Group JSON format for interoperability with Figma Tokens, Style Dictionary, and other design toolchains.
A startup founder enters their logo hex code and exports a complete Tailwind palette to share with their contractor, skipping the need for a dedicated designer.
A product designer checks whether a proposed primary/background color pair passes WCAG AA before handing off a component to engineering.
A developer building a white-label SaaS product generates a palette per tenant brand color and stores the output as CSS variables scoped to a tenant class.
A design system engineer exports JSON design tokens from the tool and feeds them into Style Dictionary to generate platform-specific outputs for web, iOS, and Android.
Enter your brand color as hex, RGB, or use the color picker
View the auto-generated 10-shade palette (50 through 950)
Check the WCAG accessibility matrix for every text/background combo
Export as Tailwind config, CSS variables, or JSON design tokens
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29