Color Wheel

Basecolor
Hex: #757C82. Brightness: 123. Parallel 3
Hex: #757582. Brightness: 118. Parallel 4
Hex: #7B7582. Brightness: 120. Adjacent/tetrad
Hex: #827582. Brightness: 122. Triad 1
Hex: #82757C. Brightness: 122. Split complimentary 1
Hex: #827575. Brightness: 121. Complimentary
Hex: #827B75. Brightness: 124. Split complimentary 2
Hex: #828275. Brightness: 129. Triad 2
Hex: #7C8275. Brightness: 127. Adjacent/tetrad
Hex: #758275. Brightness: 125. Parallel 1
Hex: #75827B. Brightness: 125. Parallel 2
Hex: #758282. Brightness: 126.

Shades

Shade 90% black
Hex: #0C0C0D. Brightness: 12. Shade 80% black
Hex: #17191A. Brightness: 25. Shade 70% black
Hex: #232527. Brightness: 37. Shade 60% black
Hex: #2F3234. Brightness: 49. Shade 50% black
Hex: #3A3E41. Brightness: 61. Shade 40% black
Hex: #464A4E. Brightness: 73. Shade 30% black
Hex: #52575B. Brightness: 86. Shade 20% black
Hex: #5E6368. Brightness: 98. Shade 10% black
Hex: #697075. Brightness: 110. Basecolor
Hex: #757C82. Brightness: 123.

Tints

Tint 10% white
Hex: #83898E. Brightness: 136. Tint 20% white
Hex: #91969B. Brightness: 149. Tint 30% white
Hex: #9EA3A8. Brightness: 162. Tint 40% white
Hex: #ACB0B4. Brightness: 175. Tint 50% white
Hex: #BABEC0. Brightness: 189. Tint 60% white
Hex: #C8CBCD. Brightness: 202. Tint 70% white
Hex: #D6D8DA. Brightness: 216. Tint 80% white
Hex: #E3E5E6. Brightness: 229. Tint 90% white
Hex: #F1F2F2. Brightness: 242.

Saturation

Saturation 10
Hex: #757C82. Brightness: 123. Saturation 20
Hex: #687682. Brightness: 115. Saturation 30
Hex: #5B7082. Brightness: 108. Saturation 40
Hex: #4E6A82. Brightness: 100. Saturation 50
Hex: #416482. Brightness: 93. Saturation 60
Hex: #345E82. Brightness: 86. Saturation 70
Hex: #275882. Brightness: 78. Saturation 80
Hex: #1A5182. Brightness: 70. Saturation 90
Hex: #0D4B82. Brightness: 63. Saturation 100
Hex: #004582. Brightness: 55.

Gradient examples

CSS Code

.basecolor {background-color:#757C82;}

.parallel_3 {background-color:#757582;}

.parallel_4 {background-color:#7B7582;}

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

.triad_1 {background-color:#82757C;}

.split_complimentary_1 {background-color:#827575;}

.complimentary {background-color:#827B75;}

.split_complimentary_2 {background-color:#828275;}

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

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

.parallel_1 {background-color:#75827B;}

.parallel_2 {background-color:#758282;}

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

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

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

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

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

.shade_40%_black {background-color:#464A4E;}

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

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

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

.basecolor {background-color:#757C82;}

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#757C82;}

.saturation_20 {background-color:#687682;}

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

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

.saturation_50 {background-color:#416482;}

.saturation_60 {background-color:#345E82;}

.saturation_70 {background-color:#275882;}

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

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

.saturation_100 {background-color:#004582;}

.gradient1 {background-color:#757C82;
background-image:-moz-linear-gradient(top,#ACB0B4,#757C82,#52575B);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#ACB0B4),color-stop(0.5,#757C82),color-stop(1.0,#52575B));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffACB0B4',EndColorStr='#ff52575B');
}

.gradient2 {background-color:#757C82;
background-image:-moz-linear-gradient(top,#52575B,#757C82,#ACB0B4);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#52575B),color-stop(0.5,#757C82),color-stop(1.0,#ACB0B4));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff52575B',EndColorStr='#ffACB0B4');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code