Queldrex
All Tools
Free Tool · Design

Color Palette Generator

Enter any base color and instantly generate monochromatic, complementary, analogous, and triadic palettes. Click any swatch to copy the hex code.

Hex color

HSL: 190° 100% 51%

Try a preset:

Monochromatic

Complementary

Analogous

Triadic

Shades

CSS Variables (Shades)
:root {
  --color-100: #e7fafe;
  --color-200: #9eebfa;
  --color-300: #55dbf6;
  --color-400: #17b0cf;
  --color-500: #0d6273;
}

All color math runs in your browser. Click any swatch to copy its hex code.

How It Works

Generates harmonious color palettes using HSL color theory — all in your browser.

01
Pick a base color
Enter any hex code or use the color picker. Use your brand primary color, logo color, or any starting point.
02
Color math in HSL
Hex is converted to HSL. Complementary = +180° hue. Analogous = ±30°. Triadic = ±120°. Shades vary L% only.
03
Copy as CSS
Click any swatch to copy the hex code. Or export the full palette as CSS custom properties with one click.

Example — base color #06d6ff (Queldrex cyan)

Complementary
#06d6ff
#ff7306
Analogous
#0641ff
#06d6ff
#06ffa5
Triadic
#06d6ff
#ff0666
#66ff06