Color Wheel

Basecolor
Hex: #9D7C7A. Brightness: 134. Parallel 3
Hex: #9E8E7B. Brightness: 145. Parallel 4
Hex: #9C9E7B. Brightness: 153. Adjacent/tetrad
Hex: #8B9E7B. Brightness: 148. Triad 1
Hex: #7B9E7D. Brightness: 144. Split complimentary 1
Hex: #7B9E8E. Brightness: 146. Complimentary
Hex: #7B9C9E. Brightness: 146. Split complimentary 2
Hex: #7B8B9E. Brightness: 136. Triad 2
Hex: #7D7B9E. Brightness: 128. Adjacent/tetrad
Hex: #8E7B9E. Brightness: 133. Parallel 1
Hex: #9E7B9C. Brightness: 137. Parallel 2
Hex: #9E7B8B. Brightness: 135.

Shades

Shade 90% black
Hex: #100C0C. Brightness: 13. Shade 80% black
Hex: #1F1918. Brightness: 27. Shade 70% black
Hex: #2F2525. Brightness: 40. Shade 60% black
Hex: #3F3231. Brightness: 54. Shade 50% black
Hex: #4E3E3D. Brightness: 67. Shade 40% black
Hex: #5E4A49. Brightness: 80. Shade 30% black
Hex: #6E5755. Brightness: 94. Shade 20% black
Hex: #7E6362. Brightness: 107. Shade 10% black
Hex: #8D706E. Brightness: 120. Basecolor
Hex: #9D7C7A. Brightness: 134.

Tints

Tint 10% white
Hex: #A78987. Brightness: 146. Tint 20% white
Hex: #B19695. Brightness: 158. Tint 30% white
Hex: #BAA3A2. Brightness: 170. Tint 40% white
Hex: #C4B0AF. Brightness: 182. Tint 50% white
Hex: #CEBEBC. Brightness: 195. Tint 60% white
Hex: #D8CBCA. Brightness: 207. Tint 70% white
Hex: #E2D8D7. Brightness: 219. Tint 80% white
Hex: #EBE5E4. Brightness: 231. Tint 90% white
Hex: #F5F2F2. Brightness: 243.

Saturation

Saturation 10
Hex: #9E8F8E. Brightness: 147. Saturation 20
Hex: #9E807E. Brightness: 137. Saturation 30
Hex: #9E716F. Brightness: 126. Saturation 40
Hex: #9E625F. Brightness: 116. Saturation 50
Hex: #9E534F. Brightness: 105. Saturation 60
Hex: #9E443F. Brightness: 94. Saturation 70
Hex: #9E352F. Brightness: 84. Saturation 80
Hex: #9E2620. Brightness: 73. Saturation 90
Hex: #9E17010. Brightness: 63. Saturation 100
Hex: #9E0800. Brightness: 52.

Gradient examples

CSS Code

.basecolor {background-color:#9D7C7A;}

.parallel_3 {background-color:#9E8E7B;}

.parallel_4 {background-color:#9C9E7B;}

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

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

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

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

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

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

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

.parallel_1 {background-color:#9E7B9C;}

.parallel_2 {background-color:#9E7B8B;}

.shade_90%_black {background-color:#100C0C;}

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

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

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

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

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

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

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

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

.basecolor {background-color:#9D7C7A;}

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#9E8F8E;}

.saturation_20 {background-color:#9E807E;}

.saturation_30 {background-color:#9E716F;}

.saturation_40 {background-color:#9E625F;}

.saturation_50 {background-color:#9E534F;}

.saturation_60 {background-color:#9E443F;}

.saturation_70 {background-color:#9E352F;}

.saturation_80 {background-color:#9E2620;}

.saturation_90 {background-color:#9E17010;}

.saturation_100 {background-color:#9E0800;}

.gradient1 {background-color:#9D7C7A;
background-image:-moz-linear-gradient(top,#C4B0AF,#9D7C7A,#6E5755);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#C4B0AF),color-stop(0.5,#9D7C7A),color-stop(1.0,#6E5755));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffC4B0AF',EndColorStr='#ff6E5755');
}

.gradient2 {background-color:#9D7C7A;
background-image:-moz-linear-gradient(top,#6E5755,#9D7C7A,#C4B0AF);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#6E5755),color-stop(0.5,#9D7C7A),color-stop(1.0,#C4B0AF));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff6E5755',EndColorStr='#ffC4B0AF');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code