Color Wheel

Basecolor
Hex: #A77C78. Brightness: 136. Parallel 3
Hex: #A69277. Brightness: 149. Parallel 4
Hex: #A2A677. Brightness: 159. Adjacent/tetrad
Hex: #8BA677. Brightness: 153. Triad 1
Hex: #77A67B. Brightness: 147. Split complimentary 1
Hex: #77A692. Brightness: 150. Complimentary
Hex: #77A2A6. Brightness: 150. Split complimentary 2
Hex: #778BA6. Brightness: 136. Triad 2
Hex: #7B77A6. Brightness: 126. Adjacent/tetrad
Hex: #9277A6. Brightness: 132. Parallel 1
Hex: #A677A2. Brightness: 138. Parallel 2
Hex: #A6778B. Brightness: 135.

Shades

Shade 90% black
Hex: #110C0C. Brightness: 13. Shade 80% black
Hex: #211918. Brightness: 27. Shade 70% black
Hex: #322524. Brightness: 41. Shade 60% black
Hex: #433230. Brightness: 55. Shade 50% black
Hex: #543E3C. Brightness: 68. Shade 40% black
Hex: #644A48. Brightness: 82. Shade 30% black
Hex: #755754. Brightness: 96. Shade 20% black
Hex: #866360. Brightness: 109. Shade 10% black
Hex: #96706C. Brightness: 123. Basecolor
Hex: #A77C78. Brightness: 136.

Tints

Tint 10% white
Hex: #B08986. Brightness: 148. Tint 20% white
Hex: #B99693. Brightness: 160. Tint 30% white
Hex: #C1A3A0. Brightness: 172. Tint 40% white
Hex: #CAB0AE. Brightness: 184. Tint 50% white
Hex: #D3BEBC. Brightness: 196. Tint 60% white
Hex: #DCCBC9. Brightness: 208. Tint 70% white
Hex: #E5D8D6. Brightness: 220. Tint 80% white
Hex: #EDE5E4. Brightness: 231. Tint 90% white
Hex: #F6F2F2. Brightness: 243.

Saturation

Saturation 10
Hex: #A69795. Brightness: 155. Saturation 20
Hex: #A68785. Brightness: 144. Saturation 30
Hex: #A67874. Brightness: 133. Saturation 40
Hex: #A66963. Brightness: 123. Saturation 50
Hex: #A65A53. Brightness: 112. Saturation 60
Hex: #A64B42. Brightness: 101. Saturation 70
Hex: #A63B32. Brightness: 90. Saturation 80
Hex: #A62C21. Brightness: 79. Saturation 90
Hex: #A61D11. Brightness: 69. Saturation 100
Hex: #A60E00. Brightness: 58.

Gradient examples

CSS Code

.basecolor {background-color:#A77C78;}

.parallel_3 {background-color:#A69277;}

.parallel_4 {background-color:#A2A677;}

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

.triad_1 {background-color:#77A67B;}

.split_complimentary_1 {background-color:#77A692;}

.complimentary {background-color:#77A2A6;}

.split_complimentary_2 {background-color:#778BA6;}

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

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

.parallel_1 {background-color:#A677A2;}

.parallel_2 {background-color:#A6778B;}

.shade_90%_black {background-color:#110C0C;}

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

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

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

.shade_50%_black {background-color:#543E3C;}

.shade_40%_black {background-color:#644A48;}

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

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

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

.basecolor {background-color:#A77C78;}

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#A69795;}

.saturation_20 {background-color:#A68785;}

.saturation_30 {background-color:#A67874;}

.saturation_40 {background-color:#A66963;}

.saturation_50 {background-color:#A65A53;}

.saturation_60 {background-color:#A64B42;}

.saturation_70 {background-color:#A63B32;}

.saturation_80 {background-color:#A62C21;}

.saturation_90 {background-color:#A61D11;}

.saturation_100 {background-color:#A60E00;}

.gradient1 {background-color:#A77C78;
background-image:-moz-linear-gradient(top,#CAB0AE,#A77C78,#755754);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#CAB0AE),color-stop(0.5,#A77C78),color-stop(1.0,#755754));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffCAB0AE',EndColorStr='#ff755754');
}

.gradient2 {background-color:#A77C78;
background-image:-moz-linear-gradient(top,#755754,#A77C78,#CAB0AE);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#755754),color-stop(0.5,#A77C78),color-stop(1.0,#CAB0AE));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff755754',EndColorStr='#ffCAB0AE');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code