Color palette generator
Enter a base color as HEX, RGB or HSL or pick one with the color picker, then choose a color harmony. The color palette generator rotates the hue around the HSL color wheel and shows each color as a swatch with HEX, RGB and HSL values ready to copy.
Source: CSS Color 4, § 7, W3C – CSS Color Module Level 4: HSL colors. Updated: .
How it is calculated
How the color harmonies are built
The generator converts the base color to the HSL model (hue H in degrees, saturation S and lightness L in percent, as defined in CSS Color Module Level 4). For each harmony only the hue is rotated; saturation and lightness stay the same. Each color is then converted back to sRGB and rounded to whole values from 0 to 255.
How to create a color palette
- Enter a base color as HEX, RGB or HSL, or pick one with the color picker.
- Choose a color harmony, such as complementary, analogous, triadic or monochromatic.
- Copy the colors with their HEX, RGB and HSL values.
Example: rotating the blue hsl(217, 91%, 60%) by 180° on the color wheel gives the complementary color hsl(37, 91%, 60%) – a warm orange, about #F6AF3C.
| Harmony | Hue rotation | Colors |
|---|---|---|
| Complementary | 0°, 180° | 2 |
| Analogous | −30°, 0°, +30° | 3 |
| Triadic | 0°, 120°, 240° | 3 |
| Split-complementary | 0°, 150°, 210° | 3 |
| Tetradic (rectangle) | 0°, 60°, 180°, 240° | 4 |
| Square | 0°, 90°, 180°, 270° | 4 |
| Monochrome | no rotation; lightness in 5 steps | 5 |
Example: pure red #FF0000 has H = 0°, S = 100%, L = 50%. Rotated by 180° it becomes H = 180° – that is cyan #00FFFF, its complementary color. A triadic palette adds 120° (green #00FF00) and 240° (blue #0000FF).
Monochrome palette
With “Monochrome” the hue stays the same. Lightness moves in two equal steps toward black and two steps toward white. For the default color #3B82F6 (L ≈ 60%) the steps land at roughly 20%, 40%, 60%, 73% and 87%.
Readable text on the swatches
The label on each swatch is black or white – whichever gives the higher contrast according to the WCAG relative luminance formula. That way the text always reaches at least 4.58:1. To check whether two colors from your palette work together as text and background, use the contrast checker.
Limitations
HSL is a simple geometric model, not a perceptually uniform one: at the same L, yellow looks much lighter than blue. Treat the calculated harmonies as a starting point and fine-tune by eye. Grays have no hue, so rotating them returns the same color.
More color tools: convert values with the color converter, check readability with the contrast checker and grab a color from a photo with the image color picker.
Frequently asked questions
What is the complementary color of blue?
It sits 180° opposite on the HSL color wheel. For blue #0000FF (H = 240°) that is yellow #FFFF00 (H = 60°); for #3B82F6 (H ≈ 217°) it is an orange around #F6AF3B.
Which input formats does the generator accept?
HEX with 3, 4, 6 or 8 digits (with or without #), rgb() and rgba(), hsl() and hsla(), hsv()/hsb(), hwb() and three plain numbers such as “59, 130, 246” (read as RGB). Both the comma and the space syntax from CSS Color 4 work.
How do I use the colors in CSS or a design app?
Each swatch has a copy button for its HEX value. “Copy as CSS variables” puts a :root block with --farbe-1, --farbe-2 … on your clipboard. RGB and HSL values are listed in the table below.
Why do some harmonies look unbalanced?
HSL measures lightness purely mathematically. At the same L value, yellow and cyan look much brighter than blue or violet. Adjust the lightness of individual colors if needed, or start from a less saturated base color.
Which colors go well together?
Colors at fixed distances on the color wheel look harmonious: complementary (180°) for strong contrast, analogous (neighboring hues) for calm palettes, triadic (120° apart) for balanced colorful combinations.
Sources and legal basis
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
As of: · Editorial policy
Related tools
- Color converter: HEX, RGB, HSL, HSV, CMYKConvert color codes: HEX to RGB, RGB to HEX, HSL, HSV, HWB and CMYK – type any format or use the color picker and copy the result, right in your browser.
- Color contrast checker (WCAG 2.2)Check the contrast between text and background colors: WCAG 2.2 contrast ratio with AA/AAA ratings for normal text, large text and UI components.
- Color picker from image (eyedropper)Get color codes from any image: open a photo, click a spot and copy the HEX, RGB or HSL value – plus the main colors. No upload, it all stays in your browser.
- BMI calculator (WHO categories)BMI calculator in lb and ft/in or kg and cm: your body mass index with WHO category on a colour scale, healthy weight range for your height and BMI Prime.
- Calorie CalculatorCalorie calculator: enter age, sex, height, weight, activity and a weekly weight goal to get your daily calories for losing, keeping or gaining weight.
- Mayan calendar converterMayan calendar converter: turn any date into the Long Count, the Tzolk’in day and the Haab’ date, or a Long Count back into our calendar – GMT correlation.
- Audiobook speed calculatorAudiobook speed calculator: enter the length and playback speed to see how long the book takes at 1.25×, 1.5× or 2×, the time you save and days to finish.
- Vitamin D: IU to mcg converterConvert vitamin D from IU to mcg and back: 1 mcg = 40 IU, so 1,000 IU = 25 mcg. With the daily intakes and upper limits for each age from MedlinePlus.
- Wilks calculator with DOTS and IPF GL pointsWilks calculator for powerlifting: enter bodyweight and total to get Wilks, DOTS and IPF GL points side by side – classic, equipped and bench only.