Color Wheel

Basecolor
Hex: #AD8376. Brightness: 142. Parallel 3
Hex: #AD9F76. Brightness: 159. Parallel 4
Hex: #A0AD76. Brightness: 163. Adjacent/tetrad
Hex: #85AD76. Brightness: 155. Triad 1
Hex: #76AD83. Brightness: 152. Split complimentary 1
Hex: #76AD9F. Brightness: 155. Complimentary
Hex: #76A0AD. Brightness: 149. Split complimentary 2
Hex: #7685AD. Brightness: 133. Triad 2
Hex: #8376AD. Brightness: 128. Adjacent/tetrad
Hex: #9F76AD. Brightness: 137. Parallel 1
Hex: #AD76A0. Brightness: 139. Parallel 2
Hex: #AD7685. Brightness: 136.

Shades

Shade 90% black
Hex: #110D0C. Brightness: 14. Shade 80% black
Hex: #231A18. Brightness: 28. Shade 70% black
Hex: #342723. Brightness: 42. Shade 60% black
Hex: #45342F. Brightness: 57. Shade 50% black
Hex: #56423B. Brightness: 71. Shade 40% black
Hex: #684F47. Brightness: 86. Shade 30% black
Hex: #795C53. Brightness: 100. Shade 20% black
Hex: #8A695E. Brightness: 114. Shade 10% black
Hex: #9C766A. Brightness: 128. Basecolor
Hex: #AD8376. Brightness: 142.

Tints

Tint 10% white
Hex: #B58F84. Brightness: 153. Tint 20% white
Hex: #BD9C91. Brightness: 165. Tint 30% white
Hex: #C6A89F. Brightness: 176. Tint 40% white
Hex: #CEB5AD. Brightness: 188. Tint 50% white
Hex: #D6C1BA. Brightness: 198. Tint 60% white
Hex: #DECDC8. Brightness: 210. Tint 70% white
Hex: #E6DAD6. Brightness: 221. Tint 80% white
Hex: #EFE6E4. Brightness: 232. Tint 90% white
Hex: #F7F3F1. Brightness: 244.

Saturation

Saturation 10
Hex: #ADA09C. Brightness: 163. Saturation 20
Hex: #AD938B. Brightness: 154. Saturation 30
Hex: #AD8679. Brightness: 144. Saturation 40
Hex: #AD7868. Brightness: 134. Saturation 50
Hex: #AD6B57. Brightness: 124. Saturation 60
Hex: #AD5E45. Brightness: 115. Saturation 70
Hex: #AD5034. Brightness: 105. Saturation 80
Hex: #AD4323. Brightness: 95. Saturation 90
Hex: #AD3611. Brightness: 85. Saturation 100
Hex: #AD2800. Brightness: 75.

Gradient examples

CSS Code

.basecolor {background-color:#AD8376;}

.parallel_3 {background-color:#AD9F76;}

.parallel_4 {background-color:#A0AD76;}

.adjacent/tetrad {background-color:#85AD76;}

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

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

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

.split_complimentary_2 {background-color:#7685AD;}

.triad_2 {background-color:#8376AD;}

.adjacent/tetrad {background-color:#9F76AD;}

.parallel_1 {background-color:#AD76A0;}

.parallel_2 {background-color:#AD7685;}

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

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

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

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

.shade_50%_black {background-color:#56423B;}

.shade_40%_black {background-color:#684F47;}

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

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

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

.basecolor {background-color:#AD8376;}

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#ADA09C;}

.saturation_20 {background-color:#AD938B;}

.saturation_30 {background-color:#AD8679;}

.saturation_40 {background-color:#AD7868;}

.saturation_50 {background-color:#AD6B57;}

.saturation_60 {background-color:#AD5E45;}

.saturation_70 {background-color:#AD5034;}

.saturation_80 {background-color:#AD4323;}

.saturation_90 {background-color:#AD3611;}

.saturation_100 {background-color:#AD2800;}

.gradient1 {background-color:#AD8376;
background-image:-moz-linear-gradient(top,#CEB5AD,#AD8376,#795C53);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#CEB5AD),color-stop(0.5,#AD8376),color-stop(1.0,#795C53));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffCEB5AD',EndColorStr='#ff795C53');
}

.gradient2 {background-color:#AD8376;
background-image:-moz-linear-gradient(top,#795C53,#AD8376,#CEB5AD);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#795C53),color-stop(0.5,#AD8376),color-stop(1.0,#CEB5AD));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff795C53',EndColorStr='#ffCEB5AD');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code