Color Tools

Color Shades & Tones

Enter a color and generate tints, shades, tones, and color harmonies. Export as CSS variables, Tailwind config, or SCSS.

#6c5ce7Base Color

Tints lighter

#796be9rgb(121, 107, 233)Tint 10%
#877aebrgb(135, 122, 235)Tint 20%
#9488eergb(148, 136, 238)Tint 30%
#a197f0rgb(161, 151, 240)Tint 40%
#afa6f2rgb(175, 166, 242)Tint 50%
#bcb5f4rgb(188, 181, 244)Tint 60%
#cac4f6rgb(202, 196, 246)Tint 70%
#d7d3f8rgb(215, 211, 248)Tint 80%
#e4e1fbrgb(228, 225, 251)Tint 90%
#f2f0fdrgb(242, 240, 253)Tint 100%

Shades darker

#6254d2rgb(98, 84, 210)Shade 10%
#584bbdrgb(88, 75, 189)Shade 20%
#4f43a8rgb(79, 67, 168)Shade 30%
#453b93rgb(69, 59, 147)Shade 40%
#3b327ergb(59, 50, 126)Shade 50%
#312a69rgb(49, 42, 105)Shade 60%
#272154rgb(39, 33, 84)Shade 70%
#1d193frgb(29, 25, 63)Shade 80%
#14112argb(20, 17, 42)Shade 90%
#0a0815rgb(10, 8, 21)Shade 100%

Tones grayer

#6e5fdergb(110, 95, 222)Tone 10%
#7063d4rgb(112, 99, 212)Tone 20%
#7166cbrgb(113, 102, 203)Tone 30%
#7369c2rgb(115, 105, 194)Tone 40%
#756cb8rgb(117, 108, 184)Tone 50%
#7770afrgb(119, 112, 175)Tone 60%
#7973a5rgb(121, 115, 165)Tone 70%
#7b769crgb(123, 118, 156)Tone 80%
#7c7993rgb(124, 121, 147)Tone 90%
#7e7d89rgb(126, 125, 137)Tone 100%

Complementary harmony

#6c5ce7rgb(108, 92, 231)Base
#d7e75crgb(215, 231, 92)+180°

Split-Complementary harmony

#6c5ce7rgb(108, 92, 231)Base
#e7b25crgb(231, 178, 92)+150°
#91e75crgb(145, 231, 92)+210°

Triadic harmony

#6c5ce7rgb(108, 92, 231)Base
#e76c5crgb(231, 108, 92)+120°
#5ce76crgb(92, 231, 108)+240°

Tetradic harmony

#6c5ce7rgb(108, 92, 231)Base
#e75c91rgb(231, 92, 145)+90°
#d7e75crgb(215, 231, 92)+180°
#5ce7b2rgb(92, 231, 178)+270°