Color Palette Generator
Generate complementary, analogous, triadic, tetradic, monochromatic palettes.
About the Color Palette Generator
The Color Palette Generator produces harmonically related color schemes from a single base color. Pick a base color and a harmony scheme (complementary, analogous, triadic, tetradic, split-complementary, or monochromatic), and the tool returns a multi-row palette showing the chosen harmony plus lightness variations.
Color harmony theory goes back to Johannes Itten’s 1961 book The Art of Color, which formalized the geometric relationships on the color wheel that produce pleasing combinations. The generator implements the four most common harmonies plus the split-complementary and monochromatic schemes favored by modern UI design.
The harmonies are computed in HSL space, not RGB, because hue rotation in RGB produces muddy, unpredictable colors. Rotating red by 180 degrees in RGB produces teal — a low-saturation blue-green — whereas in HSL it produces pure cyan. The W3C CSS Color Module Level 4 specification recommends HSL (or its successor, OKLCH) for harmony math precisely because the hue channel maps to the perceptual color wheel.
The lightness variations within each hue row range from 5% to 95% lightness, producing a 50-shade gradient. UI designers typically use 5 to 9 stops: a 5-stop row gives 100, 300, 500, 700, 900 weights, matching the Tailwind CSS naming convention.
How It Works
The generator first converts the base hex color to HSL using the W3C RGB-to-HSL algorithm (the same one used by the HEX to RGB tool). It then computes the set of hues for the chosen scheme by adding fixed offsets to the base hue:
Complementary: [H, (H+180) mod 360]
Analogous: [(H+330) mod 360, H, (H+30) mod 360]
Triadic: [H, (H+120) mod 360, (H+240) mod 360]
Tetradic: [H, (H+90), (H+180), (H+270) mod 360]
Split-comp: [H, (H+150), (H+210) mod 360]
Monochromatic: [H]For each hue, the tool generates N variations by stepping lightness from 5% to 95% in equal increments. Saturation is held at the base color’s saturation; if the base is highly saturated, every variation in the palette is too. For a desaturated, sophisticated palette, start with a base color whose saturation is 30-50%.
Each HSL value is converted back to RGB via the inverse HSL-to-RGB algorithm. The conversion uses the standard hue2rgb helper function defined in the W3C specification: when saturation is zero (gray), all three channels equal lightness; otherwise, intermediate values p and q are computed from lightness and saturation, and each channel is derived via piecewise interpolation over hue sub-ranges.
The output renders each palette row as a horizontal strip of color chips, making it easy to compare the lightness progression within each hue and the hue progression across rows.
Worked Examples
Base #3366CC (a link blue, H=220, S=60%, L=50%) with complementary scheme: the second hue is 220+180 = 40 degrees (orange). The palette shows a 5-shade blue progression and a 5-shade orange progression, useful for a primary action and a warning state.
Base #3366CC with triadic scheme: hues are 220, 340 (pink), 100 (yellow-green). Triadic schemes are visually vibrant and work for playful brands, but require careful balance — let one color dominate and use the others as accents.
Base #3366CC with monochromatic scheme: only hue 220 is shown, with 5 lightness steps from dark navy (5% L) to pale ice blue (95% L). Monochromatic palettes are the safest choice for accessibility, because all colors share a hue family and luminance differences are easier to perceive.
Base #0A4F3A (forest green) with analogous scheme: hues 164, 194, 224 (greens through teal-blue). This is a calming, nature-evoking combination often seen in environmental and financial dashboards.
When to Use This Tool
- Generating a brand palette from a single primary color for a new design system.
- Building a Tailwind-style 50-to-900 weight scale for a custom theme.
- Finding complementary accent colors for chart series in a data-visualization dashboard.
- Planning accessible color combinations — use the Contrast Checker to verify each foreground/background pair.
- Drafting a dark-mode palette by lowering the lightness of every row.
- Picking a color harmony for a marketing landing page’s hero section without spending hours on trial-and-error.
- Generating background, surface, and border tints from a single accent color for consistent UI components.
Limitations & Disclaimer
The generator uses HSL hue rotation, which is perceptually non-uniform — equal hue steps in HSL do not look equally spaced to the eye. For perceptually uniform harmonies, use OKLCH (CSS Color Module Level 4), supported in modern browsers. The lightness steps are linear in HSL lightness, which approximates perceptual lightness but is not exact. Wide-gamut colors (Display P3, Adobe RGB) are not exposed; the generator outputs sRGB only. Generated palettes should be verified with the Contrast Checker before use in production UI. See our disclaimer for full terms.
Frequently Asked Questions
Why are the palette colors sometimes muddy?
Muddy colors usually come from low-saturation base colors combined with hue rotation in HSL, which can produce desaturated mid-tones. To get vivid palettes, start with a saturated base (S > 60%). Alternatively, switch to the OKLCH color space (CSS Color 4), which produces perceptually uniform harmonies — equal hue steps look equally spaced to the eye.
What is the difference between HSL and OKLCH for harmonies?
HSL hue steps are perceptually non-uniform — a 30 degree shift around yellow produces a much larger visible jump than the same shift around blue. OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space; equal hue steps in OKLCH look equally spaced. CSS Color Module Level 4 (2024) defines <code>oklch()</code>, supported in Chrome 111+, Firefox 113+, and Safari 15.4+.
How do I export the palette?
Click any color chip row in the output to copy the hex codes to the clipboard as a space-separated string. Paste into your CSS variables file or design token JSON.
Why does my palette look different in Figma?
The generator uses sRGB by default. Figma’s default color space is also sRGB, but Figma may be set to Display P3 or ‘Unmanaged’, which produces visible shifts. Set Figma’s color profile to sRGB to match the generator’s output.
Which harmony scheme should I choose?
For most UI work, complementary (a primary plus an accent) or monochromatic (a single hue with weight variations) is the safest choice. Triadic and tetradic schemes are visually richer but harder to balance — let one color dominate and use the others as accents. Analogous is calming and natural, often used for environmental and healthcare brands.
How are the lightness steps calculated?
The tool generates N steps evenly spaced between 5% and 95% lightness, holding hue and saturation constant. For a 5-step palette, the steps are 5%, 28%, 50%, 72%, 95%. This produces a roughly perceptually uniform progression because HSL lightness is closer to perceptual lightness than RGB intensity.
Last updated: September 9, 2026 · Author: HT99 Tools Editorial Team