#0E5C3A.Click any swatch to copy its HEX code.
Tints & shades (50–900)
Export
🔒 Runs entirely in your browser.
From one colour to a working palette
A brand rarely gets by on a single colour. You need a pale version for backgrounds, a dark one for text, something for hover states, and an accent that stands out for buttons and links. This tool builds all of that from the one colour you already have.
Harmonies come from the colour wheel. A complementary accent sits directly opposite your colour and gives the strongest contrast — good for a call-to-action button. Analogous colours are next-door neighbours and feel calm and cohesive. Triadic and tetradic schemes space three or four hues evenly for a livelier look, and split-complementary softens the opposite colour into two near-opposites. Monochromatic keeps to one hue and leans on the tints and shades alone.
Each colour then gets a 50–900 scale, the numbering used by Tailwind and most design systems: 50 is the palest tint, 900 the deepest shade. Your own colour is kept exactly as you entered it and sits on the step that best matches its lightness — a dark brand green lands at 800 or 900, a mid blue around 500 — and it’s marked base. The tinted neutral scale is a set of greys carrying a hint of your hue, which looks more considered than flat grey for borders, backgrounds and body text.
A palette that looks good still has to be readable. Before you settle on a text and background pairing, run the two colours through the WCAG contrast checker, and use the colour converter if you need a value in RGB or HSL.