Color Wheel

Basecolor
Hex: #8A5361. Brightness: 101. Parallel 3
Hex: #8A6153. Brightness: 108. Parallel 4
Hex: #8A7D53. Brightness: 124. Adjacent/tetrad
Hex: #7B8A53. Brightness: 127. Triad 1
Hex: #5F8A53. Brightness: 119. Split complimentary 1
Hex: #538A61. Brightness: 117. Complimentary
Hex: #538A7D. Brightness: 120. Split complimentary 2
Hex: #537B8A. Brightness: 113. Triad 2
Hex: #535F8A. Brightness: 96. Adjacent/tetrad
Hex: #61538A. Brightness: 93. Parallel 1
Hex: #7D538A. Brightness: 102. Parallel 2
Hex: #8A537B. Brightness: 104.

Shades

Shade 90% black
Hex: #0E080A. Brightness: 10. Shade 80% black
Hex: #1C1113. Brightness: 21. Shade 70% black
Hex: #29191D. Brightness: 30. Shade 60% black
Hex: #372127. Brightness: 40. Shade 50% black
Hex: #452A30. Brightness: 51. Shade 40% black
Hex: #53323A. Brightness: 61. Shade 30% black
Hex: #613A44. Brightness: 71. Shade 20% black
Hex: #6E424E. Brightness: 81. Shade 10% black
Hex: #7C4B57. Brightness: 91. Basecolor
Hex: #8A5361. Brightness: 101.

Tints

Tint 10% white
Hex: #966471. Brightness: 116. Tint 20% white
Hex: #A17581. Brightness: 132. Tint 30% white
Hex: #AD8790. Brightness: 147. Tint 40% white
Hex: #B998A0. Brightness: 163. Tint 50% white
Hex: #C4A9B0. Brightness: 178. Tint 60% white
Hex: #D0BAC0. Brightness: 193. Tint 70% white
Hex: #DCCBD0. Brightness: 209. Tint 80% white
Hex: #E8DDDF. Brightness: 225. Tint 90% white
Hex: #F3EEEF. Brightness: 240.

Saturation

Saturation 10
Hex: #8A7C7F. Brightness: 129. Saturation 20
Hex: #8A6E75. Brightness: 119. Saturation 30
Hex: #8A606B. Brightness: 110. Saturation 40
Hex: #8A5360. Brightness: 101. Saturation 50
Hex: #8A4556. Brightness: 92. Saturation 60
Hex: #8A374C. Brightness: 82. Saturation 70
Hex: #8A2941. Brightness: 73. Saturation 80
Hex: #8A1C37. Brightness: 64. Saturation 90
Hex: #8A0E2D. Brightness: 55. Saturation 100
Hex: #8A0022. Brightness: 45.

Gradient examples

CSS Code

.basecolor {background-color:#8A5361;}

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

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

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

.triad_1 {background-color:#5F8A53;}

.split_complimentary_1 {background-color:#538A61;}

.complimentary {background-color:#538A7D;}

.split_complimentary_2 {background-color:#537B8A;}

.triad_2 {background-color:#535F8A;}

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

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

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

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

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

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

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

.shade_50%_black {background-color:#452A30;}

.shade_40%_black {background-color:#53323A;}

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

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

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

.basecolor {background-color:#8A5361;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gradient1 {background-color:#8A5361;
background-image:-moz-linear-gradient(top,#B998A0,#8A5361,#613A44);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#B998A0),color-stop(0.5,#8A5361),color-stop(1.0,#613A44));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffB998A0',EndColorStr='#ff613A44');
}

.gradient2 {background-color:#8A5361;
background-image:-moz-linear-gradient(top,#613A44,#8A5361,#B998A0);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#613A44),color-stop(0.5,#8A5361),color-stop(1.0,#B998A0));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff613A44',EndColorStr='#ffB998A0');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code