DevToolBoxFREE
Blog

Color Palette Generator โ€” Complementary, Analogous, Triadic

Generate beautiful color palettes with complementary, analogous, triadic, and tetradic color schemes. Export as HEX, RGB, or HSL.

Presets:

Complementary

#2563EB
rgb(37, 99, 235)
hsl(221, 83%, 53%)
1.0:1
#7154EF
rgb(113, 84, 239)
hsl(251, 83%, 63%)
2.5:1
#EBAD25
rgb(235, 173, 37)
hsl(41, 83%, 53%)
1.2:1
#F1C76B
rgb(241, 199, 107)
hsl(41, 83%, 68%)
1.2:1
#A8CA13
rgb(168, 202, 19)
hsl(71, 83%, 43%)

Analogous

#25C6EB
rgb(37, 198, 235)
hsl(191, 83%, 53%)
1.3:1
#4AA7EE
rgb(74, 167, 238)
hsl(206, 83%, 61%)
2.0:1
#2563EB
rgb(37, 99, 235)
hsl(221, 83%, 53%)
1.1:1
#4A55EE
rgb(74, 85, 238)
hsl(236, 83%, 61%)
1.4:1
#4A25EB
rgb(74, 37, 235)
hsl(251, 83%, 53%)

Triadic

#2563EB
rgb(37, 99, 235)
hsl(221, 83%, 53%)
1.9:1
#7F9DDD
rgb(127, 157, 221)
hsl(221, 58%, 68%)
1.6:1
#EB2563
rgb(235, 37, 99)
hsl(341, 83%, 53%)
1.5:1
#DD7F9D
rgb(221, 127, 157)
hsl(341, 58%, 68%)
1.8:1
#63EB25
rgb(99, 235, 37)
hsl(101, 83%, 53%)

Tetradic

#2563EB
rgb(37, 99, 235)
hsl(221, 83%, 53%)
1.4:1
#EB25C6
rgb(235, 37, 198)
hsl(311, 83%, 53%)
1.9:1
#EBAD25
rgb(235, 173, 37)
hsl(41, 83%, 53%)
1.2:1
#25EB4A
rgb(37, 235, 74)
hsl(131, 83%, 53%)
2.1:1
#A17AD3
rgb(161, 122, 211)
hsl(266, 50%, 65%)

Split-Complementary

#2563EB
rgb(37, 99, 235)
hsl(221, 83%, 53%)
1.8:1
#6B95F1
rgb(107, 149, 241)
hsl(221, 83%, 68%)
1.3:1
#EB4A25
rgb(235, 74, 37)
hsl(11, 83%, 53%)
2.8:1
#C6EB25
rgb(198, 235, 37)
hsl(71, 83%, 53%)
1.2:1
#D7C69F
rgb(215, 198, 159)
hsl(41, 42%, 73%)

Export

๐• Twitterin LinkedIn

Rate this tool

4.5 / 5 ยท 118 ratings

More Tools

๐ŸŽจColor ConverterTWTailwind CSS Color Picker๐ŸŒˆCSS Gradient Generator๐Ÿ”ฒBox Shadow Generator

Recommended

Tailwind UIBeautiful UI components

Stay Updated

Get weekly dev tips and new tool announcements.

No spam. Unsubscribe anytime.

Enjoy these free tools?

โ˜•Buy Me a Coffee

How to Use

  1. Enter or pick a base color
  2. Choose a harmony type (complementary, analogous, etc.)
  3. Preview generated palettes
  4. Click any color to copy its value
  5. Export all colors as JSON or CSS variables

Use Cases

  • Web and app UI design
  • Brand color selection
  • Data visualization coloring
  • CSS theme creation

FAQ

What color harmonies are available?
Complementary, analogous, triadic, tetradic, and split-complementary schemes.
What formats can I export?
HEX, RGB, and HSL values. You can also export as JSON or CSS custom properties.