Published: May 26, 2026
Before building color palettes, you need to understand the three dimensions of color. The HSL model — hue, saturation, and lightness — is the most intuitive way for developers to think about and manipulate colors.
In CSS, you can work with HSL directly, which makes creating palette variations incredibly easy:
/* HSL in CSS - the developer's best friend for color palettes */
:root {
--primary-hue: 220;
/* Base color */
--primary: hsl(var(--primary-hue), 70%, 50%);
/* Lighter variants */
--primary-light: hsl(var(--primary-hue), 70%, 70%);
--primary-lighter: hsl(var(--primary-hue), 70%, 90%);
/* Darker variants */
--primary-dark: hsl(var(--primary-hue), 70%, 35%);
--primary-darker: hsl(var(--primary-hue), 70%, 20%);
/* Desaturated (muted) variant */
--primary-muted: hsl(var(--primary-hue), 30%, 50%);
}By keeping the hue constant and varying lightness and saturation, you can generate an entire color scale from a single base color. This is the foundation of most modern design systems.
A monochromatic scheme uses a single hue with varying levels of saturation and lightness. It's the simplest palette to create and guarantees visual harmony since all colors share the same base hue.
/* Monochromatic blue palette */
.mono-blue {
--blue-50: hsl(210, 80%, 95%);
--blue-100: hsl(210, 80%, 85%);
--blue-200: hsl(210, 80%, 70%);
--blue-300: hsl(210, 80%, 55%);
--blue-400: hsl(210, 80%, 40%);
--blue-500: hsl(210, 80%, 25%);
--blue-600: hsl(210, 80%, 15%);
}Monochromatic palettes work well for data visualization, dashboards, and any UI where you need hierarchy without visual noise. Use the lighter shades for backgrounds and cards, medium shades for interactive elements, and dark shades for text.
Complementary colors sit opposite each other on the color wheel (180° apart). This creates maximum contrast and visual tension — perfect for call-to-action buttons and highlights.
For example, blue (220°) complements yellow (40°). A blue background with a yellow accent button is both accessible and eye-catching. The key is to use one color dominantly (70-80%) and the complementary color sparingly (10-20%) for accents.
/* Complementary palette: blue + orange */
:root {
/* Dominant */
--primary: hsl(210, 70%, 45%);
--primary-bg: hsl(210, 40%, 95%);
/* Complementary accent */
--accent: hsl(30, 90%, 55%);
--accent-hover:hsl(30, 90%, 45%);
/* Neutrals */
--text: hsl(210, 10%, 20%);
--text-light: hsl(210, 10%, 60%);
}Be careful with complementary colors at full saturation — the high contrast can cause visual vibration. Dial down the saturation on one or both colors for a more refined look.
Once you're comfortable with monochromatic and complementary palettes, explore more complex relationships:
Analogous schemes use three colors that sit next to each other on the color wheel (e.g., blue, blue-green, and green). They feel harmonious and serene, great for backgrounds and brand identities. Pick one dominant color and use the others for subtle variation.
Triadic schemes use three colors evenly spaced around the wheel (120° apart). A triadic scheme using red, yellow, and blue provides balanced contrast while maintaining harmony. This is challenging to pull off — use one color as the main, one as secondary, and the third purely as an accent.
Tetradic (double-complementary) schemes use four colors in two complementary pairs. These offer the richest visual variety but require careful balancing. A common approach is to pick one dominant color and let the other three play supporting roles at lower saturation.
/* Triadic and analogous palette definitions */
:root {
/* Triadic: blue (210°), red (330°), yellow-green (90°) */
--triadic-primary: hsl(210, 70%, 45%);
--triadic-secondary: hsl(330, 60%, 45%);
--triadic-accent: hsl(90, 60%, 40%);
/* Analogous: blue (210°), blue-teal (190°), teal (170°) */
--analog-main: hsl(210, 70%, 50%);
--analog-mid: hsl(190, 65%, 45%);
--analog-light: hsl(170, 60%, 40%);
}If you want to experiment with these color relationships visually without writing code by hand, try the color palette generator on Wang Toolbox — it automatically generates all five scheme types from any starting color.
A beautiful palette is useless if people can't read your content. The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular).
When building palettes, always check contrast ratios between text and background colors. A common mistake is using low-saturation colors that look elegant but fail contrast checks. Lighter shades of blue or gray on white backgrounds often fall short.
/* Accessible contrast example */
:root {
/* Passes WCAG AA: 4.6:1 contrast ratio on white */
--text-primary: hsl(220, 40%, 25%);
/* Passes WCAG AAA: 9.1:1 on white */
--text-heading: hsl(220, 30%, 10%);
/* FAILS WCAG AA on white (2.8:1) - too light! */
--text-danger: hsl(0, 60%, 60%);
/* Passes WCAG AA on white (5.1:1) - darker red */
--text-danger-accessible: hsl(0, 60%, 35%);
}Tools like the color palette generator can help you quickly iterate on accessible color combinations. Start with good contrast, then adjust saturation and lightness for aesthetics.
Beyond understanding color theory, having the right tools makes palette creation fast and repeatable. Here's a quick toolkit:
Start with one primary color that represents your brand, then use its complementary or analogous counterpart for secondary elements. Keep your palette small — three to five colors is usually enough for most projects. Add neutral grays for text, borders, and backgrounds, and you'll have a complete design system that's both beautiful and functional.