Color palette generator

Generate a color palette, lock colors, preview text contrast, and download a PNG or copy CSS. Free, no sign-up. Works in your browser.

Press Space to generate.

Background

#F7F5EF

Text

#202C39

Primary

#D8A47F

Secondary

#A3B18A

Accent

#596F62

Card preview

A place to begin

A simple card using your palette.

Get started

Text contrast

Text / Background

#202C39 / #F7F5EF

13.01:1

Text sizeAAAAA
NormalPassPass
LargePassPass

Text / Primary button

#202C39 / #D8A47F

6.44:1

Text sizeAAAAA
NormalPassFail
LargePassPass

Contrast results cover only the two displayed text pairs; check text size and color combinations in your final design before use.

WCAG 2.2 · Normal: AA ≥ 4.5, AAA ≥ 7. Large: AA ≥ 3, AAA ≥ 4.5. Large text: at least 24px, or 18.67px bold. Judgments use unrounded ratios.

Use these colors on a Wi-Fi sign → wi-qr.com

How it works

  • Generate a palette and lock colors to keep them.
  • Preview the card and check both text pairs.
  • Download a PNG or copy the CSS variables.

Tips

  • Edit a HEX value to set and lock a color.
  • Use Undo to restore the previous palette.
  • Aim for at least 4.5:1 for normal text.

FAQ

Is this free?
Yes. No sign-up is required.
Are my colors uploaded?
The colors of palettes you make, download or copy are recorded to improve the tool, without your name or IP address.
What does the contrast check cover?
Text on Background and Text on the Primary button only.
What can I export?
A 1600 × 1000 PNG or five CSS custom properties.