02 / Palette studio
Spectrum↗
Six-color harmonies, locked favourites, readable text pairings, and CSS you can take to your next project.
01
9.11:1 · AAA
with white text
with white text
02
6.03:1 · AA
with white text
with white text
03
5.02:1 · AA
with dark text
with dark text
04
7.83:1 · AAA
with dark text
with dark text
05
11.03:1 · AAA
with dark text
with dark text
06
13.00:1 · AAA
with dark text
with dark text
A system, ready to goGood colors.
Good colors.
Better together.
Lock the colors you love before shuffling. Contrast ratings help you choose readable text; they don’t certify a whole interface.
:root {
--color-1: #7b2f37;
--color-2: #9c4b3c;
--color-3: #ba784c;
--color-4: #c7a76d;
--color-5: #d4cd8e;
--color-6: #d9e0af;
}A look under the surfaceUseful by design.
Useful by design.
Curious by nature.
Harmonies rotate a base hue around the HSL color wheel. Contrast uses WCAG relative luminance. The rating on each swatch applies to its suggested foreground text against that background.
contrast = (lighter + 0.05) / (darker + 0.05)
complement = (hue + 180) % 360