How to use the color palette generator
- Set the Base color with the swatch or by typing a hex code such as
#2563eb. Three-digit codes like#f80work too. - Choose a Harmony rule. The five swatches update at once.
- Press New palette (or the Space bar) to try a random base color. The Random rule ignores the base and draws five unrelated colors.
- Press Lock on a swatch to keep it. Locked colors stay put when you change the base, the rule or press New palette.
- Read the contrast line on each swatch to see whether white or black text is easier to read on it.
- Use Copy for one hex code, or Copy hex codes or Copy CSS variables for all five.
How the harmonies are built
Each rule turns your base color into hue, saturation and lightness (HSL) and rotates the hue around the color wheel, as described in color scheme theory. Your base color is always one of the five swatches.
- Analogous: the base plus hues 30 and 60 degrees either side of it, with the same saturation and lightness.
- Complementary: the base at three lightness steps (24 points darker, unchanged, 24 lighter), then the opposite hue (180 degrees) unchanged and 24 points lighter.
- Triadic: the base and the hues 120 and 240 degrees around the wheel, plus the base 24 points darker and 24 points lighter.
- Split-complementary: the base and the two hues next to its opposite (150 and 210 degrees), plus the base 24 points darker and lighter.
- Monochromatic: one hue in five lightness steps of 15 points, from 30 darker to 30 lighter.
Contrast uses the WCAG contrast ratio, (L1 + 0.05) / (L2 + 0.05), from each color's relative luminance, rounded down to two decimals. WCAG level AA asks for at least 4.5 to 1 for normal text and 3 to 1 for large text.
Worked example with the default inputs
The page loads with Base color #2563eb (HSL 221, 83%, 53%) and the Analogous rule. The CSS box shows exactly this:
:root {
--color-1: #25ebad;
--color-2: #25c6eb;
--color-3: #2563eb;
--color-4: #4a25eb;
--color-5: #ad25eb;
}Swatch 3 is the base color, where white text scores 5.16:1 (AA). Swatch 1, #25ebad, scores 13.56:1 with black text (AAA).
Limits and edge cases
- Gray, black and white have no hue, so every rule only changes lightness. The page shows a note when this happens.
- The contrast line checks white or black text on that swatch, not one swatch against another. Test the pairs you plan to use together.
- HSL lightness is not perceived brightness. Yellow and blue at the same lightness look different, so judge by eye as well.
- Nothing is saved. Copy the codes before you close the tab.
Frequently asked questions
How many colors should a brand palette have?
Three to five core colors is enough for most digital work. Add a near-white and a near-black for backgrounds and text, plus a green and a red for success and error messages.
What is the difference between analogous, complementary and triadic palettes?
Analogous colors sit next to each other on the color wheel and feel calm. Complementary colors sit opposite and give the strongest contrast. Triadic colors are spaced 120 degrees apart and feel lively but balanced.
How do I choose a text color that is readable on my palette?
Aim for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. The line under each swatch tells you whether white or black text scores higher on that color.
Can I use these palettes commercially?
Yes. The colors are ordinary hex codes calculated from your input, and you do not need to credit this site. A well-known brand color can be protected as a trademark, so avoid copying a competitor's signature color.
Convert a swatch to RGB, HSL or CMYK with the color picker, fade two of the colors together with the CSS gradient generator, or draw unrelated colors with the random color generator.