ColorGraffle: Turn Any Color into a Tailwind CSS Shade Palette

Shade Palettes

Notes

• Color inputs accept any CSS color format — hex (#013663), rgb(), hsl(), oklch(), or a named color like rebeccapurple — everything is converted to OKLCH before the shade ramp is generated
• Not sure what to add next? The suggestion card proposes a harmonious companion — analogous first, then complementary, split-complementary, and triadic — based on your most recent color; cycle through candidates or dismiss it
• Each input color becomes a 12-step scale: shades 50 (lightest) through 950 (darkest), plus a DEFAULT shade set to your exact input color
• Shades keep your color's chroma and hue and step only its lightness — because OKLCH is perceptually uniform, the resulting scale looks even and consistent, the way Tailwind's own palettes do
• OKLCH is a great color space for web design: it is perceptually uniform and has a very wide gamut
• Tailwind CSS v4 uses CSS-first configuration: custom colors are defined as CSS variables inside an @theme block in your stylesheet, not in a tailwind.config.js file
• Paste the generated @theme block into the CSS file where you @import "tailwindcss", and utilities like bg-yourcolor-500 become available
• All modern browsers now support OKLCH colors natively, so no fallbacks are needed — Tailwind v4's own default palette is defined in OKLCH
• To replace Tailwind's default palette entirely, add --color-*: initial; at the top of your @theme block before your custom colors

More Reading

Credits