Color Wheel

Basecolor
Hex: #89527C. Brightness: 103. Parallel 3
Hex: #8A5361. Brightness: 101. Parallel 4
Hex: #8A6053. Brightness: 107. Adjacent/tetrad
Hex: #8A7C53. Brightness: 124. Triad 1
Hex: #7C8A53. Brightness: 128. Split complimentary 1
Hex: #608A53. Brightness: 119. Complimentary
Hex: #538A60. Brightness: 117. Split complimentary 2
Hex: #538A7C. Brightness: 120. Triad 2
Hex: #537C8A. Brightness: 113. Adjacent/tetrad
Hex: #53608A. Brightness: 97. Parallel 1
Hex: #60538A. Brightness: 93. Parallel 2
Hex: #7C538A. Brightness: 102.

Shades

Shade 90% black
Hex: #0E080C. Brightness: 10. Shade 80% black
Hex: #1B1019. Brightness: 20. Shade 70% black
Hex: #291925. Brightness: 31. Shade 60% black
Hex: #372132. Brightness: 42. Shade 50% black
Hex: #44293E. Brightness: 51. Shade 40% black
Hex: #52314A. Brightness: 62. Shade 30% black
Hex: #603957. Brightness: 72. Shade 20% black
Hex: #6E4263. Brightness: 83. Shade 10% black
Hex: #7B4A70. Brightness: 93. Basecolor
Hex: #89527C. Brightness: 103.

Tints

Tint 10% white
Hex: #956389. Brightness: 118. Tint 20% white
Hex: #A17596. Brightness: 134. Tint 30% white
Hex: #AC86A3. Brightness: 149. Tint 40% white
Hex: #B897B0. Brightness: 164. Tint 50% white
Hex: #C4A8BE. Brightness: 179. Tint 60% white
Hex: #D0BACB. Brightness: 195. Tint 70% white
Hex: #DCCBD8. Brightness: 210. Tint 80% white
Hex: #E7DCE5. Brightness: 224. Tint 90% white
Hex: #F3EEF2. Brightness: 240.

Saturation

Saturation 10
Hex: #8A7C86. Brightness: 129. Saturation 20
Hex: #8A6E83. Brightness: 121. Saturation 30
Hex: #8A6080. Brightness: 112. Saturation 40
Hex: #8A537D. Brightness: 104. Saturation 50
Hex: #8A457A. Brightness: 96. Saturation 60
Hex: #8A3776. Brightness: 87. Saturation 70
Hex: #8A2973. Brightness: 78. Saturation 80
Hex: #8A1C70. Brightness: 70. Saturation 90
Hex: #8A0E6D. Brightness: 62. Saturation 100
Hex: #8A006A. Brightness: 53.

Gradient examples

CSS Code

.basecolor {background-color:#89527C;}

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

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

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

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

.split_complimentary_1 {background-color:#608A53;}

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

.split_complimentary_2 {background-color:#538A7C;}

.triad_2 {background-color:#537C8A;}

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

.parallel_1 {background-color:#60538A;}

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

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

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

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

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

.shade_50%_black {background-color:#44293E;}

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

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

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

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

.basecolor {background-color:#89527C;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gradient1 {background-color:#89527C;
background-image:-moz-linear-gradient(top,#B897B0,#89527C,#603957);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#B897B0),color-stop(0.5,#89527C),color-stop(1.0,#603957));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffB897B0',EndColorStr='#ff603957');
}

.gradient2 {background-color:#89527C;
background-image:-moz-linear-gradient(top,#603957,#89527C,#B897B0);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#603957),color-stop(0.5,#89527C),color-stop(1.0,#B897B0));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff603957',EndColorStr='#ffB897B0');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code