Click a value to copy it. Lock a swatch to keep it when you change the base, the harmony or re-roll.
Contrast matrix (WCAG 2.2)
Each cell shows the row color as background and the column color as text. Ratios are cut (not rounded) to two decimals. AAA = 7:1 or more, AA = 4.5:1, AA large = 3:1 (large text and UI parts only).
About this tool
This color palette generator builds a five-color palette from one base color using a classic color harmony, then checks every pair of colors, plus white and black, against the WCAG 2.2 contrast thresholds. You can lock the swatches you like and re-roll the rest, copy any color as HEX, RGB or HSL, export the palette as CSS custom properties, Tailwind CSS or JSON, and share it with a link. It runs entirely in your browser; the palette lives in the page address after the #, which is never sent to a server.
How to use the color palette generator
- Pick a base color with the color picker or type a HEX code such as
#2B6CB0or the short form#36C. - Choose a harmony: complementary, analogous, triadic, split-complementary, tetradic or monochromatic. The swatches update straight away.
- Lock what you want to keep. Each swatch has a Lock button. Locked swatches stay exactly as they are when you change the base, change the harmony or click Random palette.
- Click Random palette to roll a new base color and refill every unlocked swatch.
- Read the contrast matrix to see which colors can sit on which as text.
- Export or share. Pick a format, then Copy export or Download, or use Copy share link to send the exact palette, locks included.
Color harmony basics
Harmonies are rules for choosing hues that sit at set angles on a color wheel. This tool uses the HSL wheel from CSS, where hue runs from 0° (red) through 120° (green) to 240° (blue). That wheel is built from screen primaries, so it differs from the red-yellow-blue wheel taught in painting: on the HSL wheel the opposite of red is cyan, not green. Saturation and lightness stay at the base color's values unless a swatch is a tint or a shade. A tint here moves lightness halfway to white, L + (100 − L) / 2, and a shade halves it.
| Harmony | Hue angles from the base | The five swatches |
|---|---|---|
| Complementary | 0°, 180° | Base, base tint, base shade, complement, complement tint |
| Analogous | −60° to +60° in 30° steps | −60°, −30°, base, +30°, +60° |
| Triadic | 0°, 120°, 240° | Three hues, base tint, base shade |
| Split-complementary | 0°, 150°, 210° | Three hues, base tint, base shade |
| Tetradic (square) | 0°, 90°, 180°, 270° | Four hues, base tint |
| Monochromatic | 0° only | Lightness at 1/3 and 2/3 of the base, base, then 1/3 and 2/3 of the way to white |
A harmony is a starting point, not a guarantee that a palette looks good or that colors carry a particular mood. It only fixes the hue relationships. Whether the result works depends on how much of each color you use and on contrast, which is where most palettes fail in practice.
Why HSL lightness is not contrast
HSL lightness is a simple formula, not a measure of how bright a color looks. Pure yellow, hsl(60, 100%, 50%), and pure blue, hsl(240, 100%, 50%), have the same HSL lightness, yet their relative luminance is 0.9278 and 0.0722. That is why every palette here gets a contrast matrix: two swatches that look balanced on the wheel can be useless as text and background.
The contrast rules
The matrix follows the WCAG 2.2 contrast definition. Each sRGB channel is divided by 255; values at or below 0.04045 are divided by 12.92, and the rest become ((V + 0.055) / 1.055)2.4. Relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B, and the contrast ratio is (L1 + 0.05) / (L2 + 0.05), with the lighter color on top. Older versions of the definition used 0.03928 instead of 0.04045; W3C notes this has no practical effect, and for 8-bit colors no channel value falls between the two cut-offs, so both give identical ratios. The Contrast Checker uses the same formula with the older cut-off, so the two tools agree.
- 4.5:1 for normal text (Success Criterion 1.4.3, level AA).
- 3:1 for large text, which WCAG defines as at least 18 point, or 14 point bold, roughly 24px and 18.5px in CSS.
- 7:1 for normal text at level AAA (1.4.6).
- 3:1 for user interface parts and meaningful graphics against what is next to them (1.4.11 Non-text Contrast).
Ratios in the matrix are cut to two decimals, never rounded up, so a pair shown as 4.49 really does fail 4.5:1. The WCAG color contrast guide covers the rules in more depth.
Worked example: the default palette
The page opens with base #2B6CB0 and the analogous harmony. In HSL the base is about hsl(211, 61%, 43%) (the exact hue is 210.68°). Rotating the hue by −60°, −30°, +30° and +60° and converting back to 8-bit RGB gives:
| Swatch | HEX | RGB | HSL | On white | On black |
|---|---|---|---|---|---|
| −60° | #2BB06F | 43, 176, 111 | 151, 61%, 43% | 2.78 Fail | 7.54 AAA |
| −30° | #2BAFB0 | 43, 175, 176 | 180, 61%, 43% | 2.67 Fail | 7.86 AAA |
| Base | #2B6CB0 | 43, 108, 176 | 211, 61%, 43% | 5.41 AA | 3.87 AA large |
| +30° | #2C2BB0 | 44, 43, 176 | 240, 61%, 43% | 10.09 AAA | 2.07 Fail |
| +60° | #6F2BB0 | 111, 43, 176 | 271, 61%, 43% | 7.92 AAA | 2.64 Fail |
All five share the same HSL saturation and lightness, yet the green swatch fails as text on white while the violet one passes AAA. Between swatches the best pair is #2BAFB0 with #2C2BB0 at 3.78:1, enough only for large text or UI parts. In the CSS export the first line inside :root is --palette-1: #2BB06F;.
Exports and sharing
CSS export writes five custom properties on :root, named --palette-1 to --palette-5. The Tailwind CSS v4 export uses the @theme block with --color-* variables, which gives utilities such as bg-palette-1. The Tailwind CSS v3 export uses theme.extend.colors in tailwind.config.js, which gives the same class names. The share link stores the harmony, base, all five colors and the locks in the URL hash.
Common mistakes
- Using every swatch as text. Most harmony colors work as accents and fills, not as body text. Check the matrix first.
- Trusting equal lightness. As the example shows, equal HSL lightness does not mean equal contrast.
- Relying on color alone. Pair color with labels, icons or patterns so people with color vision deficiency get the same information.
- Forgetting dark mode. A pair that passes on white can fail on a dark background; the black column shows this.
Use cases
- Interface and brand colors with contrast checked before you write any CSS.
- Charts and slides that need several related but distinct colors.
- Design tokens pasted straight into a stylesheet or Tailwind project.
To convert a single color between formats, use the Color Converter, and to blend two palette colors into a background, try the Gradient Generator.
Frequently asked questions
This tool starts from one base color, not from a photo. Use an image color picker to sample the main color from your picture, paste its HEX code into the base color field, then choose a harmony. Lock the sampled swatch so it stays put while you try other harmonies or re-roll the rest.
That is what a lock does. A locked swatch keeps its exact color through base changes, harmony changes and random rolls, so it can drift out of the harmony of the other four. Click Locked to release it, or use Unlock all, and the swatch is recalculated from the current base and harmony.
Each swatch is converted to whole 8-bit RGB values so it has a real HEX code, and the HSL shown is recalculated from that RGB and rounded. Rounding can move the displayed hue by a degree or so. The base color itself is never changed; it keeps exactly the HEX you entered.
The palette is stored in the page address after the hash sign, so bookmarking the page or copying the share link saves it, including locks. Nothing is stored on a server or in cookies. If you close the tab without saving the link, the palette is gone.
The values are sRGB screen colors. Printers mix CMYK inks, which cannot reproduce every screen color, so some bright, saturated colors can print duller than they look on screen. Ask your printer for a proof or convert the colors in your design software with the right print profile before ordering.
AA large means the pair reaches at least 3:1, enough for large text, user interface parts and meaningful graphics, but not for normal-size text. Fail means it is under 3:1 and should not carry text or important visual information. Decorative elements with no meaning are not covered by the contrast rules.