Color Wheel

Basecolor
Hex: #AC7C77. Brightness: 138. Parallel 3
Hex: #AB9676. Brightness: 153. Parallel 4
Hex: #A6AB76. Brightness: 163. Adjacent/tetrad
Hex: #8BAB76. Brightness: 155. Triad 1
Hex: #76AB7B. Brightness: 150. Split complimentary 1
Hex: #76AB96. Brightness: 153. Complimentary
Hex: #76A6AB. Brightness: 152. Split complimentary 2
Hex: #768BAB. Brightness: 136. Triad 2
Hex: #7B76AB. Brightness: 126. Adjacent/tetrad
Hex: #9676AB. Brightness: 134. Parallel 1
Hex: #AB76A6. Brightness: 139. Parallel 2
Hex: #AB768B. Brightness: 136.

Shades

Shade 90% black
Hex: #110C0C. Brightness: 13. Shade 80% black
Hex: #221918. Brightness: 28. Shade 70% black
Hex: #342524. Brightness: 41. Shade 60% black
Hex: #453230. Brightness: 55. Shade 50% black
Hex: #563E3C. Brightness: 69. Shade 40% black
Hex: #674A47. Brightness: 82. Shade 30% black
Hex: #785753. Brightness: 96. Shade 20% black
Hex: #8A635F. Brightness: 110. Shade 10% black
Hex: #9B706B. Brightness: 124. Basecolor
Hex: #AC7C77. Brightness: 138.

Tints

Tint 10% white
Hex: #B48985. Brightness: 149. Tint 20% white
Hex: #BD9692. Brightness: 161. Tint 30% white
Hex: #C5A3A0. Brightness: 173. Tint 40% white
Hex: #CDB0AD. Brightness: 184. Tint 50% white
Hex: #D6BEBB. Brightness: 197. Tint 60% white
Hex: #DECBC9. Brightness: 208. Tint 70% white
Hex: #E6D8D6. Brightness: 220. Tint 80% white
Hex: #EEE5E4. Brightness: 232. Tint 90% white
Hex: #F7F2F1. Brightness: 243.

Saturation

Saturation 10
Hex: #AB9B9A. Brightness: 160. Saturation 20
Hex: #AB8C89. Brightness: 149. Saturation 30
Hex: #AB7D78. Brightness: 138. Saturation 40
Hex: #AB6D67. Brightness: 127. Saturation 50
Hex: #AB5E55. Brightness: 116. Saturation 60
Hex: #AB4F44. Brightness: 105. Saturation 70
Hex: #AB3F33. Brightness: 94. Saturation 80
Hex: #AB3022. Brightness: 83. Saturation 90
Hex: #AB2011. Brightness: 72. Saturation 100
Hex: #AB1100. Brightness: 61.

Gradient examples

CSS Code

.basecolor {background-color:#AC7C77;}

.parallel_3 {background-color:#AB9676;}

.parallel_4 {background-color:#A6AB76;}

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

.triad_1 {background-color:#76AB7B;}

.split_complimentary_1 {background-color:#76AB96;}

.complimentary {background-color:#76A6AB;}

.split_complimentary_2 {background-color:#768BAB;}

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

.adjacent/tetrad {background-color:#9676AB;}

.parallel_1 {background-color:#AB76A6;}

.parallel_2 {background-color:#AB768B;}

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

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

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

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

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

.shade_40%_black {background-color:#674A47;}

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

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

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

.basecolor {background-color:#AC7C77;}

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#AB9B9A;}

.saturation_20 {background-color:#AB8C89;}

.saturation_30 {background-color:#AB7D78;}

.saturation_40 {background-color:#AB6D67;}

.saturation_50 {background-color:#AB5E55;}

.saturation_60 {background-color:#AB4F44;}

.saturation_70 {background-color:#AB3F33;}

.saturation_80 {background-color:#AB3022;}

.saturation_90 {background-color:#AB2011;}

.saturation_100 {background-color:#AB1100;}

.gradient1 {background-color:#AC7C77;
background-image:-moz-linear-gradient(top,#CDB0AD,#AC7C77,#785753);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#CDB0AD),color-stop(0.5,#AC7C77),color-stop(1.0,#785753));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffCDB0AD',EndColorStr='#ff785753');
}

.gradient2 {background-color:#AC7C77;
background-image:-moz-linear-gradient(top,#785753,#AC7C77,#CDB0AD);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#785753),color-stop(0.5,#AC7C77),color-stop(1.0,#CDB0AD));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff785753',EndColorStr='#ffCDB0AD');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code