Color Palette Generator
Generate a harmonious color palette from any base hex color. Choose from complementary, analogous, triadic, or monochromatic schemes.
Did this tool work for you?
How to use this calculator
Converts input HEX → HSL, rotates hue by scheme-specific angles, converts back to HEX. Saturation and lightness stay anchored to the base color.
- 1
Enter your base color as a 6-digit hex code (e.g. #3B82F6).
- 2
Select a color harmony scheme.
- 3
Copy the resulting hex codes into your design tool or CSS.
Frequently asked questions
What input formats does the base color accept?
Only six hexadecimal digits, with or without a leading #, in upper or lower case. "3b82f6" and "#3B82F6" both work. Three-digit shorthand such as #38F, named colors like "blue", and rgb() or hsl() strings are rejected with an error message. Expand shorthand yourself first: #38F becomes #3388FF.
How are the other colors calculated?
The base is converted from RGB to HSL (hue, saturation, lightness). For the hue-based schemes the hue is rotated by fixed angles while saturation and lightness stay exactly as in the base, then each result is converted back to hex. Complementary uses 0° and 180°, triadic 0°, 120° and 240°, tetradic 0°, 90°, 180° and 270°, split-complementary 0°, 150° and 210°, and analogous −60°, −30°, 0°, +30° and +60°.
Why does a gray base give me the same color three times?
A gray has zero saturation, so hue has no visible effect. #808080 with a triadic scheme returns #808080 for all three colors. The same applies to pure black and white. Pick a base with some color in it, or use the monochromatic scheme, which changes lightness instead of hue.
How does the monochromatic scheme choose its five shades?
It keeps hue and saturation and shifts lightness by +15%, +30%, −15% and −30% from the base, with the base itself listed first. The four shifted values are held between 5% and 95% lightness, so a very light or very dark base can produce shades that look identical. A white base, for example, returns #FFFFFF, #F2F2F2, #F2F2F2, #D9D9D9 and #B3B3B3.
Will the colors in a triadic or tetradic palette look equally bright?
No. HSL lightness is a mathematical value, not how bright a color looks to the eye. With the same saturation and lightness, a yellow-green sits visibly lighter than a blue. The tool does not correct for this and does not check text contrast, so test any pairing you intend to use for text and backgrounds with a contrast checker.
In the analogous palette, which color is the base?
The third one, in the middle. The five colors run from −60° to +60° around the base hue, and the entry at 0° is labeled Base and highlighted. The other four are labeled by position, so they read Color 1, Color 2, Base, Color 4 and Color 5.
Does it name the colors or give CSS, RGB or HSL values?
No. The output is just hex codes in uppercase, such as #F6AF3B. Convert them elsewhere if you need rgb() or hsl() notation. There is also no tint ramp like a 50 to 900 scale; the monochromatic option gives five lightness steps only.
Color harmonies from one hex code: the six schemes compared
What each scheme returns
Every scheme starts from the base color and keeps its saturation and lightness, rotating only the hue except in the monochromatic option. The table shows the real output for the base #3B82F6 (a medium blue). The hue-based results are all equally vivid as the base because saturation is untouched; that makes them consistent, but it also means the palette can feel loud if the base is highly saturated.
| Scheme | Hue offsets | Colors returned |
|---|---|---|
| Complementary | 0°, 180° | #3B82F6, #F6AF3B |
| Analogous | −60°, −30°, 0°, +30°, +60° | #3BF6AF, #3BDFF6, #3B82F6, #523BF6, #AF3BF6 |
| Triadic | 0°, 120°, 240° | #3B82F6, #F63B82, #82F63B |
| Tetradic | 0°, 90°, 180°, 270° | #3B82F6, #F63BDF, #F6AF3B, #3BF652 |
| Split-complementary | 0°, 150°, 210° | #3B82F6, #F6523B, #DFF63B |
| Monochromatic | lightness ±15%, ±30% | #3B82F6, #84B1F9, #CDDFFD, #0A59DA, #073B91 |
Worked example: a crimson brand color
Entering #E11D48 (a strong crimson) with the triadic scheme returns #E11D48, #48E11D and #1D48E1: the original red, a green and a blue, each spaced 120° around the wheel and carrying the same saturation and lightness. Because all three are equally intense, using them in equal amounts would look garish. A common approach is to give one the dominant role and use the other two sparingly, perhaps for charts or status colors.
Worked example: when the result barely changes
A neutral base shows the limits of hue rotation. #808080 with the triadic scheme gives #808080 three times, because a gray has no saturation for the rotation to act on. A white base with the monochromatic scheme returns #FFFFFF, #F2F2F2, #F2F2F2, #D9D9D9 and #B3B3B3: the lighter shades cannot go above 95% lightness, so two of them collapse into the same value. For palettes around white, black or gray, start from a tinted color instead.
Choosing between schemes
Complementary pairs sit opposite each other and give the strongest contrast, which suits an accent against a brand color. Analogous neighbours blend smoothly and suit backgrounds and gradients. Triadic and tetradic palettes supply more distinct hues for data visualisation, while split-complementary keeps the contrast of a complementary pair with a little more variety. Monochromatic gives light and dark steps for hover states and surfaces.
Limits worth knowing
The tool works in HSL, which is simple but not perceptually uniform, so equal numbers do not guarantee equal apparent brightness. It does not test contrast ratios or color-blind safety, and it will not name or sort colors. Use the output as a starting set, then adjust lightness by hand and check text and background pairs before they go into a design.
Learn more from an authoritative source:
WikipediaUsername Generator
Generate unique, creative usernames from your name or keyword. Get 10 username suggestions with different styles — social media, gaming, professional.
Fake Data Generator
Generate realistic fake person data for testing and development: name, email, phone, address, date of birth, and more. Safe, randomised, non-real data.
PIN & OTP Generator
Generate secure random PINs, OTPs, and numeric codes of any length. Useful for testing authentication flows, generating temporary passwords, and creating access codes.
Name Generator
Generate random names for babies, characters, businesses, or projects. Choose from real names by origin or creative fantasy/sci-fi name styles.
Hash Generator
Generate MD5, SHA-1, and SHA-256 style hashes from any text input. Useful for checksums, data integrity verification, and learning about hashing.
Random Quote Generator
Get an inspiring, funny, or wise random quote from famous thinkers, leaders, and entertainers. Filter by category.
Results are estimates for informational purposes only and do not constitute professional financial, medical, legal, or technical advice. Read full disclaimer →