Color Wheel

Basecolor
Hex: #538A5F. Brightness: 117. Parallel 3
Hex: #538A7A. Brightness: 120. Parallel 4
Hex: #537E8A. Brightness: 115. Adjacent/tetrad
Hex: #53628A. Brightness: 98. Triad 1
Hex: #5F538A. Brightness: 93. Split complimentary 1
Hex: #7A538A. Brightness: 101. Complimentary
Hex: #8A537E. Brightness: 104. Split complimentary 2
Hex: #8A5362. Brightness: 101. Triad 2
Hex: #8A5F53. Brightness: 106. Adjacent/tetrad
Hex: #8A7B53. Brightness: 123. Parallel 1
Hex: #7D8A53. Brightness: 128. Parallel 2
Hex: #618A53. Brightness: 119.

Shades

Shade 90% black
Hex: #080E0A. Brightness: 12. Shade 80% black
Hex: #111C13. Brightness: 24. Shade 70% black
Hex: #19291C. Brightness: 35. Shade 60% black
Hex: #213726. Brightness: 46. Shade 50% black
Hex: #2A4530. Brightness: 59. Shade 40% black
Hex: #325339. Brightness: 70. Shade 30% black
Hex: #3A6142. Brightness: 82. Shade 20% black
Hex: #426E4C. Brightness: 93. Shade 10% black
Hex: #4B7C56. Brightness: 105. Basecolor
Hex: #538A5F. Brightness: 117.

Tints

Tint 10% white
Hex: #64966F. Brightness: 131. Tint 20% white
Hex: #75A17F. Brightness: 144. Tint 30% white
Hex: #87AD8F. Brightness: 158. Tint 40% white
Hex: #98B99F. Brightness: 172. Tint 50% white
Hex: #A9C4AF. Brightness: 186. Tint 60% white
Hex: #BAD0BF. Brightness: 199. Tint 70% white
Hex: #CBDCCF. Brightness: 213. Tint 80% white
Hex: #DDE8DF. Brightness: 228. Tint 90% white
Hex: #EEF3EF. Brightness: 241.

Saturation

Saturation 10
Hex: #7C8A7F. Brightness: 133. Saturation 20
Hex: #6E8A74. Brightness: 127. Saturation 30
Hex: #608A69. Brightness: 122. Saturation 40
Hex: #538A5F. Brightness: 117. Saturation 50
Hex: #458A54. Brightness: 111. Saturation 60
Hex: #378A49. Brightness: 106. Saturation 70
Hex: #298A3E. Brightness: 100. Saturation 80
Hex: #1C8A33. Brightness: 95. Saturation 90
Hex: #0E8A29. Brightness: 90. Saturation 100
Hex: #008A1E. Brightness: 84.

Gradient examples

CSS Code

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

.parallel_3 {background-color:#538A7A;}

.parallel_4 {background-color:#537E8A;}

.adjacent/tetrad {background-color:#53628A;}

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

.split_complimentary_1 {background-color:#7A538A;}

.complimentary {background-color:#8A537E;}

.split_complimentary_2 {background-color:#8A5362;}

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

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

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

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

.shade_90%_black {background-color:#080E0A;}

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

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

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

.shade_50%_black {background-color:#2A4530;}

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

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

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

.shade_10%_black {background-color:#4B7C56;}

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

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

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

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

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

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

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

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

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

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

.saturation_10 {background-color:#7C8A7F;}

.saturation_20 {background-color:#6E8A74;}

.saturation_30 {background-color:#608A69;}

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

.saturation_50 {background-color:#458A54;}

.saturation_60 {background-color:#378A49;}

.saturation_70 {background-color:#298A3E;}

.saturation_80 {background-color:#1C8A33;}

.saturation_90 {background-color:#0E8A29;}

.saturation_100 {background-color:#008A1E;}

.gradient1 {background-color:#538A5F;
background-image:-moz-linear-gradient(top,#98B99F,#538A5F,#3A6142);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#98B99F),color-stop(0.5,#538A5F),color-stop(1.0,#3A6142));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff98B99F',EndColorStr='#ff3A6142');
}

.gradient2 {background-color:#538A5F;
background-image:-moz-linear-gradient(top,#3A6142,#538A5F,#98B99F);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#3A6142),color-stop(0.5,#538A5F),color-stop(1.0,#98B99F));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff3A6142',EndColorStr='#ff98B99F');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code