Color Wheel

Basecolor
Hex: #8A7B53. Brightness: 123. Parallel 3
Hex: #7D8A53. Brightness: 128. Parallel 4
Hex: #618A53. Brightness: 119. Adjacent/tetrad
Hex: #538A5F. Brightness: 117. Triad 1
Hex: #538A7B. Brightness: 120. Split complimentary 1
Hex: #537D8A. Brightness: 114. Complimentary
Hex: #53618A. Brightness: 97. Split complimentary 2
Hex: #5F538A. Brightness: 93. Triad 2
Hex: #7B538A. Brightness: 101. Adjacent/tetrad
Hex: #8A537D. Brightness: 104. Parallel 1
Hex: #8A5361. Brightness: 101. Parallel 2
Hex: #8A6053. Brightness: 107.

Shades

Shade 90% black
Hex: #0E0C08. Brightness: 12. Shade 80% black
Hex: #1C1911. Brightness: 25. Shade 70% black
Hex: #292519. Brightness: 37. Shade 60% black
Hex: #373121. Brightness: 49. Shade 50% black
Hex: #453E2A. Brightness: 62. Shade 40% black
Hex: #534A32. Brightness: 74. Shade 30% black
Hex: #61563A. Brightness: 86. Shade 20% black
Hex: #6E6242. Brightness: 98. Shade 10% black
Hex: #7C6F4B. Brightness: 111. Basecolor
Hex: #8A7B53. Brightness: 123.

Tints

Tint 10% white
Hex: #968864. Brightness: 136. Tint 20% white
Hex: #A19575. Brightness: 149. Tint 30% white
Hex: #ADA387. Brightness: 163. Tint 40% white
Hex: #B9B098. Brightness: 176. Tint 50% white
Hex: #C4BDA9. Brightness: 189. Tint 60% white
Hex: #D0CABA. Brightness: 202. Tint 70% white
Hex: #DCD7CB. Brightness: 215. Tint 80% white
Hex: #E8E5DD. Brightness: 229. Tint 90% white
Hex: #F3F2EE. Brightness: 242.

Saturation

Saturation 10
Hex: #8A867C. Brightness: 134. Saturation 20
Hex: #8A826E. Brightness: 130. Saturation 30
Hex: #8A7F60. Brightness: 127. Saturation 40
Hex: #8A7B53. Brightness: 123. Saturation 50
Hex: #8A7745. Brightness: 119. Saturation 60
Hex: #8A7437. Brightness: 116. Saturation 70
Hex: #8A7029. Brightness: 112. Saturation 80
Hex: #8A6C1C. Brightness: 108. Saturation 90
Hex: #8A690E. Brightness: 104. Saturation 100
Hex: #8A6500. Brightness: 101.

Gradient examples

CSS Code

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

.parallel_3 {background-color:#7D8A53;}

.parallel_4 {background-color:#618A53;}

.adjacent/tetrad {background-color:#538A5F;}

.triad_1 {background-color:#538A7B;}

.split_complimentary_1 {background-color:#537D8A;}

.complimentary {background-color:#53618A;}

.split_complimentary_2 {background-color:#5F538A;}

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

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

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

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

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

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

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

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

.shade_50%_black {background-color:#453E2A;}

.shade_40%_black {background-color:#534A32;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gradient1 {background-color:#8A7B53;
background-image:-moz-linear-gradient(top,#B9B098,#8A7B53,#61563A);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#B9B098),color-stop(0.5,#8A7B53),color-stop(1.0,#61563A));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffB9B098',EndColorStr='#ff61563A');
}

.gradient2 {background-color:#8A7B53;
background-image:-moz-linear-gradient(top,#61563A,#8A7B53,#B9B098);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#61563A),color-stop(0.5,#8A7B53),color-stop(1.0,#B9B098));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff61563A',EndColorStr='#ffB9B098');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code