style

Palette Generator

Generate harmonious palettes by color theory or build your own with up to 5 colors, preview contrast ratios and export as CSS variables.

How to use Palette Generator

The tool has two modes: harmony palettes generated by color theory, and a custom palette builder.

Harmony palettes

Choose a base color by typing its HEX code or using the visual picker, then select a harmony type:

  • Complementary — 2 opposite colors on the color wheel (180°). Maximum contrast, very striking.
  • Split-complementary — base color plus the two colors adjacent to its complement. High contrast but softer.
  • Analogous — 3 neighboring colors (±30°). Harmonious and natural, great for backgrounds.
  • Triadic — 3 equidistant colors (120°). Balanced and vibrant.
  • Tetradic — 4 colors in a square (90°). Rich palette, needs a dominant color.
  • Monochromatic — same hue at different lightness levels. Elegant and cohesive.

Contrast preview

Use the Text color picker to simulate how text would look on each palette color. Each swatch shows the WCAG level (AAA / AA / AA Large / Fail) and the exact contrast ratio.

Copying colors

Hover over any color to reveal the copy button. Use Copy all to get all HEX values on one line, or Copy CSS to get the CSS variables ready to paste into your stylesheet.

Custom palette builder

Expand the Custom palette section to build your own color combination from scratch:

  1. Choose how many colors you want (1 to 5) using the number buttons.
  2. Change each color with the HEX input or the visual picker below each swatch.
  3. Drag swatches to reorder the colors.
  4. Use the independent Text color picker to check contrast on your custom palette.
  5. Click Save palette to save it — you can store up to 5 palettes that persist between sessions.
  6. From the saved palettes list you can load them back into the editor or delete them.
Aa Fail 2.8:1
#8C24A8hsl(287, 65%, 40%)
Aa Fail 2:1
#40A824hsl(107, 65%, 40%)