Color Wheel

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

Shades

Shade 90% black
Hex: #0C0E08. Brightness: 13. Shade 80% black
Hex: #191B10. Brightness: 25. Shade 70% black
Hex: #252919. Brightness: 38. Shade 60% black
Hex: #323721. Brightness: 51. Shade 50% black
Hex: #3E4429. Brightness: 63. Shade 40% black
Hex: #4A5231. Brightness: 76. Shade 30% black
Hex: #576039. Brightness: 89. Shade 20% black
Hex: #636E42. Brightness: 102. Shade 10% black
Hex: #707B4A. Brightness: 114. Basecolor
Hex: #7C8952. Brightness: 127.

Tints

Tint 10% white
Hex: #899563. Brightness: 140. Tint 20% white
Hex: #96A175. Brightness: 153. Tint 30% white
Hex: #A3AC86. Brightness: 165. Tint 40% white
Hex: #B0B897. Brightness: 178. Tint 50% white
Hex: #BEC4A8. Brightness: 191. Tint 60% white
Hex: #CBD0BA. Brightness: 204. Tint 70% white
Hex: #D8DCCB. Brightness: 217. Tint 80% white
Hex: #E5E7DC. Brightness: 229. Tint 90% white
Hex: #F2F3EE. Brightness: 242.

Saturation

Saturation 10
Hex: #868A7C. Brightness: 135. Saturation 20
Hex: #838A6E. Brightness: 133. Saturation 30
Hex: #808A60. Brightness: 130. Saturation 40
Hex: #7D8A53. Brightness: 128. Saturation 50
Hex: #7A8A45. Brightness: 125. Saturation 60
Hex: #768A37. Brightness: 123. Saturation 70
Hex: #738A29. Brightness: 120. Saturation 80
Hex: #708A1C. Brightness: 118. Saturation 90
Hex: #6D8A0E. Brightness: 115. Saturation 100
Hex: #6A8A00. Brightness: 113.

Gradient examples

CSS Code

.basecolor {background-color:#7C8952;}

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

.parallel_4 {background-color:#538A5F;}

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

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

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

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

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

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

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

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

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

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

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

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

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

.shade_50%_black {background-color:#3E4429;}

.shade_40%_black {background-color:#4A5231;}

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

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

.shade_10%_black {background-color:#707B4A;}

.basecolor {background-color:#7C8952;}

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#868A7C;}

.saturation_20 {background-color:#838A6E;}

.saturation_30 {background-color:#808A60;}

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

.saturation_50 {background-color:#7A8A45;}

.saturation_60 {background-color:#768A37;}

.saturation_70 {background-color:#738A29;}

.saturation_80 {background-color:#708A1C;}

.saturation_90 {background-color:#6D8A0E;}

.saturation_100 {background-color:#6A8A00;}

.gradient1 {background-color:#7C8952;
background-image:-moz-linear-gradient(top,#B0B897,#7C8952,#576039);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#B0B897),color-stop(0.5,#7C8952),color-stop(1.0,#576039));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffB0B897',EndColorStr='#ff576039');
}

.gradient2 {background-color:#7C8952;
background-image:-moz-linear-gradient(top,#576039,#7C8952,#B0B897);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#576039),color-stop(0.5,#7C8952),color-stop(1.0,#B0B897));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff576039',EndColorStr='#ffB0B897');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code