Skip to content

Color Palette Generator

WCAG contrast: at least 4.5:1 for normal text, 3:1 for large text.
Palette

Popular Developer Tools

How to Use

  1. Pick a base color (HEX).
  2. Choose a scheme (complementary/analogous/triadic) and count.
  3. Generate the palette.
  4. Copy HEX/CSS variables and check contrast (WCAG).

How to Read Results

  • Palettes are generated using HSL harmony rules. In real UI, you usually fine-tune saturation/lightness.
  • If contrast is below 4.5:1, normal text readability may suffer.
  • Auto text color chooses black/white with better contrast.
  • Before shipping, test with your font size and actual background/surface colors.

FAQ

Is my data uploaded to a server?

No. Whenever possible, processing happens locally in your browser and we do not store your inputs or results on our servers. (Network requests may still occur for page loads and ads.)

What should I check if the output looks wrong?

Check input encoding (UTF‑8), line breaks (CRLF/LF), whitespace/quotes, and options (case, URL encoding mode, etc.). For sensitive values, follow your security policy before pasting.

How can I improve a palette that looks off?

Try tweaking the base color (saturation/lightness) or switching the scheme (complementary/analogous/triadic). In real UI, always check contrast (WCAG ratio) for readability.