Advertisement
Generate a five-color palette from any base color using monochromatic, analogous, complementary, triadic and more harmonies. Copy CSS, Tailwind, SCSS or JSON.
Build a five-color palette from one base color.
Neighbouring hues, calm and cohesive.
All five colors, ready to paste.
WCAG contrast of black and white text on each color. Check any pair you use together.
| Color | Best text | Ratio | WCAG |
|---|---|---|---|
| #007bb2 | White | 4.69:1 | AA |
| #0073d2 | White | 4.79:1 | AA |
| #2563eb(base) | White | 5.17:1 | AA |
| #5a56e9 | White | 5.33:1 | AA |
| #7a49df | White | 5.46:1 | AA |
Build a balanced five-color palette from one color you like. Choose a harmony such as monochromatic, analogous, complementary, split-complementary, triadic or tetradic, and the palette is worked out in OKLCH so the lightness and hue steps look even to the eye. Your base color always stays in the palette. Click any swatch to copy its hex code, check the text contrast of each color, or export all five as CSS variables, a Tailwind v4 theme, SCSS variables, JSON or a plain hex list. Press Random, or the R key, for a fresh starting color, and share the exact palette with a link.
What you get with Color Palette Generator.
Monochromatic, analogous, complementary, split-complementary, triadic and tetradic.
Lightness and hue change evenly to the eye, so the colors feel balanced together.
The base color is always one of the five, exactly as you chose it.
See the WCAG contrast of black or white text on every color.
The base color, harmony and export format live in the URL, so you can bookmark or share a palette.
Copy one hex code, or export the whole palette.
Follow these steps to get the best results.
Choose the color you want to build around, or press Random (or the R key) to explore.
Try analogous for a calm look, complementary for contrast, or triadic for variety.
Click a swatch to copy its hex, or export all five as CSS, Tailwind, SCSS or JSON.
:root {
--palette-1: #007bb2;
--palette-2: #0073d2;
--palette-3: #2563eb;
--palette-4: #5a56e9;
--palette-5: #7a49df;
}Use Share link to copy a URL that reopens this exact palette.
/tools/color-palette-generator?base=e11d48&harmony=triadicAdvertisement
Common questions about Color Palette Generator.
A color harmony is a rule for picking colors that go well together, based on their position on the color wheel. Analogous colors sit next to each other, complementary colors sit opposite, and triadic colors are spaced a third of the way around.
Monochromatic and analogous palettes feel calm and cohesive. Complementary and split-complementary palettes give strong contrast. Triadic and tetradic palettes are the most varied, and work best when one color leads and the others support it.
In OKLCH, equal changes in lightness and hue look like equal changes to the eye. A palette built this way has colors of similar visual weight, where one built in HSL often has a yellow that glares next to a blue that looks dark.
The Text contrast table shows the WCAG ratio and grade of black or white text on each color. The palette is not checked for contrast between its colors, so test any pair you plan to use for text and background with a contrast checker before using it.
Paste the @theme block into your Tailwind v4 stylesheet. Each color becomes a utility, so --color-palette-1 can be used as bg-palette-1, text-palette-1 and border-palette-1.
Press Share link to copy a URL with your base color, harmony and export format in it. Opening that URL restores the same palette. You can also write the URL yourself, for example ?base=e11d48&harmony=triadic&format=scss.
Press R anywhere on the page, except while typing in a field, to pick a new random base color.
Advertisement
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.