Color Palette Generator
The complementary color of red #ff0000 is #00ffff, the color opposite it on the color wheel. A triadic scheme of red adds #00ff00 and #0000ff. Black on white has a contrast ratio of 21:1.
How to use
- Choose a base color with the color box, or type a HEX code such as #0b7a6a. RGB and HSL text such as rgb(11, 122, 106) also works.
- Pick a scheme: Complementary, Analogous, Triadic or Monochromatic. Your base color is outlined.
- Click a HEX, RGB or HSL row to copy that value, or press Copy all HEX for the whole palette.
- Check the two contrast lines on each swatch. They show how readable white text and black text are on that color.
How it works
Colors are handled in HSL: hue is the position on the color wheel from 0 to 360 degrees, saturation is how vivid the color is, and lightness is how light or dark it is. Schemes turn the hue and keep saturation and lightness, so every color in the palette has a similar feel.
Complementary adds the color 180 degrees across the wheel. Analogous uses the neighbours 30 degrees either side. Triadic uses three colors 120 degrees apart. Monochromatic keeps the hue and saturation and changes only lightness in steps of 15 points, between 8 and 92 percent so the ends do not collapse into pure white or black.
The contrast ratio follows WCAG 2. Each channel is converted to linear light, relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B is computed, and the ratio is (L lighter + 0.05) / (L darker + 0.05), from 1:1 to 21:1.
WCAG asks for at least 4.5:1 for normal text (AA) and 7:1 for AAA. Large text, about 24 px or 19 px bold and above, needs 3:1 for AA. The label under each ratio uses these thresholds for normal text, with AA large shown when only the large-text rule is met.
Contrast ratio thresholds
| Level | Ratio | Used for |
|---|---|---|
| AA large | 3:1 | Large text and user interface parts |
| AA | 4.5:1 | Normal body text |
| AAA | 7:1 | Enhanced readability |
FAQ
What is a complementary color?
The color directly opposite your base on the color wheel, 180 degrees away. The pair has strong contrast, which suits a call-to-action button against a background.
Which scheme should I choose for a website?
Monochromatic is the safest for a calm interface. Analogous gives a harmonious look with a little variety. Complementary and triadic are bolder, so use one color as the main and the others as small accents.
Is a high contrast ratio always needed?
For text, yes. Body text should reach 4.5:1 against its background. Decorative shapes and large headings can be lower, but text inside buttons and links should still meet the rule.
Why can a generated color differ slightly from one I pick by hand?
Your base color is kept exactly as you entered it. Other colors are calculated in HSL and rounded to whole RGB values, so a derived color can differ from a hand-picked one by one step.
Does it save my colors?
No. Everything is calculated in your browser. Use Share link to keep your base color and scheme in a URL.