Loading page content
Generate a coherent palette from a base color using harmony rules, with the tints and shades you need for a real interface rather than five swatches.
Generate harmonious color palettes from a base color. Explore complementary, analogous, triadic, and other color relationships with tints, shades, and export options.
Base Color
Harmony
Format
Palette
Tints & Shades
Click any swatch to copy its value. Shades on left, tints on right.
Export As
:root {
--color-1: #29fffb;
--color-2: #2997ff;
--color-3: #292cff;
--color-4: #9029ff;
--color-5: #29ff90;
}A five-swatch palette is not enough to build an interface with. What a real design system needs is a ramp, typically nine to eleven steps from near-white to near-black per hue, because you need distinct values for background, hover, border, muted text, body text, and emphasis, and picking those ad hoc from a five-color palette produces inconsistency everywhere.
Build the ramp on perceived lightness rather than naive HSL steps. HSL lightness is not perceptually uniform, so an evenly-stepped ramp in HSL has visible jumps in some ranges and near-invisible steps in others. And check every text pairing for contrast: a palette that looks good and fails WCAG is not usable.