OneTaskBy Tim King · Updated
Complementary Colour Generator
Find the Opposite Colour and Its Tints
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 Complementary Colour Generator works
This complementary colour generator finds the colour opposite yours on the wheel. Pick a colour and see the one directly opposite it on the wheel. Choose the mathematical RGB complement, the painter's RYB complement that puts blue opposite orange, or a split complementary pair that flanks the opposite. Each colour comes with a tint and shade ramp, the demo shows the base as a field with the complement as a call to action, and the CSS custom properties are ready to paste.
Complementary colour generator: finding the opposite
A complementary pair is the strongest contrast the colour wheel offers: two hues that sit opposite each other and make each other look more saturated when placed side by side. It is the relationship behind orange call-to-action buttons on blue sites, red badges on green dashboards and purple highlights on yellow posters. Used at the right proportion it is energetic; used half and half it vibrates. This generator finds the pair and gives you the supporting tints so the proportion is easy to get right.
Two wheels, two answers. The RGB wheel is the one CSS uses: hue is an angle in hsl(),
and the complement is that angle plus 180 degrees. On this wheel red is opposite cyan and blue
is opposite yellow. The RYB wheel is the one taught in art school, built on red, yellow and
blue primaries; on it red is opposite green, blue opposite orange and yellow opposite purple.
Neither is wrong. The RGB answer is what a browser or a design tool will compute, while the RYB
answer is what most people mean when they say "the opposite colour", and it tends to give
warmer, more traditional pairings. Switch between them and use whichever looks better for the
job.
Split complementary. Instead of the single opposite, this takes the two hues 30 degrees either side of it. The pair still contrasts strongly with the base but is softer and gives you three colours to work with rather than two, which is usually easier to lay out.
The ramps. Every colour gets five steps — two lighter, the colour itself, two darker — as
--base-light, --complement-darkest and so on. The lighter steps become backgrounds and
hovers, the darker steps become text and borders, so a whole component can be built from one
pair without inventing more colours.
Proportion. The classic guidance is 60-30-10: the base and its tints cover most of the surface, a neutral or a tint takes the middle share, and the complement is the small accent that draws the eye. The demo below the swatches shows exactly that — a field of the base with one complement-coloured button — and if the button looks right there it will look right on your page.
FAQ
Why is my complement different from what the design tool says?
Almost certainly because of the wheel. Most software uses the RGB wheel, which puts cyan opposite red; the painter's wheel puts green there. Choose Exact (RGB wheel) to match a tool, or Painter (RYB wheel) to match a colour theory textbook.
Does the complement keep the same saturation and lightness?
Yes. Only the hue rotates, so a pale base gives a pale complement and a vivid one gives a vivid one. That keeps the pair balanced, but if the complement needs to work as text you may want a darker step from its ramp rather than the exact rotation.
Will the complement pass contrast against the base?
Not necessarily — complements contrast in hue, not in lightness, and two mid-tone colours can be hard to read on each other. Put text on the darkest or lightest step of a ramp instead and check the pair with the contrast checker.
What happens with grey or black?
Grey has no hue, so its complement is itself and the ramps are just lighter and darker greys. Use a colour with some saturation to get a meaningful result.
See also: all Colour tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, UI Components, Forms & Inputs.
Related tools
Analogous Colour Generator
Generate neighbouring hues from one colour with tints and CSS.
Contrast Checker
Check colour contrast against WCAG and APCA.
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.
Luminance Scorer
Score many colour pairs for contrast at once.