Start with any CSS color
Keep the exact color or fit it to the calibrated Tailwind curve. Choose its 50–950 anchor yourself, or let the generator infer the closest position.
Tailwind shade generator
Lupinum Colors
Tokens use --color-brand-*
Shade 800Your color, exact
White text 7.11 AAA, black text 2.95 fails
%
°
Curves
Lightness44.8%100%50%0%
Chroma0.1290.300.150.00
Hue144.5°159°144°129°
Drag a point. Or focus it: ↑↓ change the value, Shift for bigger steps, ←→ move between shades.
Contrast
The pairs the preview uses. WCAG 2 ratios, a first check rather than a guarantee.| Aa | Text on page tint | 900 on 50 | 8.60 | Passes AAA |
| Aa | Badge | 800 on 100 | 6.57 | Passes AA |
| Aa | Link in a card | 600 on white | 3.12 | Large text only |
| Aa | Button label | white on 600 | 3.12 | Large text only |
| Aa | Focus ring | 500 on white | 2.07 | Fails 3:1 |
| Aa | Text on page tint | 100 on 950 | 13.73 | Passes AAA |
| Aa | Badge | 200 on 800 | 6.07 | Passes AA |
| Aa | Link in a card | 400 on 900 | 5.51 | Passes AA |
| Aa | Button label | white on 500 | 2.07 | Fails |
| Aa | Focus ring | 500 on 900 | 4.31 | Passes 3:1 |
Color scales you can explain
Lupinum Colors turns one HEX, RGB, HSL, or OKLCH value into a complete Tailwind-style palette. The generated scale is a starting point, not a black box: every shade remains visible, editable, testable, and reversible.
Shape the complete scale
Edit lightness, chroma, and hue directly. Compare nearby Tailwind families, refine the light and dark ends, and undo any committed change.
Test before handoff
Preview the palette in real interface roles, inspect every foreground and background contrast pair, and review gamut warnings before exporting tokens.
Copy production-ready output
Export a Tailwind CSS v4 @theme block, standard CSS custom properties, or JSON without creating an account or uploading your brand colors.
Calibrated, not improvised
The generator is calibrated against all 26 color families in Tailwind CSS 4.3.3. It uses OKLCH as the editable source of truth, then maps colors into your chosen display gamut. That keeps the method inspectable and the exports internally consistent.
Tailwind color generator questions
Yes. The Tailwind export produces an @theme block with color variables for shades 50 through 950. CSS and JSON exports are available for other workflows.
OKLCH separates perceived lightness, color intensity, and hue. That makes the progression between shades easier to inspect and tune than a list of unrelated HEX values.
No. Palette generation, editing, contrast checks, and exports run in your browser. There is no account and your palette values are not sent to Lupinum. Share links store the palette after the # in the URL, which browsers do not send to the server.
No. Lupinum Colors is an independent tool by Lupinum and is not affiliated with or endorsed by Tailwind Labs.