OneTaskBy Tim King · Updated
Analogous Colour Generator
Neighbouring Hues From One Base Colour, With Tints, Shades and CSS Variables
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Analogous Colour Generator works
This analogous colour generator builds a palette from the hues beside yours. Choose a colour and get its neighbours on the wheel. Set how many hues you want and how far apart they sit, keep the base in the middle or push the whole run warmer or cooler, and see each hue with a lighter and darker step. The gradient strip shows how the run flows, and the CSS custom properties are ready to copy.
Analogous colour generator: how neighbouring hues are picked
Analogous colours sit next to each other on the wheel: red, orange and yellow; blue, teal and green. Because they share an underlying hue they never clash, which makes them the safest scheme to reach for when you need several colours that feel like one family — a set of chart series, a run of section backgrounds, a gradient that does not turn muddy in the middle. The trade-off is that they offer little contrast, so an analogous scheme usually needs a neutral or a single opposite accent for anything that must stand out.
Spacing. The slider sets the angle between neighbours. Around 30 degrees is the classic choice and gives clearly different hues that still read as related; 10 to 15 degrees produces subtle shifts that work well for gradients and layered backgrounds; 45 degrees pushes the outer hues far enough apart that the scheme starts to feel like two families, which can be useful for a five- or seven-colour chart palette.
Direction. Centred on base puts the base in the middle and spreads the neighbours evenly either side. Warmer only and Cooler only start from the base and walk in one direction around the wheel — towards red and yellow, or towards blue and green — so the base stays the anchor of the set and everything else shifts one way. That is the right choice when the base is a brand colour that must appear unchanged.
Tints and shades. Every hue comes with a light step for backgrounds and a dark step for
text and borders, named --hue-1-light and --hue-1-dark so a component built on one hue can
be re-skinned by swapping the number. The steps keep the base saturation so the family stays
consistent across the run.
The gradient. The strip below the swatches is a plain linear-gradient() through the
hues in order, and the generated CSS includes it. Because neighbouring hues are close, the
gradient stays clean in sRGB; add in oklch before the direction if you want an even smoother
sweep in browsers that support it.
FAQ
How many hues should I use?
Three is enough for most interfaces: base, a warmer neighbour and a cooler one. Five and seven are for charts, illustrations and gradients where you need more distinct steps. Beyond five, reduce the spacing so the outer hues do not drift into a different family.
Why does the demo strip look uneven?
Hue spacing is even on the HSL wheel, but human vision is not: the same angle looks like a bigger jump around yellow and cyan than it does around blue. If the run looks lumpy, try a smaller angle, or generate the hues here and mix between them in Oklab with the colour mixer.
Can I make a monochrome scheme?
Set the spacing to 10 degrees and the count to three. For a true single-hue scheme with only lightness changes, use the tint and shade scale tool instead.
Will these colours have enough contrast for text?
Not between each other — that is the point of an analogous scheme. Use the dark step of a hue for text on the light step of the same or a neighbouring hue, and verify the pair with the contrast checker.
See also: all Colour tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, UI Components, Forms & Inputs.
Related tools
Complementary Colour Generator
Find a colour's complement with tints, shades and copyable CSS.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
Colour Palette Generator
Generate a full UI palette with light and dark modes from one colour.
Colour Picker
Pick a colour and copy it in every CSS format at once.
Contrast Checker
Check colour contrast against WCAG and APCA.