TodoEnUnClick

Arrow keys to move, Enter to open, Esc to close. Shortcuts: / or Ctrl + K.

 ES

Color palette generator

Harmonious palettes with accessible contrast checks.

Runs in your browser

Neighbouring colours on the wheel: calm and natural.

  • Aa14.2:1

    #75E3FF

    AAwith black text

  • Aa8.2:1

    #759FFF

    AAwith black text

  • Aa6:1

    #8E73FF

    AAwith black text

  • Aa7.8:1

    #D675FF

    AAwith black text

  • Aa8.9:1

    #FF75E3

    AAwith black text

CSS variables

:root {
  --color-1: #75E3FF;
  --color-2: #759FFF;
  --color-3: #8E73FF;
  --color-4: #D675FF;
  --color-5: #FF75E3;
}

Check contrast between two colours

Sample heading

This is how a paragraph would read with this colour combination.

Contrast ratio: 2.35:1

AA normal text (4.5:1)AA large text (3:1)AAA normal text (7:1)

What it does: Color palette generator

Create a five-colour palette from a base colour using colour-harmony rules: analogous, complementary, triadic, split complementary, tetradic or monochromatic.

Each colour shows whether it reads better with white or black text and whether it meets WCAG AA. Use the checker to validate any text/background pair before you ship it.

How to use it

  1. Choose a base colour or press “Random colour”.
  2. Select the harmony type.
  3. Review each colour's contrast and copy the CSS variables.
  4. Check the text/background combinations you plan to use.

Examples

Website palette

Start from your brand colour, choose “Split complementary” and use the complement only for buttons and links.

Understated UI

The monochromatic harmony produces backgrounds, borders and text of the same hue at different lightness levels.

Limits, formulas and assumptions

  • Harmonies are calculated by rotating the hue in HSL space; treat the result as a starting point, not a strict rule.
  • Contrast uses the WCAG 2.x relative luminance formula.
  • Don't rely on colour alone to convey information: pair it with text or icons.

Frequently asked questions

What contrast do I need?

At least 4.5:1 for normal text (AA). Large text (about 24 px, or 19 px bold) only needs 3:1.

Why do some palette colours fail AA?

Mid-tones (neither very light nor very dark) have low contrast with both white and black. Use them for decoration or adjust their lightness.

Can I use the palettes commercially?

Yes. Colours aren't copyrighted and the generated palette is yours.

Related guides