Color Wheel

Basecolor
Hex: #577C88. Brightness: 114. Parallel 3
Hex: #566387. Brightness: 99. Parallel 4
Hex: #635687. Brightness: 95. Adjacent/tetrad
Hex: #7B5687. Brightness: 103. Triad 1
Hex: #87567B. Brightness: 105. Split complimentary 1
Hex: #875663. Brightness: 102. Complimentary
Hex: #876356. Brightness: 108. Split complimentary 2
Hex: #877C56. Brightness: 123. Triad 2
Hex: #7A8756. Brightness: 126. Adjacent/tetrad
Hex: #628756. Brightness: 118. Parallel 1
Hex: #568763. Brightness: 116. Parallel 2
Hex: #56877C. Brightness: 119.

Shades

Shade 90% black
Hex: #090C0E. Brightness: 11. Shade 80% black
Hex: #11191B. Brightness: 23. Shade 70% black
Hex: #1A2529. Brightness: 34. Shade 60% black
Hex: #233236. Brightness: 46. Shade 50% black
Hex: #2C3E44. Brightness: 57. Shade 40% black
Hex: #344A52. Brightness: 68. Shade 30% black
Hex: #3D575F. Brightness: 80. Shade 20% black
Hex: #46636D. Brightness: 91. Shade 10% black
Hex: #4E707A. Brightness: 103. Basecolor
Hex: #577C88. Brightness: 114.

Tints

Tint 10% white
Hex: #688994. Brightness: 128. Tint 20% white
Hex: #7996A0. Brightness: 142. Tint 30% white
Hex: #89A3AC. Brightness: 156. Tint 40% white
Hex: #9AB0B8. Brightness: 170. Tint 50% white
Hex: #ABBEC4. Brightness: 185. Tint 60% white
Hex: #BCCBCF. Brightness: 199. Tint 70% white
Hex: #CDD8DB. Brightness: 213. Tint 80% white
Hex: #DDE5E7. Brightness: 227. Tint 90% white
Hex: #EEF2F3. 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:#577C88;}

.parallel_3 {background-color:#566387;}

.parallel_4 {background-color:#635687;}

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

.triad_1 {background-color:#87567B;}

.split_complimentary_1 {background-color:#875663;}

.complimentary {background-color:#876356;}

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

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

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

.parallel_1 {background-color:#568763;}

.parallel_2 {background-color:#56877C;}

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

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

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

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

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

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

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

.shade_20%_black {background-color:#46636D;}

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

.basecolor {background-color:#577C88;}

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

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

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

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

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

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

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

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

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

.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:#577C88;
background-image:-moz-linear-gradient(top,#9AB0B8,#577C88,#3D575F);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#9AB0B8),color-stop(0.5,#577C88),color-stop(1.0,#3D575F));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff9AB0B8',EndColorStr='#ff3D575F');
}

.gradient2 {background-color:#577C88;
background-image:-moz-linear-gradient(top,#3D575F,#577C88,#9AB0B8);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#3D575F),color-stop(0.5,#577C88),color-stop(1.0,#9AB0B8));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff3D575F',EndColorStr='#ff9AB0B8');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code