Color Palette Generator
Generate monochromatic, analog, complementary, triadic, and tetradic color palettes with one click. Copy HEX, RGB, and HSL codes.
#64ADF2
H:209 S:85 L:67
#6467F2
H:239 S:85 L:67
#A864F2
H:269 S:85 L:67
#EF64F2
H:299 S:85 L:67
#64F2EF
H:179 S:85 L:67
Base Color
Color Harmony
About
This free online color palette generator builds a set of matching colors from one base color. Pick a color with the color picker or type a six-digit HEX code, then choose a color harmony, and the palette updates at once.
Six harmonies cover the usual schemes. Complementary pairs a color with the one opposite it on the color wheel. Analogous gives neighboring hues, triadic gives three evenly spaced colors, and split complementary uses a color with the two neighbors of its opposite. Tetradic gives four evenly spaced colors, and monochromatic gives five shades of one hue.
Each swatch shows its HEX code, along with hue (H), saturation (S) and lightness (L). Click a swatch to copy its code, use Copy All HEX for the full list, or use Copy CSS Variables for a :root block with one variable per color. Random Color picks a new base color when you want a fresh start.
How to use the Color Palette Generator
- 1
Choose a base color
Use the swatch next to Base Color, or type a six-digit HEX code such as #6366f1 in the HEX field. Click Random Color for a new starting point.
- 2
Pick a color harmony
Under Color Harmony, choose Complementary, Analogous, Triadic, Split Complementary, Tetradic or Monochromatic.
- 3
Read the codes
Each swatch shows its HEX code, and the line beneath it shows the H, S and L values. Click a swatch to copy its HEX code.
- 4
Copy the palette
Click Copy CSS Variables to copy the palette as :root variables, or Copy All HEX to copy the codes as one comma-separated line.
What people use it for
A color scheme for a website
Start from your brand color, choose a harmony, and copy the CSS variables into your stylesheet.
Colors for a thumbnail or title card
Pick Triadic or Split Complementary so the background, title and accent colors are related but not the same.
Shades for a chart or a dashboard
Use Monochromatic to get five lighter and darker shades of one hue, for bars, levels or a single-color theme.
Quick ideas for a poster or post
Click Random Color to see new palettes until one feels right, then copy the HEX codes.
Questions
Is the color palette generator free?
Yes. The tool is free to use.
What is a color harmony?
A color harmony is a group of colors chosen from the color wheel so that they look balanced together. Complementary, triadic and analogous are three common harmonies.
How many colors does each harmony give?
Complementary gives two colors, triadic and split complementary give three, and tetradic gives four. Analogous and monochromatic give five each.
How do I copy the palette as CSS?
Click Copy CSS Variables. The copied text is a :root block with --color-1, --color-2 and so on, one line for each color, ready to paste into a stylesheet.
What do HEX, H, S and L mean?
HEX is the six-digit code for a color, such as #6366F1. H is the hue in degrees from 0 to 360, and S (saturation) and L (lightness) run from 0 to 100.
Can I type in a color code?
Yes. Type a six-digit HEX code with a hash, such as #1e90ff, into the HEX field, and the palette updates once the code is complete.