Color Wheel

Basecolor
Hex: #897C7E. Brightness: 128. Parallel 3
Hex: #8A827D. Brightness: 132. Parallel 4
Hex: #8A887D. Brightness: 135. Adjacent/tetrad
Hex: #858A7D. Brightness: 135. Triad 1
Hex: #7F8A7D. Brightness: 133. Split complimentary 1
Hex: #7D8A82. Brightness: 133. Complimentary
Hex: #7D8A88. Brightness: 134. Split complimentary 2
Hex: #7D858A. Brightness: 131. Triad 2
Hex: #7D7F8A. Brightness: 128. Adjacent/tetrad
Hex: #827D8A. Brightness: 128. Parallel 1
Hex: #887D8A. Brightness: 130. Parallel 2
Hex: #8A7D85. Brightness: 130.

Shades

Shade 90% black
Hex: #0E0C0D. Brightness: 13. Shade 80% black
Hex: #1B1919. Brightness: 26. Shade 70% black
Hex: #292526. Brightness: 38. Shade 60% black
Hex: #373232. Brightness: 51. Shade 50% black
Hex: #443E3F. Brightness: 64. Shade 40% black
Hex: #524A4C. Brightness: 77. Shade 30% black
Hex: #605758. Brightness: 90. Shade 20% black
Hex: #6E6365. Brightness: 103. Shade 10% black
Hex: #7B7071. Brightness: 115. Basecolor
Hex: #897C7E. Brightness: 128.

Tints

Tint 10% white
Hex: #95898B. Brightness: 141. Tint 20% white
Hex: #A19698. Brightness: 154. Tint 30% white
Hex: #ACA3A5. Brightness: 166. Tint 40% white
Hex: #B8B0B2. Brightness: 179. Tint 50% white
Hex: #C4BEBE. Brightness: 192. Tint 60% white
Hex: #D0CBCB. Brightness: 204. Tint 70% white
Hex: #DCD8D8. Brightness: 217. Tint 80% white
Hex: #E7E5E5. Brightness: 230. Tint 90% white
Hex: #F3F2F2. Brightness: 242.

Saturation

Saturation 10
Hex: #8A7C7E. Brightness: 128. Saturation 20
Hex: #8A6E72. Brightness: 119. Saturation 30
Hex: #8A6067. Brightness: 109. Saturation 40
Hex: #8A535B. Brightness: 100. Saturation 50
Hex: #8A454F. Brightness: 91. Saturation 60
Hex: #8A3743. Brightness: 81. Saturation 70
Hex: #8A2938. Brightness: 72. Saturation 80
Hex: #8A1C2C. Brightness: 63. Saturation 90
Hex: #8A0E20. Brightness: 53. Saturation 100
Hex: #8A0015. Brightness: 44.

Gradient examples

CSS Code

.basecolor {background-color:#897C7E;}

.parallel_3 {background-color:#8A827D;}

.parallel_4 {background-color:#8A887D;}

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

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

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

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

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

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

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

.parallel_1 {background-color:#887D8A;}

.parallel_2 {background-color:#8A7D85;}

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

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

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

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

.shade_50%_black {background-color:#443E3F;}

.shade_40%_black {background-color:#524A4C;}

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

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

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

.basecolor {background-color:#897C7E;}

.tint_10%_white {background-color:#95898B;}

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#8A7C7E;}

.saturation_20 {background-color:#8A6E72;}

.saturation_30 {background-color:#8A6067;}

.saturation_40 {background-color:#8A535B;}

.saturation_50 {background-color:#8A454F;}

.saturation_60 {background-color:#8A3743;}

.saturation_70 {background-color:#8A2938;}

.saturation_80 {background-color:#8A1C2C;}

.saturation_90 {background-color:#8A0E20;}

.saturation_100 {background-color:#8A0015;}

.gradient1 {background-color:#897C7E;
background-image:-moz-linear-gradient(top,#B8B0B2,#897C7E,#605758);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#B8B0B2),color-stop(0.5,#897C7E),color-stop(1.0,#605758));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffB8B0B2',EndColorStr='#ff605758');
}

.gradient2 {background-color:#897C7E;
background-image:-moz-linear-gradient(top,#605758,#897C7E,#B8B0B2);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#605758),color-stop(0.5,#897C7E),color-stop(1.0,#B8B0B2));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff605758',EndColorStr='#ffB8B0B2');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code