Color Wheel

Basecolor
Hex: #7F7C80. Brightness: 125. Parallel 3
Hex: #807C7F. Brightness: 126. Parallel 4
Hex: #807C7D. Brightness: 125. Adjacent/tetrad
Hex: #807D7C. Brightness: 126. Triad 1
Hex: #807F7C. Brightness: 127. Split complimentary 1
Hex: #7E807C. Brightness: 127. Complimentary
Hex: #7D807C. Brightness: 127. Split complimentary 2
Hex: #7C807D. Brightness: 126. Triad 2
Hex: #7C807F. Brightness: 127. Adjacent/tetrad
Hex: #7C7E80. Brightness: 126. Parallel 1
Hex: #7C7D80. Brightness: 125. Parallel 2
Hex: #7D7C80. Brightness: 125.

Shades

Shade 90% black
Hex: #0D0C0D. Brightness: 12. Shade 80% black
Hex: #19191A. Brightness: 25. Shade 70% black
Hex: #262526. Brightness: 37. Shade 60% black
Hex: #333233. Brightness: 50. Shade 50% black
Hex: #403E40. Brightness: 63. Shade 40% black
Hex: #4C4A4D. Brightness: 75. Shade 30% black
Hex: #59575A. Brightness: 88. Shade 20% black
Hex: #666366. Brightness: 100. Shade 10% black
Hex: #727073. Brightness: 113. Basecolor
Hex: #7F7C80. Brightness: 125.

Tints

Tint 10% white
Hex: #8C898D. Brightness: 138. Tint 20% white
Hex: #999699. Brightness: 151. Tint 30% white
Hex: #A5A3A6. Brightness: 164. Tint 40% white
Hex: #B2B0B3. Brightness: 177. Tint 50% white
Hex: #BFBEC0. Brightness: 191. Tint 60% white
Hex: #CCCBCC. Brightness: 203. Tint 70% white
Hex: #D9D8D9. Brightness: 216. Tint 80% white
Hex: #E5E5E6. Brightness: 229. Tint 90% white
Hex: #F2F2F2. Brightness: 242.

Saturation

Saturation 10
Hex: #7C7380. Brightness: 119. Saturation 20
Hex: #796680. Brightness: 111. Saturation 30
Hex: #765980. Brightness: 102. Saturation 40
Hex: #734C80. Brightness: 94. Saturation 50
Hex: #704080. Brightness: 86. Saturation 60
Hex: #6C3380. Brightness: 77. Saturation 70
Hex: #692680. Brightness: 68. Saturation 80
Hex: #661980. Brightness: 60. Saturation 90
Hex: #630D80. Brightness: 52. Saturation 100
Hex: #600080. Brightness: 43.

Gradient examples

CSS Code

.basecolor {background-color:#7F7C80;}

.parallel_3 {background-color:#807C7F;}

.parallel_4 {background-color:#807C7D;}

.adjacent/tetrad {background-color:#807D7C;}

.triad_1 {background-color:#807F7C;}

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

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

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

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

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

.parallel_1 {background-color:#7C7D80;}

.parallel_2 {background-color:#7D7C80;}

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

.shade_80%_black {background-color:#19191A;}

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

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

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

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

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

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

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

.basecolor {background-color:#7F7C80;}

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#7C7380;}

.saturation_20 {background-color:#796680;}

.saturation_30 {background-color:#765980;}

.saturation_40 {background-color:#734C80;}

.saturation_50 {background-color:#704080;}

.saturation_60 {background-color:#6C3380;}

.saturation_70 {background-color:#692680;}

.saturation_80 {background-color:#661980;}

.saturation_90 {background-color:#630D80;}

.saturation_100 {background-color:#600080;}

.gradient1 {background-color:#7F7C80;
background-image:-moz-linear-gradient(top,#B2B0B3,#7F7C80,#59575A);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#B2B0B3),color-stop(0.5,#7F7C80),color-stop(1.0,#59575A));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffB2B0B3',EndColorStr='#ff59575A');
}

.gradient2 {background-color:#7F7C80;
background-image:-moz-linear-gradient(top,#59575A,#7F7C80,#B2B0B3);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#59575A),color-stop(0.5,#7F7C80),color-stop(1.0,#B2B0B3));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff59575A',EndColorStr='#ffB2B0B3');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code