Palette Notebook

Collect colors. Compare a pair. Take your palette with you.

Changes stay in this tab. Export your palette to keep it.

Your colors

3 of 200 colors

Three starter colors to explore. Add your own below.

Add to your palette

1–40 characters.

# plus 3 or 6 hex digits.

Pair preview

Live comparison

Foreground

Background

Contrast ratio—

Add colors to compare a pair.

Live preview

Color supports the message.

Compare this heading with smaller text.

Example control

A ratio alone does not certify accessibility. Also check text size, weight, focus states and context.

Take your palette

Export named CSS variables for your project, or save a palette file to reopen here later.

Palette file tools

Import replaces your current palette. Export it first if you want to keep it.

Names become lowercase variables. Matching names receive a unique suffix.