TinyTools

🧪 DESIGN

Palette Builder

Build color harmonies with randomize and lock, a WCAG contrast matrix, and color-blind simulation.

Your files are processed directly on your device and are not uploaded to our servers.

Palette

Palette (3 colors)

  • #283bd9

  • #6d28d9

  • #c628d9

WCAG contrast matrix

Green cells pass AA normal text (≥ 4.5:1). Use them for text pairs.

1.001.091.73
1.091.001.59
1.731.591.00

Color-blind preview

Protanopia (red-blind)

Deuteranopia (green-blind)

Tritanopia (blue-blind)

Code

CSS variables

:root {
  --palette-1: #283bd9;
  --palette-2: #6d28d9;
  --palette-3: #c628d9;
}

How to use

  1. Pick a base color or preset, then choose a harmony rule.
  2. Check the palette, contrast matrix, and color-blind previews.
  3. Copy HEX values or CSS variables into your design tokens.

FAQ

What harmonies are supported?
Complementary (2 colors), analogous (3), triadic (3), tetradic (4), and monochromatic (5 shades). Pick a base color and the harmony builds the rest from color theory.
What does the accessibility matrix mean?
Each cell shows the WCAG contrast ratio between two palette colors. Aim for 4.5:1 or higher for text pairs — the matrix highlights which combinations pass AA.
What is color-blind simulation?
It previews your palette under protanopia, deuteranopia, and tritanopia vision using standard simulation matrices, so you can spot pairs that become indistinguishable.
Is my work uploaded anywhere?
No. Every palette is computed locally in your browser. Nothing you tweak or copy ever leaves your device.

Related tools