Drag the marker around the wheel and the matching colors follow it. Switch between the painter's RYB wheel and the screen RGB wheel, pick a harmony, then see the colors on a sample web page with contrast checks, copy any value as HEX, RGB, HSL or OKLCH, and export the set as CSS, Tailwind, SCSS or JSON.
Every color has three parts. Hue is where it sits on the wheel (red, orange, blue and so on). Saturation, or strength, is how vivid it is: on this wheel, the edge is fully vivid and the centre is grey. Lightness is how close it is to white or black, controlled by the slider. Harmony rules only describe hue, which is why two colors from a perfect triad can still be unreadable together if their lightness is too similar.
Harmonies are simply angles. Complementary colors are 180 degrees apart. Split-complementary takes the two hues either side of the complement. Analogous colors are neighbours, usually 20 to 40 degrees apart. Triadic colors are 120 degrees apart, square colors 90 degrees apart, and tetradic (rectangle) sets are two complementary pairs. Monochromatic sets keep one hue and change only lightness and strength.
A web page is mostly background and text, so a harmony rarely appears at full strength across the screen. A common starting point is the 60-30-10 split: about 60 percent a neutral background, 30 percent a supporting color (cards, sections, a header), and 10 percent the accent for buttons and links. It is a rule of thumb, not a law, but it explains why a site built on a bright triad can still look calm.
The sample page on this tool follows that idea. It tints the background and text very slightly with the base hue so everything feels related, uses the base color for the main button, and keeps the other harmony colors for small things: a secondary button, icons and a badge. Toggle the dark preview to see how the same set holds up on a dark background, where saturated colors tend to look brighter and may need softening.
WCAG contrast is calculated from relative luminance, which is mostly about lightness. Pure yellow and white look very different, yet yellow text on white is almost unreadable; dark blue on pale blue is perfectly readable despite sharing a hue. So choose hues with the wheel, then set lightness so that text pairs reach at least 4.5:1 and icons, borders and large text reach 3:1.
OKLCH, one of the formats you can copy, describes colors by perceived lightness, chroma and hue. Two colors with the same OKLCH lightness look roughly equally light to the eye, which HSL does not guarantee. It is supported by current versions of the major browsers, so you can write oklch() directly in CSS and adjust lightness for hover states without the hue drifting.
The CSS export defines custom properties such as --color-primary, --color-secondary and --color-background on :root. Use them with var(--color-primary), and change the colors in one place later. The Tailwind export includes an @theme block for Tailwind version 4, which gives you classes like bg-primary and text-muted, and a theme.extend.colors block for version 3.
If you want more than the harmony colors, open the result in the color palette generator. It carries the colors across so you can lock the ones you like, add shades and check every pair against the others.
A color wheel arranges hues in a circle so that the relationships between them are easy to see: neighbours look related, and colors across the circle contrast most. Designers use it to choose colors that work together instead of guessing.
The RYB wheel uses red, yellow and blue as primaries, the way paints were traditionally mixed, so red sits opposite green and yellow opposite violet. The RGB wheel follows how screens mix light from red, green and blue, so red sits opposite cyan and yellow opposite blue. Many designers find RYB harmonies feel more natural; RGB is the literal model your screen uses. This tool shows both, and every color it outputs is a normal screen color either way.
Type your color into the box, choose Complementary, and the second marker jumps to the hue on the opposite side of the wheel. Its HEX, RGB, HSL and OKLCH values are ready to copy. Switch wheels to compare the art-class complement (RYB) with the screen complement (RGB).
There is no single best one. Monochromatic and analogous sets are the easiest to make look calm and professional. Complementary and split-complementary sets give buttons and calls to action strong contrast against the rest of the page. Triadic, tetradic and square sets are lively but need restraint: choose one dominant color and keep the others small.
No. A harmony is about hue, while readability depends mostly on the difference in lightness between text and its background. The sample page lists the WCAG contrast ratio for each pair it uses (4.5:1 for body text, 3:1 for large text and icons) so you can see which pairs are safe.
It is free with no signup. Everything runs in your browser, and your settings are kept after the # in the address, which browsers do not send to servers.
Related: Color palette generator, Color contrast checker, Tailwind color palette generator, Color palette from image, Image color picker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.