Color Wheel

Basecolor
Hex: #707C83. Brightness: 121. Parallel 3
Hex: #6F7182. Brightness: 114. Parallel 4
Hex: #766F82. Brightness: 115. Adjacent/tetrad
Hex: #7F6F82. Brightness: 118. Triad 1
Hex: #826F7B. Brightness: 118. Split complimentary 1
Hex: #826F71. Brightness: 117. Complimentary
Hex: #82766F. Brightness: 121. Split complimentary 2
Hex: #82806F. Brightness: 127. Triad 2
Hex: #7B826F. Brightness: 126. Adjacent/tetrad
Hex: #71826F. Brightness: 123. Parallel 1
Hex: #6F8276. Brightness: 123. Parallel 2
Hex: #6F8280. Brightness: 124.

Shades

Shade 90% black
Hex: #0B0C0D. Brightness: 12. Shade 80% black
Hex: #16191A. Brightness: 24. Shade 70% black
Hex: #222527. Brightness: 36. Shade 60% black
Hex: #2D3234. Brightness: 49. Shade 50% black
Hex: #383E42. Brightness: 61. Shade 40% black
Hex: #434A4F. Brightness: 72. Shade 30% black
Hex: #4E575C. Brightness: 85. Shade 20% black
Hex: #5A6369. Brightness: 97. Shade 10% black
Hex: #657076. Brightness: 109. Basecolor
Hex: #707C83. Brightness: 121.

Tints

Tint 10% white
Hex: #7E898F. Brightness: 134. Tint 20% white
Hex: #8D969C. Brightness: 148. Tint 30% white
Hex: #9BA3A8. Brightness: 161. Tint 40% white
Hex: #A9B0B5. Brightness: 174. Tint 50% white
Hex: #B8BEC1. Brightness: 189. Tint 60% white
Hex: #C6CBCD. Brightness: 202. Tint 70% white
Hex: #D4D8DA. Brightness: 215. Tint 80% white
Hex: #E2E5E6. Brightness: 228. Tint 90% white
Hex: #F1F2F3. Brightness: 242.

Saturation

Saturation 10
Hex: #757D82. Brightness: 123. Saturation 20
Hex: #687982. Brightness: 117. Saturation 30
Hex: #5B7482. Brightness: 110. Saturation 40
Hex: #4E6F82. Brightness: 103. Saturation 50
Hex: #416A82. Brightness: 96. Saturation 60
Hex: #346582. Brightness: 90. Saturation 70
Hex: #276182. Brightness: 83. Saturation 80
Hex: #1A5C82. Brightness: 77. Saturation 90
Hex: #0D5782. Brightness: 70. Saturation 100
Hex: #005282. Brightness: 63.

Gradient examples

CSS Code

.basecolor {background-color:#707C83;}

.parallel_3 {background-color:#6F7182;}

.parallel_4 {background-color:#766F82;}

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

.triad_1 {background-color:#826F7B;}

.split_complimentary_1 {background-color:#826F71;}

.complimentary {background-color:#82766F;}

.split_complimentary_2 {background-color:#82806F;}

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

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

.parallel_1 {background-color:#6F8276;}

.parallel_2 {background-color:#6F8280;}

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

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

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

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

.shade_50%_black {background-color:#383E42;}

.shade_40%_black {background-color:#434A4F;}

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

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

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

.basecolor {background-color:#707C83;}

.tint_10%_white {background-color:#7E898F;}

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

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

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

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

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

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

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

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

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

.saturation_20 {background-color:#687982;}

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

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

.saturation_50 {background-color:#416A82;}

.saturation_60 {background-color:#346582;}

.saturation_70 {background-color:#276182;}

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

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

.saturation_100 {background-color:#005282;}

.gradient1 {background-color:#707C83;
background-image:-moz-linear-gradient(top,#A9B0B5,#707C83,#4E575C);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#A9B0B5),color-stop(0.5,#707C83),color-stop(1.0,#4E575C));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffA9B0B5',EndColorStr='#ff4E575C');
}

.gradient2 {background-color:#707C83;
background-image:-moz-linear-gradient(top,#4E575C,#707C83,#A9B0B5);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#4E575C),color-stop(0.5,#707C83),color-stop(1.0,#A9B0B5));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff4E575C',EndColorStr='#ffA9B0B5');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code