Color Wheel

Basecolor
Hex: #937C7C. Brightness: 131. Parallel 3
Hex: #94887C. Brightness: 138. Parallel 4
Hex: #94947C. Brightness: 145. Adjacent/tetrad
Hex: #88947C. Brightness: 142. Triad 1
Hex: #7C947C. Brightness: 138. Split complimentary 1
Hex: #7C9488. Brightness: 139. Complimentary
Hex: #7C9494. Brightness: 141. Split complimentary 2
Hex: #7C8894. Brightness: 134. Triad 2
Hex: #7C7C94. Brightness: 127. Adjacent/tetrad
Hex: #887C94. Brightness: 130. Parallel 1
Hex: #947C94. Brightness: 134. Parallel 2
Hex: #947C88. Brightness: 133.

Shades

Shade 90% black
Hex: #0F0C0C. Brightness: 13. Shade 80% black
Hex: #1D1919. Brightness: 26. Shade 70% black
Hex: #2C2525. Brightness: 39. Shade 60% black
Hex: #3B3232. Brightness: 53. Shade 50% black
Hex: #4A3E3E. Brightness: 66. Shade 40% black
Hex: #584A4A. Brightness: 78. Shade 30% black
Hex: #675757. Brightness: 92. Shade 20% black
Hex: #766363. Brightness: 105. Shade 10% black
Hex: #847070. Brightness: 118. Basecolor
Hex: #937C7C. Brightness: 131.

Tints

Tint 10% white
Hex: #9E8989. Brightness: 143. Tint 20% white
Hex: #A99696. Brightness: 156. Tint 30% white
Hex: #B3A3A3. Brightness: 168. Tint 40% white
Hex: #BEB0B0. Brightness: 180. Tint 50% white
Hex: #C9BEBE. Brightness: 193. Tint 60% white
Hex: #D4CBCB. Brightness: 206. Tint 70% white
Hex: #DFD8D8. Brightness: 218. Tint 80% white
Hex: #E9E5E5. Brightness: 230. Tint 90% white
Hex: #F4F2F2. Brightness: 243.

Saturation

Saturation 10
Hex: #948585. Brightness: 137. Saturation 20
Hex: #947677. Brightness: 127. Saturation 30
Hex: #946868. Brightness: 117. Saturation 40
Hex: #94595A. Brightness: 107. Saturation 50
Hex: #944A4B. Brightness: 96. Saturation 60
Hex: #943B3D. Brightness: 86. Saturation 70
Hex: #942C2E. Brightness: 75. Saturation 80
Hex: #941E20. Brightness: 66. Saturation 90
Hex: #940F11. Brightness: 55. Saturation 100
Hex: #940002. Brightness: 44.

Gradient examples

CSS Code

.basecolor {background-color:#937C7C;}

.parallel_3 {background-color:#94887C;}

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

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

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

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

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

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

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

.adjacent/tetrad {background-color:#887C94;}

.parallel_1 {background-color:#947C94;}

.parallel_2 {background-color:#947C88;}

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

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

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

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

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

.shade_40%_black {background-color:#584A4A;}

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

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

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

.basecolor {background-color:#937C7C;}

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#948585;}

.saturation_20 {background-color:#947677;}

.saturation_30 {background-color:#946868;}

.saturation_40 {background-color:#94595A;}

.saturation_50 {background-color:#944A4B;}

.saturation_60 {background-color:#943B3D;}

.saturation_70 {background-color:#942C2E;}

.saturation_80 {background-color:#941E20;}

.saturation_90 {background-color:#940F11;}

.saturation_100 {background-color:#940002;}

.gradient1 {background-color:#937C7C;
background-image:-moz-linear-gradient(top,#BEB0B0,#937C7C,#675757);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#BEB0B0),color-stop(0.5,#937C7C),color-stop(1.0,#675757));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffBEB0B0',EndColorStr='#ff675757');
}

.gradient2 {background-color:#937C7C;
background-image:-moz-linear-gradient(top,#675757,#937C7C,#BEB0B0);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#675757),color-stop(0.5,#937C7C),color-stop(1.0,#BEB0B0));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff675757',EndColorStr='#ffBEB0B0');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code