Loading the next page.
Loading the next page.
Pick a color. Build a system. Take it into your work.
Generate palettes, lock favorites, inspect pair contrast and save locally.
Lock swatches in your workspace palette below before generating. Check text pairs rather than relying on hue harmony alone.
No account or cloud storage. A downloaded JSON export is your portable backup. Up to 30 saved palettes.
Your local library is empty. Save the current palette to start a collection.
| Text ↓ / Background → | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|
1 · #12776F | 1.00 | 4.17 | 4.96 ✓ | 2.90 | 1.74 |
2 · #D9E6D5 | 4.17 | 1.00 | 1.19 | 12.10 ✓ | 2.40 |
3 · #F4F6F3 | 4.96 ✓ | 1.19 | 1.00 | 14.40 ✓ | 2.85 |
4 · #192622 | 2.90 | 12.10 ✓ | 14.40 ✓ | 1.00 | 5.05 ✓ |
5 · #C5844B | 1.74 | 2.40 | 2.85 | 5.05 ✓ | 1.00 |
✓ marks AA normal-text pairs (4.5:1 or above), using unrounded ratios. Transparent values assume a white canvas. Use the contrast checker to specify a different canvas.
:root {
--color-1: #12776F;
--color-2: #D9E6D5;
--color-3: #F4F6F3;
--color-4: #192622;
--color-5: #C5844B;
}
Saved palettes stay in this browser profile and do not sync to a Spokegrid account. Private browsing or clearing site data can remove them. Export a JSON backup for a durable copy. Lock a swatch to preserve it during generation.
Shared between tools