Colour palette generator
Tints, shades and harmonies from one colour, exported as CSS variables.
FreeRuns in your browserNo signupUpdated 2026-10-29
Steps are spaced in OKLCH so lightness changes evenly to the eye. Harmonies rotate the hue wheel.
Tints and shades
Harmonies
Complementary
Analogous
Triadic
Split complementary
:root {
--brand-50: #f0f5ff;
--brand-100: #dde8fe;
--brand-200: #bfd5ff;
--brand-300: #99bafd;
--brand-400: #6c9bfe;
--brand-500: #3973ff;
--brand-600: #1b53e6;
--brand-700: #0437ca;
--brand-800: #0128a1;
--brand-900: #001a82;
--brand-950: #000e59;
--brand-complement: #ffc32f;
}About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This color palette generator turns one colour into a full working set. Enter a brand hex and it builds an eleven-step scale from 50 to 950, with lightness spaced evenly in OKLCH so each step looks the same distance from its neighbours. It also shows four harmonies, complementary, analogous, triadic and split-complementary, and writes everything out as CSS custom properties you can paste into a stylesheet or a Tailwind theme.
How to use it
- Enter your base colour as hex, or use the picker. It becomes the 500 step.
- Give the scale a variable name, such as
brandorprimary. - Read the tints and shades on the right. Press Copy beside any swatch to grab its hex.
- Look at the harmonies for an accent colour that works with the base.
- Copy the CSS block into your
:rootor@themerule.
How to read the result
Start with #2f6bff. The generator produces a 50 step of #f0f5ff for page backgrounds and subtle hover states, a 100 and 200 for borders and badges, and a 500 of #3973ff. That is close to the input rather than identical, because each step sits on a fixed lightness curve and this blue is a little darker than the 500 slot. The 600 step, #1b53e6, carries white text at 6.13:1, while the 500 step manages only 4.14:1. That gap is why buttons usually use 600 rather than the exact brand colour.
Chroma drops towards the ends of the scale on purpose. A 50 step with full saturation looks like a tinted sheet of plastic; pulling the chroma down keeps it reading as "very light blue" instead.
The complementary colour for that blue is a warm yellow, #ffc32f. Used sparingly, for one button or a highlight, it draws the eye because it sits opposite on the hue wheel. The analogous pair, #2fd3ff and #5b2fff, are safe for secondary elements because they sit right next to the base on the wheel.
Check any text and background pair you take from the scale with the contrast checker. For a full design system, see our website design and development service.
Questions
Frequently asked.
Why are the steps numbered 50 to 950?
It is the convention Tailwind popularised and most design systems now use. 50 is almost white, 500 is the base colour, 950 is almost black. The numbers leave gaps so you can add a 150 or 750 later without renaming anything.
Why does my 500 step not match the colour I entered exactly?
The scale is built in OKLCH with a fixed lightness for each step, and your colour is pulled onto that curve. If your brand colour is unusually dark or light it may land closer to 600 or 400. Use whichever step matches best and keep the original hex for logo work.
Which harmony should I pick for an accent colour?
Complementary gives the strongest contrast and works for one call-to-action colour. Analogous colours sit next to each other and feel calm, so they suit backgrounds and secondary states. Triadic and split-complementary give you two extra accents at once, useful for charts and tags.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide