Color Palette Generator

Q: What color formats can I paste in?

HEX (#RGB, #RRGGBB), rgb()/rgba(), hsl()/hsla(), and oklch(). Invalid input shows an inline error instead of guessing a color.

Q: What is the 50–950 tonal scale?

It is a design-system style ramp that keeps your base hue and saturation while stepping lightness from very light (50) to very dark (950), similar to Tailwind's numbered color shades. It is handy for building consistent UI color tokens from one brand color.

Q: How are the complementary, analogous, and triadic colors chosen?

They are hue rotations of your base color on the HSL color wheel: complementary is +180°, analogous is ±30°, and triadic is +120° and +240°. Saturation and lightness are preserved so the harmony stays balanced.

Q: Is my color sent to a server?

No. All parsing, mixing, and hue math runs locally in your browser with plain JavaScript — nothing is uploaded.

Enter a base color as HEX, rgb(), or hsl() to generate a tonal scale, tints and shades, and hue-based color harmonies. Click any copy button to grab the hex value. Everything is computed locally in your browser.

Base color

Examples

Tonal scale

#f0f6fe

#e2ecfe

100

#bbd3fc

200

#8ab4fa

300

#5995f7

400

#2876f5

500

#0a5ce0

600

#094cb9

700

#073c92

800

#052c6b

900

#031c44

950

Tints

#5c97f8

17% lighter

#7cacf9

33% lighter

#9dc1fb

50% lighter

#bed5fc

67% lighter

#deeafe

83% lighter

Shades

#316ccd

17% darker

#2757a4

33% darker

#1e417b

50% darker

#142b52

67% darker

#0a1629

83% darker

Complementary

#3b82f6

Base

#f6af3b

+180°

Analogous

#3bdff6

-30°

#3b82f6

Base

#523bf6

+30°

Triadic

#3b82f6

Base

#f63b82

+120°

#82f63b

+240°

Color Palette Generator

FAQ

What color formats can I paste in?

What is the 50–950 tonal scale?

How are the complementary, analogous, and triadic colors chosen?

Is my color sent to a server?

See also