Color Wheel

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

Shades

Shade 90% black
Hex: #080C0E. Brightness: 11. Shade 80% black
Hex: #10191B. Brightness: 23. Shade 70% black
Hex: #192529. Brightness: 34. Shade 60% black
Hex: #213237. Brightness: 45. Shade 50% black
Hex: #293E44. Brightness: 56. Shade 40% black
Hex: #314A52. Brightness: 67. Shade 30% black
Hex: #395760. Brightness: 79. Shade 20% black
Hex: #42636E. Brightness: 90. Shade 10% black
Hex: #4A707B. Brightness: 102. Basecolor
Hex: #527C89. Brightness: 113.

Tints

Tint 10% white
Hex: #638995. Brightness: 127. Tint 20% white
Hex: #7596A1. Brightness: 141. Tint 30% white
Hex: #86A3AC. Brightness: 155. Tint 40% white
Hex: #97B0B8. Brightness: 169. Tint 50% white
Hex: #A8BEC4. Brightness: 184. Tint 60% white
Hex: #BACBD0. Brightness: 198. Tint 70% white
Hex: #CBD8DC. Brightness: 213. Tint 80% white
Hex: #DCE5E7. Brightness: 227. Tint 90% white
Hex: #EEF2F3. Brightness: 241.

Saturation

Saturation 10
Hex: #7C868A. Brightness: 131. Saturation 20
Hex: #6E838A. Brightness: 126. Saturation 30
Hex: #60808A. Brightness: 120. Saturation 40
Hex: #537D8A. Brightness: 114. Saturation 50
Hex: #457A8A. Brightness: 108. Saturation 60
Hex: #37768A. Brightness: 101. Saturation 70
Hex: #29738A. Brightness: 95. Saturation 80
Hex: #1C708A. Brightness: 90. Saturation 90
Hex: #0E6D8A. Brightness: 84. Saturation 100
Hex: #006A8A. Brightness: 78.

Gradient examples

CSS Code

.basecolor {background-color:#527C89;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.shade_50%_black {background-color:#293E44;}

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

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

.shade_20%_black {background-color:#42636E;}

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

.basecolor {background-color:#527C89;}

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

.tint_20%_white {background-color:#7596A1;}

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

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

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

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

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

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

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

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

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

.saturation_30 {background-color:#60808A;}

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

.saturation_50 {background-color:#457A8A;}

.saturation_60 {background-color:#37768A;}

.saturation_70 {background-color:#29738A;}

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

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

.saturation_100 {background-color:#006A8A;}

.gradient1 {background-color:#527C89;
background-image:-moz-linear-gradient(top,#97B0B8,#527C89,#395760);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#97B0B8),color-stop(0.5,#527C89),color-stop(1.0,#395760));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff97B0B8',EndColorStr='#ff395760');
}

.gradient2 {background-color:#527C89;
background-image:-moz-linear-gradient(top,#395760,#527C89,#97B0B8);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#395760),color-stop(0.5,#527C89),color-stop(1.0,#97B0B8));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff395760',EndColorStr='#ff97B0B8');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code