Color Wheel

How to read the color wheel

Every point on the ring is a hue measured in degrees, exactly like the first number in a CSS hsl() value: 0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta. Distance on the ring is the whole vocabulary of color relationships - close hues agree, opposite hues contrast.

• Complementary (180° apart): strongest contrast, good for a call-to-action against its opposite.
• Analogous (±30°): a calm, unified family - the safest starting point for interfaces.
• Triadic (120° apart): three hues that stay vibrant without fighting, if you let one dominate.
• Split-complementary (150° + 150°): the pop of complementary, softened.
• Tetradic (two pairs): four colors for rich illustration - balance them with unequal amounts.
• Monochromatic (one hue): lightness and saturation do all the work, so it is automatically harmonious.

Color wheel vocabulary

The sliders and readouts on this page use six words that every color model reuses with slightly different meanings. Knowing which is which is most of the difference between guessing at a palette and naming it.

• Hue: the position on the ring, measured in degrees. It is the only number the wheel itself controls.
• Saturation (hsl()) and chroma (oklch()): how pure the hue is, from grey at the centre to full color at the edge. Chroma is the amount you actually perceive, which is why two colors with equal saturation can look very different in intensity.
• Lightness or value: how close the color sits to black or white, with 50% being the pure hue in most models.
• Tint: the hue plus white. Tints read as soft or child-friendly and cost contrast fast, so a tint background needs the darkest shade of the same hue for text.
• Shade: the hue plus black. Shades carry weight and are where accessible body text usually comes from.
• Tone: the hue plus grey. Tones are the quiet middle ground that keeps a multi-color interface from looking like a highlighter factory.

The monochromatic rule on this wheel is nothing more than one hue walked through tints, tones and shades, which is why it is the easiest scheme to ship accessibly.

This is an RGB wheel, not the RYB wheel from school

Art class taught red–yellow–blue, where orange's opposite is blue and mixing three paints gives a muddy grey. Screens work in red–green–blue light, so this ring puts cyan at 180° from red and yellow at 60°. That is not a stylistic choice: it is the same space hsl(), your monitor and every CSS gradient interpolate in, so hues you pick here behave identically once pasted into a stylesheet.

The practical consequence is the complementary pair. On an RYB wheel the opposite of a warm orange is a cool blue; on this wheel it is a bright cyan, which is what actually makes a button stand out on an orange banner. Paint relationships do transfer as intuition, but if you mix two colors by the school wheel and then render them, the screen will disagree.

If you want the perceptual version of the same ring - where 240° blue and 120° green feel equally far apart in brightness, not just in angle - copy the oklch() readout above into a design token file and let modern CSS do the interpolation instead.

From the wheel to something usable

A wheel gives candidates, not a finished palette. Take the swatches you liked and generate a full palette from them, lock the ones that work, then run every text-and-background pair through the WCAG contrast checker before shipping. If the hue lives in a photo or a brand mark rather than in theory, extract it from the image first - the wheel works best when the base color is the one your project already uses.

In a hurry to name what you found? The HTML color codes table lists every CSS named color with its HEX and RGB value, so you can snap a wheel result to the closest keyword like rebeccapurple or tomato.

Color Wheel FAQ