Color Wheel

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

Shades

Shade 90% black
Hex: #080E0C. Brightness: 12. Shade 80% black
Hex: #111C19. Brightness: 24. Shade 70% black
Hex: #192925. Brightness: 36. Shade 60% black
Hex: #213731. Brightness: 48. Shade 50% black
Hex: #2A453E. Brightness: 60. Shade 40% black
Hex: #32534A. Brightness: 72. Shade 30% black
Hex: #3A6156. Brightness: 84. Shade 20% black
Hex: #426E62. Brightness: 95. Shade 10% black
Hex: #4B7C6F. Brightness: 108. Basecolor
Hex: #538A7B. Brightness: 120.

Tints

Tint 10% white
Hex: #649688. Brightness: 133. Tint 20% white
Hex: #75A195. Brightness: 146. Tint 30% white
Hex: #87ADA3. Brightness: 160. Tint 40% white
Hex: #98B9B0. Brightness: 174. Tint 50% white
Hex: #A9C4BD. Brightness: 187. Tint 60% white
Hex: #BAD0CA. Brightness: 201. Tint 70% white
Hex: #CBDCD7. Brightness: 214. Tint 80% white
Hex: #DDE8E5. Brightness: 228. Tint 90% white
Hex: #EEF3F2. Brightness: 241.

Saturation

Saturation 10
Hex: #7C8A86. Brightness: 133. Saturation 20
Hex: #6E8A82. Brightness: 129. Saturation 30
Hex: #608A7F. Brightness: 124. Saturation 40
Hex: #538A7B. Brightness: 120. Saturation 50
Hex: #458A77. Brightness: 115. Saturation 60
Hex: #378A74. Brightness: 111. Saturation 70
Hex: #298A70. Brightness: 106. Saturation 80
Hex: #1C8A6C. Brightness: 102. Saturation 90
Hex: #0E8A69. Brightness: 97. Saturation 100
Hex: #008A65. Brightness: 93.

Gradient examples

CSS Code

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

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

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

.adjacent/tetrad {background-color:#5F538A;}

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

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

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

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

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

.adjacent/tetrad {background-color:#7C8A53;}

.parallel_1 {background-color:#608A53;}

.parallel_2 {background-color:#538A60;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gradient1 {background-color:#538A7B;
background-image:-moz-linear-gradient(top,#98B9B0,#538A7B,#3A6156);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#98B9B0),color-stop(0.5,#538A7B),color-stop(1.0,#3A6156));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff98B9B0',EndColorStr='#ff3A6156');
}

.gradient2 {background-color:#538A7B;
background-image:-moz-linear-gradient(top,#3A6156,#538A7B,#98B9B0);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#3A6156),color-stop(0.5,#538A7B),color-stop(1.0,#98B9B0));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff3A6156',EndColorStr='#ff98B9B0');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code