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

Nilai alat ini

4.5 / 5 ยท 118 penilaian

Alat Lainnya

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

Recommended

Tailwind UIBeautiful UI components

Tetap Update

Dapatkan tips dev mingguan dan tool baru.

Tanpa spam. Berhenti kapan saja.

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.