Color Wheel

Basecolor
Hex: #987C7B. Brightness: 132. Parallel 3
Hex: #998B7C. Brightness: 141. Parallel 4
Hex: #98997C. Brightness: 149. Adjacent/tetrad
Hex: #89997C. Brightness: 145. Triad 1
Hex: #7C997D. Brightness: 141. Split complimentary 1
Hex: #7C998B. Brightness: 143. Complimentary
Hex: #7C9899. Brightness: 144. Split complimentary 2
Hex: #7C8999. Brightness: 135. Triad 2
Hex: #7D7C99. Brightness: 128. Adjacent/tetrad
Hex: #8B7C99. Brightness: 132. Parallel 1
Hex: #997C98. Brightness: 136. Parallel 2
Hex: #997C89. Brightness: 134.

Shades

Shade 90% black
Hex: #0F0C0C. Brightness: 13. Shade 80% black
Hex: #1E1919. Brightness: 26. Shade 70% black
Hex: #2E2525. Brightness: 40. Shade 60% black
Hex: #3D3231. Brightness: 53. Shade 50% black
Hex: #4C3E3E. Brightness: 66. Shade 40% black
Hex: #5B4A4A. Brightness: 79. Shade 30% black
Hex: #6A5756. Brightness: 93. Shade 20% black
Hex: #7A6362. Brightness: 106. Shade 10% black
Hex: #89706F. Brightness: 119. Basecolor
Hex: #987C7B. Brightness: 132.

Tints

Tint 10% white
Hex: #A28988. Brightness: 144. Tint 20% white
Hex: #AD9695. Brightness: 157. Tint 30% white
Hex: #B7A3A3. Brightness: 169. Tint 40% white
Hex: #C1B0B0. Brightness: 181. Tint 50% white
Hex: #CCBEBD. Brightness: 194. Tint 60% white
Hex: #D6CBCA. Brightness: 206. Tint 70% white
Hex: #E0D8D7. Brightness: 218. Tint 80% white
Hex: #EAE5E5. Brightness: 230. Tint 90% white
Hex: #F5F2F2. Brightness: 243.

Saturation

Saturation 10
Hex: #998A8A. Brightness: 142. Saturation 20
Hex: #997B7A. Brightness: 132. Saturation 30
Hex: #996D6B. Brightness: 122. Saturation 40
Hex: #995E5C. Brightness: 111. Saturation 50
Hex: #994F4C. Brightness: 101. Saturation 60
Hex: #99403D. Brightness: 90. Saturation 70
Hex: #99312E. Brightness: 80. Saturation 80
Hex: #99231F. Brightness: 70. Saturation 90
Hex: #99140F. Brightness: 59. Saturation 100
Hex: #990500. Brightness: 49.

Gradient examples

CSS Code

.basecolor {background-color:#987C7B;}

.parallel_3 {background-color:#998B7C;}

.parallel_4 {background-color:#98997C;}

.adjacent/tetrad {background-color:#89997C;}

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

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

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

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

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

.adjacent/tetrad {background-color:#8B7C99;}

.parallel_1 {background-color:#997C98;}

.parallel_2 {background-color:#997C89;}

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

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

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

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

.shade_50%_black {background-color:#4C3E3E;}

.shade_40%_black {background-color:#5B4A4A;}

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

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

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

.basecolor {background-color:#987C7B;}

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#998A8A;}

.saturation_20 {background-color:#997B7A;}

.saturation_30 {background-color:#996D6B;}

.saturation_40 {background-color:#995E5C;}

.saturation_50 {background-color:#994F4C;}

.saturation_60 {background-color:#99403D;}

.saturation_70 {background-color:#99312E;}

.saturation_80 {background-color:#99231F;}

.saturation_90 {background-color:#99140F;}

.saturation_100 {background-color:#990500;}

.gradient1 {background-color:#987C7B;
background-image:-moz-linear-gradient(top,#C1B0B0,#987C7B,#6A5756);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#C1B0B0),color-stop(0.5,#987C7B),color-stop(1.0,#6A5756));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffC1B0B0',EndColorStr='#ff6A5756');
}

.gradient2 {background-color:#987C7B;
background-image:-moz-linear-gradient(top,#6A5756,#987C7B,#C1B0B0);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#6A5756),color-stop(0.5,#987C7B),color-stop(1.0,#C1B0B0));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff6A5756',EndColorStr='#ffC1B0B0');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code