Color Scheme Generator
Generate a harmonious color palette from a base color — complementary, analogous, triadic, tetradic, split-complementary, or monochromatic — using HSL hue rotation. Get hex and HSL values for every color.
Input
The starting color the whole palette is built from.
Output
| Color | Hex | HSL |
|---|---|---|
| No data yet | ||
Guides
A color scheme generator builds a palette of colors that work well together, starting from a single base color and rotating its hue around the color wheel according to classic color-theory rules. Pick a base color and a scheme type, and get back the hex and HSL values for every color in the palette — ready to drop into a design tool, a CSS file, or a Tailwind config.
Scheme types
- Complementary — the base color plus its opposite on the wheel (hue + 180°). High contrast, great for accents and calls to action.
- Analogous — the base color plus its neighbors 30° on either side. Colors that sit next to each other on the wheel, producing a calm, low-contrast palette.
- Triadic — three colors evenly spaced 120° apart. Vibrant and balanced, a common choice for playful brand palettes.
- Split-Complementary — the base color plus the two colors adjacent to its complement (+150° and +210°). Nearly as much contrast as complementary, but softer.
- Tetradic / Square — four colors evenly spaced 90° apart. Offers the most variety, so it usually needs one dominant color and three supporting ones.
- Monochromatic — the same hue at four different lightness levels (20%, 40%, 60%, 80%). A safe, cohesive palette for UI shades and tints.
How to use
- Pick a base color with the color picker (or type a hex value).
- Choose a scheme type from the dropdown.
- The palette table updates instantly with each color's role, hex code, and HSL value.
- Copy the table or download it as a CSV to use in design software, CSS custom properties, or a Tailwind theme.
Everything runs in HSL space: the base color is converted to hue/saturation/lightness, the hue is rotated by the fixed offsets each scheme calls for, and the results are converted back to RGB and hex. Hue rotation wraps around at 360°, so a base hue of 300° plus a 120° triadic offset correctly lands at 60°, not 420°.
FAQ
Why HSL instead of RGB? Rotating a hue in HSL space keeps saturation and lightness constant, so every generated color has the same intensity and brightness as the base — only the hue changes. Doing the equivalent rotation in RGB is far messier and doesn't map cleanly to how color wheels are taught.
Does saturation or lightness change between colors? For every scheme except monochromatic, no — only hue changes, so all the colors in the palette share the base color's saturation and lightness. Monochromatic keeps hue and saturation fixed and instead varies lightness across four fixed steps.
Can I use the generated colors directly in CSS?
Yes. Each row gives both a hex code (#RRGGBB) and an HSL string (hsl(h, s%, l%)), so you can copy either format straight into a stylesheet or design tokens file.
Which scheme should I pick? Complementary and split-complementary work well for a single accent against a neutral background. Analogous and monochromatic suit calm, cohesive interfaces. Triadic and tetradic give more variety for illustrations, charts, or brand palettes that need several distinct colors.
Privacy
All color math happens locally in your browser — your base color and chosen scheme are never sent to a server.