Color Wheel

Basecolor
Hex: #5C7C87. Brightness: 116. Parallel 3
Hex: #5C6787. Brightness: 103. Parallel 4
Hex: #675C87. Brightness: 100. Adjacent/tetrad
Hex: #7C5C87. Brightness: 106. Triad 1
Hex: #875C7C. Brightness: 109. Split complimentary 1
Hex: #875C67. Brightness: 106. Complimentary
Hex: #87675C. Brightness: 111. Split complimentary 2
Hex: #877D5C. Brightness: 124. Triad 2
Hex: #7C875C. Brightness: 127. Adjacent/tetrad
Hex: #66875C. Brightness: 120. Parallel 1
Hex: #5C8767. Brightness: 118. Parallel 2
Hex: #5C877D. Brightness: 121.

Shades

Shade 90% black
Hex: #090C0E. Brightness: 11. Shade 80% black
Hex: #12191B. Brightness: 23. Shade 70% black
Hex: #1C2528. Brightness: 35. Shade 60% black
Hex: #253236. Brightness: 47. Shade 50% black
Hex: #2E3E44. Brightness: 58. Shade 40% black
Hex: #374A51. Brightness: 69. Shade 30% black
Hex: #40575E. Brightness: 81. Shade 20% black
Hex: #4A636C. Brightness: 93. Shade 10% black
Hex: #53707A. Brightness: 104. Basecolor
Hex: #5C7C87. Brightness: 116.

Tints

Tint 10% white
Hex: #6C8993. Brightness: 129. Tint 20% white
Hex: #7D969F. Brightness: 144. Tint 30% white
Hex: #8DA3AB. Brightness: 157. Tint 40% white
Hex: #9DB0B7. Brightness: 171. Tint 50% white
Hex: #AEBEC3. Brightness: 186. Tint 60% white
Hex: #BECBCF. Brightness: 200. Tint 70% white
Hex: #CED8DB. Brightness: 213. Tint 80% white
Hex: #DEE5E7. Brightness: 227. Tint 90% white
Hex: #EFF2F3. Brightness: 241.

Saturation

Saturation 10
Hex: #7A8487. Brightness: 129. Saturation 20
Hex: #6C8087. Brightness: 123. Saturation 30
Hex: #5F7D87. Brightness: 117. Saturation 40
Hex: #517A87. Brightness: 111. Saturation 50
Hex: #447687. Brightness: 105. Saturation 60
Hex: #367387. Brightness: 99. Saturation 70
Hex: #296F87. Brightness: 93. Saturation 80
Hex: #1B6C87. Brightness: 87. Saturation 90
Hex: #0E6987. Brightness: 81. Saturation 100
Hex: #006587. Brightness: 75.

Gradient examples

CSS Code

.basecolor {background-color:#5C7C87;}

.parallel_3 {background-color:#5C6787;}

.parallel_4 {background-color:#675C87;}

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

.triad_1 {background-color:#875C7C;}

.split_complimentary_1 {background-color:#875C67;}

.complimentary {background-color:#87675C;}

.split_complimentary_2 {background-color:#877D5C;}

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

.adjacent/tetrad {background-color:#66875C;}

.parallel_1 {background-color:#5C8767;}

.parallel_2 {background-color:#5C877D;}

.shade_90%_black {background-color:#090C0E;}

.shade_80%_black {background-color:#12191B;}

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

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

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

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

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

.shade_20%_black {background-color:#4A636C;}

.shade_10%_black {background-color:#53707A;}

.basecolor {background-color:#5C7C87;}

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

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

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

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

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

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

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

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

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

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

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

.saturation_30 {background-color:#5F7D87;}

.saturation_40 {background-color:#517A87;}

.saturation_50 {background-color:#447687;}

.saturation_60 {background-color:#367387;}

.saturation_70 {background-color:#296F87;}

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

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

.saturation_100 {background-color:#006587;}

.gradient1 {background-color:#5C7C87;
background-image:-moz-linear-gradient(top,#9DB0B7,#5C7C87,#40575E);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#9DB0B7),color-stop(0.5,#5C7C87),color-stop(1.0,#40575E));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff9DB0B7',EndColorStr='#ff40575E');
}

.gradient2 {background-color:#5C7C87;
background-image:-moz-linear-gradient(top,#40575E,#5C7C87,#9DB0B7);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#40575E),color-stop(0.5,#5C7C87),color-stop(1.0,#9DB0B7));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff40575E',EndColorStr='#ff9DB0B7');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code