Color Tools

Color Shades & Tones

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

HEX Color

Export Format

#6c5ce7Base Color

#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%

#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%

#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%

#6c5ce7rgb(108, 92, 231)Base

#d7e75crgb(215, 231, 92)+180°

#6c5ce7rgb(108, 92, 231)Base

#e7b25crgb(231, 178, 92)+150°

#91e75crgb(145, 231, 92)+210°

#6c5ce7rgb(108, 92, 231)Base

#e76c5crgb(231, 108, 92)+120°

#5ce76crgb(92, 231, 108)+240°

#6c5ce7rgb(108, 92, 231)Base

#e75c91rgb(231, 92, 145)+90°

#d7e75crgb(215, 231, 92)+180°

#5ce7b2rgb(92, 231, 178)+270°

Color Shades & Tones

Tints lighter

Shades darker

Tones grayer

Complementary harmony

Split-Complementary harmony

Triadic harmony

Tetradic harmony

Tints lighter

Shades darker

Tones grayer

Complementary harmony

Split-Complementary harmony

Triadic harmony

Tetradic harmony

Related Tools

Color Palette Extractor

Gradient Generator

Color Converter

CSS Box Shadow Generator

🍪 Cookie Preferences