Light end · 50
#f1fef1#f1fef1
Tailwind shade generator
Generate, refine, test, and export a production-ready 50–950 color scale from any CSS color.
Palette setup
Start with one color, then choose how it fits into the scale.
50#f1fef1
100#defedf
200#bdfdc1
300#87f890
400#44e852
500#1bd028
600#10a91b
700#14811e
800#16661f
900#185520
950#072e0d
Drag a point to change a shade. Use the arrow keys for precise adjustments.
Interface preview
See how brand looks in a realistic interface.
Example
Preview theme
Project overview
Thursday, 13 August
Revenue
€48.2k
+12.4%
Customers
1,429
+8.1%
Conversion
4.8%
+0.6%
Performance
Last seven months
All channels
Active projects
Updated just now
Canopy
8 open tasks
Riverbank
11 open tasks
Common Ground
14 open tasks
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.
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.
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.