DevToolBoxGRATIS
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

Beoordeel deze tool

4.5 / 5 Β· 118 beoordelingen

More Tools

🎨Color ConverterTWTailwind CSS Color Picker🌈CSS Gradient GeneratorπŸ”²Box Shadow Generator

Recommended

Tailwind UIBeautiful UI components

Blijf op de hoogte

Ontvang wekelijkse dev-tips en nieuwe tools.

Geen spam. Altijd opzegbaar.

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.