Why generate Tailwind colors instead of picking by hand
Tailwind’s default 22 colors are hand-tuned so that sky-500 and emerald-500 read with comparable weight. If you add a brand color the naive way - by sweeping HSL lightness from 95 to 10 - your brand-500 will look noticeably brighter or darker than the rest of the scale, and every UI built on it ends up needing manual nudges. Generating the ramp in OKLCH instead solves the problem in one shot: equal lightness steps look equal across every hue.
The 60-second recipe
- Open the Design System tool.
- Paste your brand HEX (e.g.
#7c5cff). - The tool emits an OKLCH ramp matching Tailwind’s 50 / 100 / 200 / ... / 950 steps.
- Switch the export tab to Tailwind and copy the block.
- Paste into
tailwind.config.jsundertheme.extend.colors.
Output shape
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f4f1ff',
100: '#e8e0ff',
200: '#d2c2ff',
300: '#b297ff',
400: '#9676ff',
500: '#7c5cff',
600: '#6549d6',
700: '#503aac',
800: '#3b2c80',
900: '#28205a',
950: '#16113a',
},
},
},
},
};Tailwind v4 (CSS-first) variant
/* app.css */
@import "tailwindcss";
@theme {
--color-brand-50: oklch(0.97 0.02 290);
--color-brand-100: oklch(0.93 0.04 290);
--color-brand-500: oklch(0.65 0.21 290);
--color-brand-900: oklch(0.30 0.13 290);
/* ... full ramp ... */
}FAQ
Can I use this with Tailwind v4?
Yes. The same OKLCH ramp works as @theme variables in Tailwind v4 or as theme.extend.colors in v3.
Why not generate the ramp with HSL?
HSL lightness is not perceptually uniform - HSL yellow at L=50% looks much brighter than HSL blue at L=50%. OKLCH gives equal-feeling steps across hues.
Will my custom colors clash with Tailwinds defaults?
No, our ramps are tuned to match the perceived lightness of Tailwinds default scale at each step (50, 100, 200, ... 950).
Does this require a Tailwind plugin?
No. The output is plain JavaScript / CSS that drops into your existing config.