Color Harmony Palette Generator

Build a harmonious palette and 50 to 900 tints and shades from one base color, then check text contrast and color vision

The color palette tool starts from a single color, such as your brand color. It places that color on the color wheel, picks the key colors to use with it under one of six rules (monochrome, analogous, complementary, split complementary, triadic or square), and builds ten tints and shades for each key color, from the lightest at 50 to the darkest at 900. The colors a screen really needs, such as backgrounds, borders, buttons and text, usually come from these steps.

Any cell you pick is checked right away against white and black text using WCAG 2.2, and the tool finds steps in the same row that can carry text on top of it. It also turns the key colors into protan, deutan and tritan views and a black-and-white print, and shows in numbers how close they get to each other. All calculations run in your browser, and colors copy out as HEX codes and CSS variables.

When to use it

• You only have one brand color: choose supporting and accent colors by rule, and get light background steps and dark text steps for each one in one go.
• You need steps for buttons, badges and alert boxes: pick colors by role, such as a 50 background, a 200 border and 600 text from the same hue, and copy them out as CSS variables. Each cell's text color shows right away whether white or black reads better.
• You are choosing chart or map legend colors: use the triadic or square rule to pick colors far apart, and decide whether to add patterns or labels for any combination that shows "getting close" in the color vision view.
• You are checking complementary or analogous colors: handy for a design class or a quick check of which color sits opposite another. Paint-based color wheels (RYB) use a different basis, so results can differ; see "Why there are two color wheels" below.

How to use it

1. Enter a base color: type it in any format, such as #2E6BE6, rgb(46 107 230), hsl(220 79% 54%), oklch(56% 0.2 262) or royalblue. The square on the left opens a color picker, and you can also start from an example color or the random button.
2. Fine-tune on the wheel: drag the big dot to change the hue (around the wheel) and saturation (distance from the center), and use the bar below for lightness. With the wheel focused, the left and right arrow keys move the hue by 1° and the up and down keys move saturation by 1% (hold Shift for 10 times as much).
3. Pick a harmony rule and a wheel type: press one of the six rules and the small dots glide across the wheel to their new places while the key colors at the top change. Choose either an HSL or an OKLCH wheel.
4. Pick the cells you need in the tints and shades: pressing a cell shows its codes, contrast and same-row text candidates under "Selected color". Pressing a code line copies that value, and "Use as base color" rebuilds the palette from that cell.
5. Check by color vision type, then export: if a row shows "getting close" or "not distinguishable", widen the lightness gap or choose another rule. Finish with Copy HEX, Copy CSS variables (every step) or Copy link.

The six harmony rules

A rule decides how many degrees to turn the hue from the base color. The base color always stays as it is, and only the other key colors are calculated. Monochrome does not turn the hue and only lowers saturation.

The previous version mixed in lightness variants for each rule so that it always filled six cells. This version puts only the key colors the rule defines at the top and moves lightness variants into the tints and shades table below. That keeps it clear which colors come from the rule and which are lightness variants of the same color.

Why there are two color wheels: HSL and OKLCH

The HSL wheel keeps the base color's HSL saturation and lightness and only turns the hue. The previous version and most graphics tools work this way, so the complement has the same angle as in other tools. The drawback is that HSL numbers do not match perceived lightness. CSS Color 4 explains that yellow looks much lighter than blue at the same HSL lightness, and that a 30° hue difference looks similar between 220° and 250° but very different between 50° and 80°.

The OKLCH wheel keeps perceived lightness (L) and chroma (C) equal to the base color and only turns the hue. The key colors therefore have even lightness, and their text contrast moves in a similar range. The catch is that some colors at the same lightness cannot be shown on a screen (sRGB); for those, lightness and hue stay and only chroma is reduced. This is the same direction as the gamut mapping in CSS Color 4 §14, which brings a color into range by lowering chroma. The hatched area on the wheel is exactly the part that cannot be shown at that lightness.

