Pulsar Tools
Palette
Which colours go together. Pick a colour on the wheel, choose a harmony rule, lock what works and shuffle the rest. Every swatch is checked for text contrast and for how it reads with colour-blindness, and the strip exports as CSS variables, a Tailwind theme, design tokens JSON, a PNG or a link. Everything stays in the browser.
Wheel
Drag the handle: angle is hue, distance from the centre is chroma. The marks are where the rule puts the other hues.
Press space to shuffle the unlocked swatches.
Rule
A base and the two colours either side of its opposite. Contrast without the clash.
From an image
Its dominant colours become the strip. Stays in this tab.
Checks
- Colour-blind separation. #c25300 and #009400 come within 1 of each other for deuteranopia (no green).
- Text on each swatch. Each swatch takes AA text in white or black.
- Lightness range. All swatches sit at similar lightness; add a light and a dark end for surfaces and text.
| Swatch | On white | On black | |
|---|---|---|---|
#7a46ff | 5.1 AA | 3.7 AA large | |
#c25300 | 4.6 AA | 4.1 AA large | |
#009400 | 4.0 AA large | 4.7 AA | |
#ab92ff | 2.5 fail | 7.5 AAA | |
#f19800 | 2.3 fail | 8.3 AAA |
As seen with colour-blindness
:root {
--palette-indigo: #7a46ff;
--palette-orange: #c25300;
--palette-green: #009400;
--palette-violet: #ab92ff;
--palette-amber: #f19800;
}
The palette is in this page’s address, so the link is the file. Nothing is uploaded.