Hue rotation
H_k = (H + δ_k) mod 360
δ is 180° (complementary), ±30° (analogous), 120° and 240° (triadic), 150° and 210° (split complementary), 90°, 180° and 270° (tetradic).
Color palette generator
Pick a base color and a harmony: the palette appears as hex and HSL swatches to copy, with ready-made CSS variables.
- Clipboard
Base color
Hex code, rgb() or hsl(); transparency is ignored.
Color not recognized: enter a hex code, an rgb() or an hsl() value.
Palette
CSS variables
Was this tool useful?
How does this tool work?
A harmonious palette relies on colours placed at precise angles on the colour wheel: opposite for strong contrast, neighbouring for a soft mood, spread in a triangle for a balanced set. This generator starts from a base colour, yours or a brand's, and works out six classic harmonies ready to copy as hex, HSL or CSS variables.
Enter the base colour as hex, rgb() or hsl(), or choose it in the picker. It is converted to hue, saturation and lightness (HSL); any transparency is ignored.
For hue harmonies, saturation and lightness stay those of the base and only the hue rotates: Complementary adds the colour at 180°, Analogous the neighbours at −30° and +30°, Triadic the colours at 120° and 240°, Split complementary those at 150° and 210°, Tetradic (square) those at 90°, 180° and 270°. Monochromatic keeps hue and saturation and creates five lightness levels, from −30 to +30 points, limited to 5–95%.
Each swatch shows its hex code and HSL value, with black or white text chosen from its luminance so it stays readable. A click copies the hex code; the CSS variables block contains the whole palette as --color-1, --color-2 and so on.
How to use this tool
Choose the base colour
Type a code such as #3366FF or use the colour picker.
Select the harmony
Complementary, analogous, triadic, split complementary, tetradic or monochromatic: the palette updates at once.
Copy the colours
Click a swatch to copy its hex code, or copy the CSS variables block.
How harmonies are calculated
The base colour is converted to HSL; harmonies shift the hue by a fixed angle or shift the lightness.
Monochromatic lightness
L_k = min(95, max(5, L + λ_k))
λ is −30, −15, 0, +15 and +30 percentage points.
- H, L
- hue (degrees) and lightness (%) of the base colour
- δ_k
- hue offset of the k-th colour
- λ_k
- lightness offset of the k-th monochromatic colour
Use cases
Extend a brand colour
Find a complementary accent or neighbouring hues around the blue of a logo.
Build interface shades
Generate five lightness levels of one hue for backgrounds, borders and hover states.
Colour a chart
Get three or four clearly distinct colours for the series of a chart or a map.
Examples
Complementary and triadic harmony of a blue
225 + 180 = 405, i.e. 45°: a golden yellow. In triadic, 225 + 120 = 345° (raspberry pink) and 225 + 240 = 465, i.e. 105° (green). Saturation and lightness stay at 100% and 60%.
Input
Base colour #3366FF (hsl(225, 100%, 60%)), Complementary then Triadic harmonyResult
Complementary: #3366FF and #FFCC33; triadic: #3366FF, #FF3366 and #66FF33Monochromatic palette of the same blue
The 60% lightness becomes 30, 45, 60, 75 and 90%: two dark shades for text or buttons, two light ones for backgrounds.
Input
Base colour #3366FF, Monochromatic harmonyResult
#002699, #0039E6, #3366FF, #809FFF, #CCD9FFTips and best practices
- A highly saturated complementary palette vibrates strongly: keep the second colour for accents (buttons, links) rather than large areas.
- Start from a less saturated colour for a quieter palette: every hue harmony inherits its saturation.
- Check text contrast on each colour before using it for content, and test the palette with the colour blindness simulator.
- Harmonies are calculated on the HSL wheel, so two colours with the same HSL lightness can look lighter or darker to the eye (a yellow looks brighter than a blue).
Sources and references
- W3C, CSS Color Module Level 4 (opens in a new tab)Page in English
Frequently asked questions
How many colours does each palette contain?
Two for complementary, three for analogous, triadic and split complementary, four for tetradic and five for monochromatic. The base colour is always included.
Which harmony should I choose?
Complementary for strong contrast, analogous for a consistent mood, triadic or tetradic for several distinct colours, monochromatic for a restrained interface.
Why do all the colours share the same saturation?
Hue harmonies only rotate the hue; saturation and lightness come from the base colour, which keeps the set consistent.
Are the copied codes exact?
Yes. Each colour is calculated in HSL and converted to hex with channels rounded to whole numbers, in a format every browser accepts.
How do I use the CSS variables?
Paste the :root block into your stylesheet, then use var(--color-1), var(--color-2) and so on in your rules.
Is my colour saved or sent anywhere?
No. The palette is calculated in your browser and nothing is kept after you close the page.
Related tools
Keep going with these tools
Tools similar or complementary to this one.
Similar tools
Convert a color between HEX, RGB, and HSL with equivalent values.
Images & graphicsUse this tool
Extract a dominant color palette from an image without uploading it to a server.
Images & graphicsUse this tool
Preview an image as it may appear with different types of color vision deficiency.
Images & graphicsUse this tool
Read next
GuideBest practicesBeginner
How to Create a Color Palette From an Image
Extract dominant colors from an image, assign them useful roles, and build a coherent palette without confusing frequency with visual importance.
31 August 202619 min
GuideBest practicesBeginner
How to optimize 50 images for the Web at once
Resize a batch of images, convert them to WebP and remove metadata with one reusable Pipeline.
6 September 20262 min
TutorialBest practicesBeginner
Optimize images for the Web without losing quality
Resize, compress and choose between WebP, AVIF and other formats with a practical workflow that reduces file size without unnecessary visual loss.
30 August 20264 min
NewsFormatsIntermediate
WebP, AVIF, JPEG XL: which image formats should you choose in 2026?
WebP, AVIF and JPEG XL have different strengths. Compare compatibility, compression, transparency, HDR and fallback strategies in 2026.
30 August 20264 min