Click any swatch to copy its HEX. Palettes are generated live from your base color.
Tints & shades
Complementary
Analogous
Triadic
Split-complementary
Tetradic
Even scale (OKLCH)
Lightness steps evenly from 50 to 950 at your hue and chroma, so neighbouring steps look equally far apart.
50↓100↓200↓300↓400500600700↓800↓900↓950↓
↓ marks steps where the colour is less vivid than yours: screens can't show that much chroma at that lightness, so it was lowered rather than clipped.
:root {
--brand-50: #f1f7ff;
--brand-100: #c7dfff;
--brand-200: #9cc7ff;
--brand-300: #6faeff;
--brand-400: #4894f5;
--brand-500: #2e7cda;
--brand-600: #0f64c0;
--brand-700: #004e9e;
--brand-800: #003a78;
--brand-900: #002755;
--brand-950: #001534;
}Gradient from a harmony
background: linear-gradient(90deg, #2aced6 0%, #2a78d6 50%, #322ad6 100%);