The eleven-shade color scale from Tailwind CSS is one of those ideas I keep stealing. You know the one: 50 through 950 gives you enough stops for backgrounds, borders, hover states, text, everything. I use it even when I’m not using Tailwind.
But I almost never use the defaults (your site/app ends up looking like every other site built by LLMs).
The fix is not complicated. You don’t need a color theory degree or a five-color palette generator (you know the ones 🥹). You only need two or three color scales, and you can derive them all from a single value.
How to choose your brand hue
Rule of thumb: pick a color that fits the problem, not your personal taste (I like pink but not use it all the time).
- Finance, B2B and enterprise sites use blues (hue
200-250). - Trust, stability, conservative. Health and wellness lean green or teal (
120-200). Calm, natural. - Creative and entertainment go purple, pink, orange (
270-360). Energy, fun. - Food and hospitality use reds, oranges, warm yellows (
0-60). Appetite, warmth.
These are guidelines, not rules. A creative agency can use blue. A bank can use orange. But the defaults exist for a reason. They match user expectations.
Still stuck? Steal from a site you like. Find an app or landing page whose color feels right for your domain. Open DevTools, grab the hue from any OKLCH color on the page. That is your starting point. Adjust from there.
If you have an image (hero photo, logo, brand asset), sample a prominent color from it. Drop it into a color picker, get the OKLCH hue. Images that already look good together contain colors that already work together.
You do not need to nail it on the first try. Pick something reasonable, build the palette, see it on a real page. If it feels wrong, shift the hue by 30 and check again. Five minutes of tweaking beats an hour of analysis. 💪
Pick a neutral, name it --gray
First, a naming trick. Whatever neutral you settle on, alias it to --gray-*. This way your templates reference --gray-500 regardless of which tone you picked.
:root {
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
/* … */
}
The point is the name --gray stays the same. Want a warmer tone next month? Change the values, not every template.
If I use Tailwind, I use the same trick (but map them with the --color- prefix so bg-gray-500 works):
@theme {
--color-gray-50: var(--gray-50);
--color-gray-100: var(--gray-100);
}
One hue to rule them
OKLCH makes this easy. Instead of hardcoding eleven hex values for your brand, derive them from a single hue variable.
I covered the technique before in Building user-customizable themes with Tailwind CSS. The idea: OKLCH separates color into lightness, chroma and hue. Keep lightness and chroma constant per shade level, vary only the hue.
:root {
--brand-hue: 250;
--brand-50: oklch(.99 .01 var(--brand-hue));
--brand-100: oklch(.98 .02 var(--brand-hue));
--brand-200: oklch(.94 .04 var(--brand-hue));
--brand-300: oklch(.86 .08 var(--brand-hue));
--brand-400: oklch(.74 .14 var(--brand-hue));
--brand-500: oklch(.6 .18 var(--brand-hue));
--brand-600: oklch(.52 .16 var(--brand-hue));
--brand-700: oklch(.44 .14 var(--brand-hue));
--brand-800: oklch(.36 .12 var(--brand-hue));
--brand-900: oklch(.26 .08 var(--brand-hue));
--brand-950: oklch(.16 .04 var(--brand-hue));
}
Change --brand-hue from 250 to 10 and every shade updates. The palette stays harmonious because lightness and chroma never shift.
One thing to watch: OKLCH math gets you 90% of the way there. Different hues at the same lightness and chroma can feel slightly different to the eye — a purple at .6 .18 reads differently than a yellow at .6 .18. You might need to bump a stop or two for balance. That is normal. Tweak and move on.
Gray from your brand tint
Create a neutral palette the same way. Drop the chroma near zero:
:root {
--gray-50: oklch(.99 .005 var(--brand-hue));
--gray-100: oklch(.97 .005 var(--brand-hue));
--gray-200: oklch(.93 .005 var(--brand-hue));
--gray-300: oklch(.86 .008 var(--brand-hue));
--gray-400: oklch(.76 .01 var(--brand-hue));
--gray-500: oklch(.64 .01 var(--brand-hue));
--gray-600: oklch(.54 .01 var(--brand-hue));
--gray-700: oklch(.44 .01 var(--brand-hue));
--gray-800: oklch(.34 .008 var(--brand-hue));
--gray-900: oklch(.24 .005 var(--brand-hue));
--gray-950: oklch(.14 .005 var(--brand-hue));
}
These read as neutral grays. But they carry a faint undertone of your brand color. The result is cohesive without being matchy-matchy.
Color theory with math
Complementary colors sit opposite each other on the color wheel. In OKLCH that is + 180 degrees.
:root {
--accent-50: oklch(.99 .01 calc(var(--brand-hue) + 180));
--accent-100: oklch(.98 .02 calc(var(--brand-hue) + 180));
--accent-200: oklch(.94 .04 calc(var(--brand-hue) + 180));
--accent-300: oklch(.86 .08 calc(var(--brand-hue) + 180));
--accent-400: oklch(.74 .14 calc(var(--brand-hue) + 180));
--accent-500: oklch(.6 .18 calc(var(--brand-hue) + 180));
--accent-600: oklch(.52 .16 calc(var(--brand-hue) + 180));
--accent-700: oklch(.44 .14 calc(var(--brand-hue) + 180));
--accent-800: oklch(.36 .12 calc(var(--brand-hue) + 180));
--accent-900: oklch(.26 .08 calc(var(--brand-hue) + 180));
--accent-950: oklch(.16 .04 calc(var(--brand-hue) + 180));
}
That is the simplest color scheme: complementary. High contrast.
But you have more options. Here is how color schemes translate to OKLCH math:
-
Analogous are hues next to your brand (
± 30). Low contrast, harmonious. Good for backgrounds and subtle variety. -
Complementary have an opposite hue (
+ 180). High contrast, pops. Good for CTAs and accents. -
Split complementary when the two hues on either side of the complement (
+ 150and- 150). Same contrast as complementary but safer. Less jarring. -
Triadic are three hues evenly spaced (
+ 120and+ 240). Balanced. Gives you a third color for free.
--analogous-light: calc(var(--brand-hue) + 30);
--analogous-dark: calc(var(--brand-hue) - 30);
--split-a: calc(var(--brand-hue) + 150);
--split-b: calc(var(--brand-hue) - 150);
--triad-a: calc(var(--brand-hue) + 120);
--triad-b: calc(var(--brand-hue) + 240);
Pick one scheme and stick with it. The math guarantees the relationship. You just pick the starting hue.
All together now
:root {
--brand-hue: 250;
/* Gray (low chroma, brand undertone) */
--gray-50: oklch(.99 .005 var(--brand-hue));
--gray-100: oklch(.97 .005 var(--brand-hue));
--gray-200: oklch(.93 .005 var(--brand-hue));
--gray-300: oklch(.86 .008 var(--brand-hue));
--gray-400: oklch(.76 .01 var(--brand-hue));
--gray-500: oklch(.64 .01 var(--brand-hue));
--gray-600: oklch(.54 .01 var(--brand-hue));
--gray-700: oklch(.44 .01 var(--brand-hue));
--gray-800: oklch(.34 .008 var(--brand-hue));
--gray-900: oklch(.24 .005 var(--brand-hue));
--gray-950: oklch(.14 .005 var(--brand-hue));
/* Brand */
--brand-50: oklch(.99 .01 var(--brand-hue));
--brand-100: oklch(.98 .02 var(--brand-hue));
--brand-200: oklch(.94 .04 var(--brand-hue));
--brand-300: oklch(.86 .08 var(--brand-hue));
--brand-400: oklch(.74 .14 var(--brand-hue));
--brand-500: oklch(.6 .18 var(--brand-hue));
--brand-600: oklch(.52 .16 var(--brand-hue));
--brand-700: oklch(.44 .14 var(--brand-hue));
--brand-800: oklch(.36 .12 var(--brand-hue));
--brand-900: oklch(.26 .08 var(--brand-hue));
--brand-950: oklch(.16 .04 var(--brand-hue));
/* Accent (complementary) */
--accent-50: oklch(.99 .01 calc(var(--brand-hue) + 180));
--accent-100: oklch(.98 .02 calc(var(--brand-hue) + 180));
--accent-200: oklch(.94 .04 calc(var(--brand-hue) + 180));
--accent-300: oklch(.86 .08 calc(var(--brand-hue) + 180));
--accent-400: oklch(.74 .14 calc(var(--brand-hue) + 180));
--accent-500: oklch(.6 .18 calc(var(--brand-hue) + 180));
--accent-600: oklch(.52 .16 calc(var(--brand-hue) + 180));
--accent-700: oklch(.44 .14 calc(var(--brand-hue) + 180));
--accent-800: oklch(.36 .12 calc(var(--brand-hue) + 180));
--accent-900: oklch(.26 .08 calc(var(--brand-hue) + 180));
--accent-950: oklch(.16 .04 calc(var(--brand-hue) + 180));
}
Use them anywhere:
.btn-primary {
background: var(--brand-500);
&:hover {
background: var(--brand-600);
}
}
.card {
background: var(--gray-50);
border: 1px solid var(--gray-100);
}
.badge-new {
color: var(--accent-700);
background: var(--accent-100);
}
Three palettes. One variable to change them all. No hex codes to manage. Winning! 🏆
Above :root{} content is easily copied from one app or site to your next one. Making sure you can return building quickly.