L is OKLCH lightness (0 to 1). For eye-catching contrast, HSL is the better starting point; for a calm combination with even lightness, OKLCH is. The paint-based color wheel (RYB) you may know from art class is built on red, yellow and blue, while this tool's two wheels come from screen color (RGB). The primary colors that divide the wheel differ, so the same color sits in a different place and its opposite, the complement, comes out differently too. Neither is wrong; they use different bases.

How the tints and shades are built

The steps are ten lightness positions, with OKLCH lightness L going from 0.97 (50) down to 0.25 (900) in steps of 0.08. Cells lighter than the base color are mixed straight toward white in OKLab, and darker cells straight toward black, until lightness reaches the target. The hue stays the same, and chroma shrinks at the same rate as the color nears white or black, so very light cells do not turn neon. The default mixing space of color-mix() in CSS Color 5 is Oklab, so this matches color-mix(in oklab, base, white n%).

Each key color goes into the cell with the closest L, unchanged, and is marked with a dot (•) in the table. Step numbers are lightness positions, so a light yellow (#F9A825, L 0.792) lands in the 200 cell and a deep navy in the 700 to 800 cells. In many design systems "yellow 500" is a bright yellow, but in this table the 500 of the yellow row leans toward brown. The choice is deliberate: the same number means the same lightness across hues, which makes it easy to mix different colors.

In the gray row, white text passes 4.5:1 from 600 onward, and black text passes 4.5:1 up to 500. Colored rows change around the same place, but even at the same L each color has a different WCAG luminance, so the boundary can shift by about one cell. The place where a cell's text flips from white to black is that boundary.

How to read text contrast

• Thresholds: WCAG 2.2 asks for 4.5:1 for normal text (1.4.3, AA), 3:1 for large text (18pt or larger, or bold 14pt or larger), and 7:1 under the stricter 1.4.6 (AAA). The swatch labels "AA", "AAA", "Large text only" and "Fail" follow these bands.
• No rounding: Understanding SC 1.4.3 states that the calculated ratio is not rounded (4.499:1 does not meet 4.5:1). So this tool rounds down to one decimal place and judges by the value shown.
• Either white or black always passes: for any color, whichever of white and black text has the larger contrast never drops below 4.58:1. At the luminance where the two contrasts are equal (about 0.179), both are 4.58:1. That is why a cell's text color is always the side above 4.5:1.
• Same-row text candidates: from the selected cell, the tool looks up and down for the nearest step with a contrast of 4.5:1 or more. In the base row of the first screen, text in 600 (#2558C0) on a 50 background (#F0F5FF) gives 5.9:1, and 600 on 100 gives 4.6:1. The base color itself (500) reaches 4.5:1 with no cell in its row, so white text (4.8:1) is the right choice there.

Color vision view and the "getting close" flag

The key colors are shown side by side as seen with protan (red-blind), deutan (green-blind) and tritan (blue-blind) vision, and as a black-and-white print. Protan and deutan use the model of Machado et al. (2009) and tritan uses the method of Brettel et al. (1997), at full strength, meaning dichromacy where that cone type is missing. Black and white is the WCAG luminance turned into gray.

The number at the right of each row is the OKLab distance (ΔEOK) between the two closest key colors in that view. CSS Color 4 treats an OkLCh difference of 0.02 as one just noticeable difference (JND). This tool shows "not distinguishable" below 0.02 and "getting close" when the distance falls below half the distance measured on the original colors. The half-distance line is a warning level set by this tool, not a standard.

WCAG 2.2 1.4.1 requires that information is not conveyed by color alone. Even when no "getting close" flag shows, do not separate states or categories by color only; add text, icons or patterns. If the black-and-white row gets close, widening the lightness gap between the two colors is the quickest fix.

The first-screen example, worked through

The first screen uses the base color #2E6BE6, the split complementary rule and the HSL wheel. From HSL hue 220°, turning +150° (10°) and −150° (70°) while keeping saturation 79% and lightness 54% gives the two other colors.

HSL lightness is 54% for all three, yet OKLCH lightness spreads out to 0.560, 0.629 and 0.873, so the lime lands in the 100 cell and the vermilion in the 400 cell. Only black text clears the normal-text level on the lime, and only white text on the blue. Choosing the OKLCH wheel for the same base color pulls the three lightness values close to 0.56 and makes the colors calmer.

Common mistakes

• Assuming tools disagree about complements: the paint wheel (RYB), the screen wheel (HSL) and the perceptual wheel (OKLCH) each give a different complement for the same color. First check which wheel was used.
• Thinking equal HSL lightness means equal brightness: as in the first-screen example, three colors at HSL 54% differ greatly in actual lightness. Judge a color for text by its contrast number or by OKLCH L.
• Using a key color directly as text: a strongly saturated key color often misses 4.5:1 even on white. For text, the 600 to 900 cells of the same row are the safer choice.
• Trying to match step numbers to another design system: the numbers here are lightness positions. A yellow 500 that leans toward brown is not an error, and a light yellow sits in the 200 cell.
• Running a harmony rule on a neutral color: gray, white and black have no hue, so any rule gives the same gray. Drag the wheel dot outward to add at least a little saturation. White and black sit at the ends of lightness (100% and 0%), so dragging alone changes nothing; move the lightness slider toward the middle first.
• Trying to fit web-safe colors: the web-safe palette has 216 colors made from six levels each of red, green and blue (00, 33, 66, 99, CC, FF), a standard for older screens that could show few colors. Current web pages do not need to match it; use it only when targeting an old system with a limited palette.

Limits and cautions

• Harmony rules only organize hue relationships and do not guarantee a good-looking result. A rule is a starting point, and choosing to suit the brand's meaning and use is up to you.
• Colors are calculated in sRGB and exported as HEX. The same HEX can look different on different monitors, and this tool does not produce CMYK values for print.
• The color vision simulation is an approximation modeled on average dichromacy. How it really looks differs from person to person, and milder color vision deficiency narrows the differences less than shown.
• The contrast check looks only at the text color and the background color. Font weight, size, background patterns and translucent effects need to be checked by hand.
• Transparency (alpha) in the input is dropped and the color is calculated as opaque. A link carries only the color, rule and wheel type, not the cell you selected.

Basis: CSS Color 4 (2025-08-18 draft), CSS Color 5 (2026-09-13 draft) and WCAG 2.2 were checked on 2026-10-20. The numbers in the tables above were recalculated with this tool’s own calculation code.

Sources

• 01W3C: CSS Color Module Level 4 (CRD 2025-08-18)§7 HSL and the uneven hue angle (examples 220°/250° and 50°/80°), §9.2 Oklab and OkLCh (blue L 0.452, yellow 0.968), §14 gamut mapping and the JND of 0.02
• 02W3C: CSS Color Module Level 5 (WD 2026-09-13)§3 color-mix(), which uses Oklab when no mixing space is given
• 03Björn Ottosson: A perceptual color space for image processing (2020)sRGB to Oklab conversion matrices
• 04W3C: WCAG 2.21.4.1 Use of Color, 1.4.3 contrast of 4.5:1 (3:1 for large text), 1.4.6 at 7:1, and the contrast ratio formula
• 05W3C: Understanding SC 1.4.3 Contrast (Minimum)The ratio is not rounded (4.499:1 does not meet 4.5:1); large text is 18pt, or 14pt bold
• 06Machado GM, Oliveira MM, Fernandes LAF. A Physiologically-based Model for Simulation of Color Vision Deficiency. IEEE TVCG 2009;15(6):1291–1298Simulation matrices for protan and deutan
• 07DaltonLens: Understanding LMS-based Color Blindness Simulations (2021)Tritan simulation by the Brettel et al. 1997 method (anchor wavelengths 485 and 660 nm)
• 08Adobe Express: Color wheel explainedTwo kinds of color wheel: RYB for painters mixing paint, RGB for computer and TV screens; complementary colors are the two opposite each other on the wheel

Frequently asked questions

Tools to use with it