Color Palette Generator
Start from one hex color. The page walks HSL hue (or lightness for mono) and prints matching sRGB hex values. This is not a full design system.
Rated 4.7 out of 5 based on 348 reviews
How to build a palette
- Paste a base hex color, with or without the #. The default is CZNull teal.
- Pick a scheme. Analogous sits next to the base hue. Complementary sits opposite. Triadic and tetradic space hues around the wheel. Split uses two near-opposites. Mono keeps the hue and steps lightness.
- Generate. Read each sRGB hex in the list. Copy what you need into CSS.
- Check contrast on real text. This page does not grade WCAG. Use the color contrast tool for a pair of colors.
HSL hue-offset palette
sRGB hex swatches derived from one base color
| Color space | sRGB hex in, sRGB hex out |
|---|---|
| Harmonies | Complementary, analogous, triadic, split, tetradic, mono |
| Analogous offsets | Minus 30, 0, plus 30 degrees of hue |
| Complementary | Base hue and hue plus 180 |
| Mono | Same hue and saturation, stepped lightness |
| Not a system | No tokens, dark mode, or brand library |
HSL hue offsets, then sRGB hex
The engine parses your hex as sRGB, converts to HSL, adds the scheme’s hue offsets, converts back, and prints hex. Complementary uses 0 and 180. Analogous uses -30, 0, and 30. Triadic uses 0, 120, and 240. Split complementary uses 0, 150, and 210. Tetradic uses 0, 90, 180, and 270. Saturation and lightness stay with the base color except on mono, which keeps hue and saturation and walks lightness.
What each scheme is for
Analogous palettes feel close and calm. Complementary pairs are high contrast in hue, not necessarily in luminance. Triadic gives three evenly spaced hues. Split complementary softens a direct opposite with two nearby hues. Tetradic is four corners of a rectangle on the wheel. Monochrome is tints and shades of one hue. None of these rules replace looking at the result on a real UI.
Not a full design system
You get a handful of hex strings. There is no spacing scale, no type ramp, and no semantic token names. Pick one hex as a brand seed, then assign roles yourself. For a single color’s hex, RGB, and HSL, use the color converter. For whether text meets a contrast ratio on a background, use color contrast.
Pairing with other visuals
Hex from this page can color a mock or a chart. A QR code on this site is black modules on white. Do not assume a pale analogous swatch will keep a QR readable. Keep codes high contrast. This palette tool does not encode URLs.
Limits of hue math
HSL is a convenience space, not perceptual uniformity. Two steps of 30 degrees are not always equal in how they look. Wide-gamut displays still receive sRGB hex. Invalid hex fails in the status line. There is no named-color parser beyond hex on this form.