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 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.
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.
| 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.
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.
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:
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)Calculate your body mass index in lb and ft/in or kg and cm. See your WHO category, from underweight to obesity class III, and the healthy weight range.
- BMR and daily energy needs calculatorCalculate your basal metabolic rate with the Mifflin-St Jeor equation and your total daily energy needs with FAO/WHO activity levels (PAL), in kcal and kJ.
- Body Fat Calculator (U.S. Navy Method)Estimate your body fat percentage from height, neck, waist and hip measurements using the U.S. Navy equations by Hodgdon and Beckett (1984). In inches or cm.