Color Wheel

Basecolor
Hex: #7A7C81. Brightness: 124. Parallel 3
Hex: #7D7C82. Brightness: 125. Parallel 4
Hex: #807C82. Brightness: 126. Adjacent/tetrad
Hex: #827C81. Brightness: 126. Triad 1
Hex: #827C7D. Brightness: 126. Split complimentary 1
Hex: #827D7C. Brightness: 126. Complimentary
Hex: #82807C. Brightness: 128. Split complimentary 2
Hex: #81827C. Brightness: 129. Triad 2
Hex: #7D827C. Brightness: 128. Adjacent/tetrad
Hex: #7C827D. Brightness: 128. Parallel 1
Hex: #7C8280. Brightness: 128. Parallel 2
Hex: #7C8182. Brightness: 128.

Shades

Shade 90% black
Hex: #0C0C0D. Brightness: 12. Shade 80% black
Hex: #18191A. Brightness: 25. Shade 70% black
Hex: #252527. Brightness: 37. Shade 60% black
Hex: #313234. Brightness: 50. Shade 50% black
Hex: #3D3E40. Brightness: 62. Shade 40% black
Hex: #494A4D. Brightness: 74. Shade 30% black
Hex: #55575A. Brightness: 87. Shade 20% black
Hex: #626367. Brightness: 99. Shade 10% black
Hex: #6E7074. Brightness: 112. Basecolor
Hex: #7A7C81. Brightness: 124.

Tints

Tint 10% white
Hex: #87898E. Brightness: 137. Tint 20% white
Hex: #95969A. Brightness: 150. Tint 30% white
Hex: #A2A3A7. Brightness: 163. Tint 40% white
Hex: #AFB0B3. Brightness: 176. Tint 50% white
Hex: #BCBEC0. Brightness: 190. Tint 60% white
Hex: #CACBCD. Brightness: 203. Tint 70% white
Hex: #D7D8D9. Brightness: 216. Tint 80% white
Hex: #E4E5E6. Brightness: 229. Tint 90% white
Hex: #F2F2F2. Brightness: 242.

Saturation

Saturation 10
Hex: #757982. Brightness: 121. Saturation 20
Hex: #686F82. Brightness: 111. Saturation 30
Hex: #5B6682. Brightness: 102. Saturation 40
Hex: #4E5D82. Brightness: 93. Saturation 50
Hex: #415382. Brightness: 83. Saturation 60
Hex: #344A82. Brightness: 74. Saturation 70
Hex: #274182. Brightness: 65. Saturation 80
Hex: #1A3782. Brightness: 55. Saturation 90
Hex: #0D2E82. Brightness: 46. Saturation 100
Hex: #002582. Brightness: 37.

Gradient examples

CSS Code

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

.parallel_3 {background-color:#7D7C82;}

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

.adjacent/tetrad {background-color:#827C81;}

.triad_1 {background-color:#827C7D;}

.split_complimentary_1 {background-color:#827D7C;}

.complimentary {background-color:#82807C;}

.split_complimentary_2 {background-color:#81827C;}

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

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

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

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

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

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

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

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

.shade_50%_black {background-color:#3D3E40;}

.shade_40%_black {background-color:#494A4D;}

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

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

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

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

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#757982;}

.saturation_20 {background-color:#686F82;}

.saturation_30 {background-color:#5B6682;}

.saturation_40 {background-color:#4E5D82;}

.saturation_50 {background-color:#415382;}

.saturation_60 {background-color:#344A82;}

.saturation_70 {background-color:#274182;}

.saturation_80 {background-color:#1A3782;}

.saturation_90 {background-color:#0D2E82;}

.saturation_100 {background-color:#002582;}

.gradient1 {background-color:#7A7C81;
background-image:-moz-linear-gradient(top,#AFB0B3,#7A7C81,#55575A);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#AFB0B3),color-stop(0.5,#7A7C81),color-stop(1.0,#55575A));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffAFB0B3',EndColorStr='#ff55575A');
}

.gradient2 {background-color:#7A7C81;
background-image:-moz-linear-gradient(top,#55575A,#7A7C81,#AFB0B3);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#55575A),color-stop(0.5,#7A7C81),color-stop(1.0,#AFB0B3));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff55575A',EndColorStr='#ffAFB0B3');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code