Color Wheel

Basecolor
Hex: #8E7C7D. Brightness: 129. Parallel 3
Hex: #8F857C. Brightness: 135. Parallel 4
Hex: #8F8E7C. Brightness: 140. Adjacent/tetrad
Hex: #868F7C. Brightness: 138. Triad 1
Hex: #7D8F7C. Brightness: 135. Split complimentary 1
Hex: #7C8F85. Brightness: 136. Complimentary
Hex: #7C8F8E. Brightness: 137. Split complimentary 2
Hex: #7C868F. Brightness: 132. Triad 2
Hex: #7C7D8F. Brightness: 127. Adjacent/tetrad
Hex: #857C8F. Brightness: 129. Parallel 1
Hex: #8E7C8F. Brightness: 132. Parallel 2
Hex: #8F7C86. Brightness: 131.

Shades

Shade 90% black
Hex: #0E0C0C. Brightness: 13. Shade 80% black
Hex: #1C1919. Brightness: 26. Shade 70% black
Hex: #2B2526. Brightness: 39. Shade 60% black
Hex: #393232. Brightness: 52. Shade 50% black
Hex: #473E3E. Brightness: 65. Shade 40% black
Hex: #554A4B. Brightness: 77. Shade 30% black
Hex: #635758. Brightness: 91. Shade 20% black
Hex: #726364. Brightness: 104. Shade 10% black
Hex: #807070. Brightness: 117. Basecolor
Hex: #8E7C7D. Brightness: 129.

Tints

Tint 10% white
Hex: #99898A. Brightness: 142. Tint 20% white
Hex: #A59697. Brightness: 155. Tint 30% white
Hex: #B0A3A4. Brightness: 167. Tint 40% white
Hex: #BBB0B1. Brightness: 179. Tint 50% white
Hex: #C6BEBE. Brightness: 192. Tint 60% white
Hex: #D2CBCB. Brightness: 205. Tint 70% white
Hex: #DDD8D8. Brightness: 217. Tint 80% white
Hex: #E8E5E5. Brightness: 230. Tint 90% white
Hex: #F4F2F2. Brightness: 243.

Saturation

Saturation 10
Hex: #8F8181. Brightness: 133. Saturation 20
Hex: #8F7274. Brightness: 123. Saturation 30
Hex: #8F6466. Brightness: 113. Saturation 40
Hex: #8F5659. Brightness: 103. Saturation 50
Hex: #8F474B. Brightness: 93. Saturation 60
Hex: #8F393D. Brightness: 83. Saturation 70
Hex: #8F2B30. Brightness: 73. Saturation 80
Hex: #8F1D22. Brightness: 64. Saturation 90
Hex: #8F0E15. Brightness: 53. Saturation 100
Hex: #8F0007. Brightness: 44.

Gradient examples

CSS Code

.basecolor {background-color:#8E7C7D;}

.parallel_3 {background-color:#8F857C;}

.parallel_4 {background-color:#8F8E7C;}

.adjacent/tetrad {background-color:#868F7C;}

.triad_1 {background-color:#7D8F7C;}

.split_complimentary_1 {background-color:#7C8F85;}

.complimentary {background-color:#7C8F8E;}

.split_complimentary_2 {background-color:#7C868F;}

.triad_2 {background-color:#7C7D8F;}

.adjacent/tetrad {background-color:#857C8F;}

.parallel_1 {background-color:#8E7C8F;}

.parallel_2 {background-color:#8F7C86;}

.shade_90%_black {background-color:#0E0C0C;}

.shade_80%_black {background-color:#1C1919;}

.shade_70%_black {background-color:#2B2526;}

.shade_60%_black {background-color:#393232;}

.shade_50%_black {background-color:#473E3E;}

.shade_40%_black {background-color:#554A4B;}

.shade_30%_black {background-color:#635758;}

.shade_20%_black {background-color:#726364;}

.shade_10%_black {background-color:#807070;}

.basecolor {background-color:#8E7C7D;}

.tint_10%_white {background-color:#99898A;}

.tint_20%_white {background-color:#A59697;}

.tint_30%_white {background-color:#B0A3A4;}

.tint_40%_white {background-color:#BBB0B1;}

.tint_50%_white {background-color:#C6BEBE;}

.tint_60%_white {background-color:#D2CBCB;}

.tint_70%_white {background-color:#DDD8D8;}

.tint_80%_white {background-color:#E8E5E5;}

.tint_90%_white {background-color:#F4F2F2;}

.saturation_10 {background-color:#8F8181;}

.saturation_20 {background-color:#8F7274;}

.saturation_30 {background-color:#8F6466;}

.saturation_40 {background-color:#8F5659;}

.saturation_50 {background-color:#8F474B;}

.saturation_60 {background-color:#8F393D;}

.saturation_70 {background-color:#8F2B30;}

.saturation_80 {background-color:#8F1D22;}

.saturation_90 {background-color:#8F0E15;}

.saturation_100 {background-color:#8F0007;}

.gradient1 {background-color:#8E7C7D;
background-image:-moz-linear-gradient(top,#BBB0B1,#8E7C7D,#635758);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#BBB0B1),color-stop(0.5,#8E7C7D),color-stop(1.0,#635758));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffBBB0B1',EndColorStr='#ff635758');
}

.gradient2 {background-color:#8E7C7D;
background-image:-moz-linear-gradient(top,#635758,#8E7C7D,#BBB0B1);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#635758),color-stop(0.5,#8E7C7D),color-stop(1.0,#BBB0B1));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff635758',EndColorStr='#ffBBB0B1');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code