Color palette generator
Enter a base color, choose a harmony scheme and see the swatches at once. Copy a single HEX code or the whole palette as CSS custom properties.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Type a HEX code or pick a color with the color picker.
- Choose a harmony scheme from the list.
- Press Copy next to a swatch for one code, or copy the CSS variables block for the whole palette.
How it works
The tool converts the base color from RGB to HSL (hue, saturation, lightness) and rotates the hue. For example #3366cc is hsl(220, 60%, 50%). Its complement is 180° away, hsl(40, 60%, 50%), which is #cc9933. Rotated colors are rounded to the nearest whole RGB value.
Example
A pure red #ff0000 in the triadic scheme gives #ff0000, #00ff00 and #0000ff. In the split-complementary scheme it gives red plus #00ff80 and #0080ff, the two hues on either side of cyan.
Tips
- Use one color from the scheme as the main color and the rest as accents; equal use of all of them looks busy.
- Analogous palettes feel calm, complementary ones feel energetic.
- Name the variables for their role (
--brand, --accent) after you paste them.
Frequently asked questions
How are the colors calculated?
The base color is converted to HSL. Harmony schemes rotate the hue by fixed angles on the color wheel and keep saturation and lightness, so every color has the same vividness as the base. The first swatch of each scheme is your base color itself.
What is the difference between triadic and tetradic?
Triadic uses three hues 120° apart, which gives a balanced but lively set. Tetradic here uses four hues at 0°, 60°, 180° and 240°, a rectangle on the wheel, so it has two complementary pairs and needs more care to keep balanced.
How does the monochromatic scheme work?
It keeps the hue and saturation of your base color and sets the HSL lightness to 20, 35, 50, 65 and 80 percent. The base itself is not in the list unless its lightness is one of those values.
Are the palettes guaranteed to have enough contrast?
No. Harmony describes hue relationships, not readability. Check any text and background pair with the contrast checker before you use it.