Color Palette Generator
Builds a palette from a base color in six harmonies, shows HEX, RGB, and HSL codes, and exports the palette as code or PNG.
Press Space for a new random color when the cursor is outside the field.
Harmony
Click a code to copy it.
Palette code
How harmonies are built
Each color splits into hue, saturation, and lightness, and then the hue rotates around the color wheel. Saturation and lightness stay the same, and your base color goes into the palette exactly as you entered it.
- Complementary: the opposite hue, rotated by 180°.
- Analogous: neighboring hues, 30° in each direction.
- Triadic: three hues, 120° apart.
- Split-complementary: two hues next to the opposite one, at 150° and 210°.
- Tetradic: four hues, 90° apart.
- Monochromatic: one hue at different lightness levels.
Why gray has no harmony
Gray, white, and black have zero saturation, so rotating the hue changes nothing: every color in the harmony comes out the same. The generator will not repeat one color and will tell you so under the palette. For shades of gray, a monochromatic palette is the right choice.
Rate this tool
Help us get better
Tell us what was missing.
Other tools
HTML Special Characters
487 characters in twelve sections, with click-to-copy.
Visual HTML Editor
Type as in a text editor and get ready-made HTML.
HTML Color Codes
Color codes in HEX, RGB, HSL and HSB, with a contrast check
Glassmorphism CSS Generator
Frosted glass with a text readability check and a fallback
CSS to SCSS
Flat CSS becomes SCSS with nesting, and back, verified against your source.
CSS Grid Generator
A grid for three screens, with ready HTML and a block-order check
CSS Gradient Generator
Gradients without a gray middle, with a text readability check
Box Shadow Generator
Layered shadows, previewed on two backgrounds with a visibility check