Color Wheel

Basecolor
Hex: #847C7F. Brightness: 127. Parallel 3
Hex: #857E7D. Brightness: 128. Parallel 4
Hex: #85827D. Brightness: 130. Adjacent/tetrad
Hex: #83857D. Brightness: 131. Triad 1
Hex: #7F857D. Brightness: 130. Split complimentary 1
Hex: #7D857E. Brightness: 130. Complimentary
Hex: #7D8582. Brightness: 130. Split complimentary 2
Hex: #7D8385. Brightness: 129. Triad 2
Hex: #7D7F85. Brightness: 127. Adjacent/tetrad
Hex: #7E7D85. Brightness: 126. Parallel 1
Hex: #827D85. Brightness: 127. Parallel 2
Hex: #857D83. Brightness: 128.

Shades

Shade 90% black
Hex: #0D0C0D. Brightness: 12. Shade 80% black
Hex: #1A1919. Brightness: 25. Shade 70% black
Hex: #282526. Brightness: 38. Shade 60% black
Hex: #353233. Brightness: 51. Shade 50% black
Hex: #423E40. Brightness: 63. Shade 40% black
Hex: #4F4A4C. Brightness: 76. Shade 30% black
Hex: #5C5759. Brightness: 89. Shade 20% black
Hex: #6A6366. Brightness: 101. Shade 10% black
Hex: #777072. Brightness: 114. Basecolor
Hex: #847C7F. Brightness: 127.

Tints

Tint 10% white
Hex: #90898C. Brightness: 139. Tint 20% white
Hex: #9D9699. Brightness: 152. Tint 30% white
Hex: #A9A3A5. Brightness: 165. Tint 40% white
Hex: #B5B0B2. Brightness: 178. Tint 50% white
Hex: #C2BEBF. Brightness: 191. Tint 60% white
Hex: #CECBCC. Brightness: 204. Tint 70% white
Hex: #DAD8D9. Brightness: 217. Tint 80% white
Hex: #E6E5E5. Brightness: 229. Tint 90% white
Hex: #F3F2F2. Brightness: 242.

Saturation

Saturation 10
Hex: #85777C. Brightness: 124. Saturation 20
Hex: #856A74. Brightness: 115. Saturation 30
Hex: #855D6B. Brightness: 107. Saturation 40
Hex: #855063. Brightness: 98. Saturation 50
Hex: #85425B. Brightness: 89. Saturation 60
Hex: #853552. Brightness: 80. Saturation 70
Hex: #85284A. Brightness: 72. Saturation 80
Hex: #851B41. Brightness: 63. Saturation 90
Hex: #850D39. Brightness: 54. Saturation 100
Hex: #850031. Brightness: 45.

Gradient examples

CSS Code

.basecolor {background-color:#847C7F;}

.parallel_3 {background-color:#857E7D;}

.parallel_4 {background-color:#85827D;}

.adjacent/tetrad {background-color:#83857D;}

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

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

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

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

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

.adjacent/tetrad {background-color:#7E7D85;}

.parallel_1 {background-color:#827D85;}

.parallel_2 {background-color:#857D83;}

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

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

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

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

.shade_50%_black {background-color:#423E40;}

.shade_40%_black {background-color:#4F4A4C;}

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

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

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

.basecolor {background-color:#847C7F;}

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#85777C;}

.saturation_20 {background-color:#856A74;}

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

.saturation_40 {background-color:#855063;}

.saturation_50 {background-color:#85425B;}

.saturation_60 {background-color:#853552;}

.saturation_70 {background-color:#85284A;}

.saturation_80 {background-color:#851B41;}

.saturation_90 {background-color:#850D39;}

.saturation_100 {background-color:#850031;}

.gradient1 {background-color:#847C7F;
background-image:-moz-linear-gradient(top,#B5B0B2,#847C7F,#5C5759);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#B5B0B2),color-stop(0.5,#847C7F),color-stop(1.0,#5C5759));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffB5B0B2',EndColorStr='#ff5C5759');
}

.gradient2 {background-color:#847C7F;
background-image:-moz-linear-gradient(top,#5C5759,#847C7F,#B5B0B2);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#5C5759),color-stop(0.5,#847C7F),color-stop(1.0,#B5B0B2));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff5C5759',EndColorStr='#ffB5B0B2');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code