Color Wheel & Scheme Generator

How to use 3 steps
  1. Pick a Base colour, or type its Hex value.
  2. Choose a Harmony and press Build Scheme.
  3. Press Copy to take the colours.
Colour scheme

Harmonies are calculated by rotating the hue in HSL while keeping saturation and lightness, which is how a colour wheel works. The contrast figure next to each swatch is its WCAG ratio against white and against black, so you can see at a glance which text colour a swatch can carry.

How this tool works

Your colour is converted to hue, saturation and lightness, and each scheme is a set of rotations around the hue circle applied while holding the other two constant. Complementary is a single half-turn, triadic is two rotations of a third each, analogous takes near neighbours, and split-complementary takes the two hues either side of the complement rather than the complement itself. Monochromatic is the exception: hue does not move at all and lightness steps instead.

Every colour produced is shown as hex, rgb and hsl together, with its contrast ratio against white and against black. Those two figures are the practical output — they tell you immediately which of the generated colours can carry text and in which direction. A colour whose ratio against both is low is one that cannot carry text at all and belongs as a fill rather than a background for words.

What harmony rules do and do not settle

  • Equal rotations do not give equal visual weight: hue is a geometric circle, not a perceptual one. A triad built on a yellow gives one colour far brighter than the other two even though the arithmetic is symmetrical.
  • Saturation and lightness are held constant deliberately: that is what makes the relationship between the colours visible. A finished palette normally varies both, and that adjustment is yours to make afterwards.
  • The contrast columns are against white and black only: they are a quick guide to which direction text should go. Any specific pairing you intend still needs checking on its own.
  • Analogous schemes need a dominant colour: five neighbouring hues used in equal amounts read as indecisive. Pick one to lead and let the others support it.

Harmony rules are rotations, nothing more

Every scheme here is the same operation: convert the colour to hue, saturation and lightness, then rotate the hue by a fixed amount while holding the other two constant.

  • Complementary — one half-turn. Maximum separation, and the reason it can look crude if used in equal amounts.
  • Triadic — two rotations of a third each. Balanced and vivid; needs one colour to dominate or it reads as a children's toy.
  • Analogous — near neighbours. Calm and cohesive, with little contrast to work with.
  • Split-complementary — the two hues either side of the complement rather than the complement itself. Keeps most of the contrast and is considerably easier to balance.
  • Monochromatic — the exception. Hue does not move at all; lightness steps instead.

The [msm_tool slug="color-wheel"] shows each colour as hex, rgb and hsl, with its contrast against white and against black.

Equal rotations are not equal weight

This is the thing worth carrying away, and it is why palettes built purely from the wheel often need adjusting by eye.

Hue is a geometric circle, not a perceptual one. A triad built on a yellow produces one colour far brighter than the other two, even though the arithmetic is perfectly symmetrical. Yellows and cyans are inherently lighter than blues and reds at the same saturation and lightness values.

So the wheel tells you which hues relate. It does not tell you they will sit in balance, and adjusting the lightness of the outliers afterwards is a normal part of the job rather than a sign you did it wrong.

Saturation and lightness are held constant deliberately

That is what makes the relationship between the colours visible. A finished palette almost never keeps them constant — the accent is usually more saturated than the base, the background far less so.

Treat the output as the skeleton. Vary the other two dimensions afterwards to give the palette a hierarchy.

The contrast columns are the useful part

Each colour's ratio against white and against black tells you two things at once: whether it can carry text, and in which direction.

A colour scoring well against white and poorly against black wants white text on it. One scoring poorly against both cannot carry text at all — it is a fill colour, a border, an accent on something else, and putting a label on it will fail regardless of which text colour you choose.

That is a faster way to sort a palette into roles than trying combinations by eye.

Proportion matters more than selection

A common rule of thumb is 60/30/10: sixty percent a dominant neutral or base, thirty a secondary, ten an accent. The specific numbers matter less than the principle, which is that colours from the same scheme used in equal amounts fight each other.

Analogous schemes suffer worst from this. Five neighbouring hues in equal measure read as indecisive rather than harmonious. Pick one to lead and let the rest support it.

What the wheel does not answer

  1. Whether any pair is readable. Two harmonious colours can be far too close in lightness to work as text and background. Check the pairs you actually intend to use.
  2. Whether the colours survive colour blindness. Red and green sit opposite on the wheel and are the classic pair that merges for a significant proportion of people. Harmony and distinguishability are different questions.
  3. What the colours mean. Red for danger and green for success are learned conventions that no rotation will respect. Semantic colours are chosen by convention, not derived from a brand.
  4. How they behave in dark mode. A palette tuned against white frequently needs its lightness values reworked rather than simply inverted.

A practical order

Start with the colour you are given — usually a brand colour. Use split-complementary if you need a clear accent, analogous if you want calm. Read the contrast columns and assign roles: which colours can carry text, which are fills, which is the accent.

Then vary lightness and saturation to build the actual scale, and check every text-and-background pair you intend to ship. The wheel gets you to a starting set in a minute; the rest is judgement it cannot make for you.

Frequently Asked Questions

Specific to the Color Wheel & Scheme Generator. Broader questions about this category are answered on the category page.

Complementary or split-complementary for a palette that needs a clear accent. Analogous for something calm. Monochromatic when hue is already decided for you.
The ratio of that colour against white and against black. They tell you at a glance which direction text on it should go, and whether it can carry text at all.
Because hue rotation is geometric rather than perceptual. Yellows and cyans are inherently lighter than blues and reds at the same saturation and lightness.
The two hues sitting either side of the direct complement rather than the complement itself. It keeps most of the contrast while being easier to balance.
It rarely works. Choose one to dominate and use the rest in smaller amounts, or the result reads as unresolved rather than harmonious.

Subscribe to receive notifications about new tools, features, and productivity tips.