Color Wheel

Basecolor
Hex: #53618A. Brightness: 97. Parallel 3
Hex: #60538A. Brightness: 93. Parallel 4
Hex: #7C538A. Brightness: 102. Adjacent/tetrad
Hex: #8A537C. Brightness: 104. Triad 1
Hex: #8A5360. Brightness: 101. Split complimentary 1
Hex: #8A6153. Brightness: 108. Complimentary
Hex: #8A7D53. Brightness: 124. Split complimentary 2
Hex: #7B8A53. Brightness: 127. Triad 2
Hex: #5F8A53. Brightness: 119. Adjacent/tetrad
Hex: #538A61. Brightness: 117. Parallel 1
Hex: #538A7D. Brightness: 120. Parallel 2
Hex: #537B8A. Brightness: 113.

Shades

Shade 90% black
Hex: #080A0E. Brightness: 10. Shade 80% black
Hex: #11131C. Brightness: 19. Shade 70% black
Hex: #191D29. Brightness: 29. Shade 60% black
Hex: #212737. Brightness: 39. Shade 50% black
Hex: #2A3045. Brightness: 49. Shade 40% black
Hex: #323A53. Brightness: 58. Shade 30% black
Hex: #3A4461. Brightness: 68. Shade 20% black
Hex: #424E6E. Brightness: 78. Shade 10% black
Hex: #4B577C. Brightness: 88. Basecolor
Hex: #53618A. Brightness: 97.

Tints

Tint 10% white
Hex: #647196. Brightness: 113. Tint 20% white
Hex: #7581A1. Brightness: 129. Tint 30% white
Hex: #8790AD. Brightness: 145. Tint 40% white
Hex: #98A0B9. Brightness: 160. Tint 50% white
Hex: #A9B0C4. Brightness: 176. Tint 60% white
Hex: #BAC0D0. Brightness: 192. Tint 70% white
Hex: #CBD0DC. Brightness: 208. Tint 80% white
Hex: #DDDFE8. Brightness: 223. Tint 90% white
Hex: #EEEFF3. Brightness: 239.

Saturation

Saturation 10
Hex: #7C7F8A. Brightness: 127. Saturation 20
Hex: #6E758A. Brightness: 117. Saturation 30
Hex: #606B8A. Brightness: 107. Saturation 40
Hex: #53608A. Brightness: 97. Saturation 50
Hex: #45568A. Brightness: 87. Saturation 60
Hex: #374C8A. Brightness: 77. Saturation 70
Hex: #29418A. Brightness: 66. Saturation 80
Hex: #1C378A. Brightness: 56. Saturation 90
Hex: #0E2D8A. Brightness: 46. Saturation 100
Hex: #00228A. Brightness: 36.

Gradient examples

CSS Code

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

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

.parallel_4 {background-color:#7C538A;}

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

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

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

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

.split_complimentary_2 {background-color:#7B8A53;}

.triad_2 {background-color:#5F8A53;}

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

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

.parallel_2 {background-color:#537B8A;}

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

.shade_80%_black {background-color:#11131C;}

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

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

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

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

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

.shade_20%_black {background-color:#424E6E;}

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

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

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

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

.tint_30%_white {background-color:#8790AD;}

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

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

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

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

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

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

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

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

.saturation_30 {background-color:#606B8A;}

.saturation_40 {background-color:#53608A;}

.saturation_50 {background-color:#45568A;}

.saturation_60 {background-color:#374C8A;}

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

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

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

.saturation_100 {background-color:#00228A;}

.gradient1 {background-color:#53618A;
background-image:-moz-linear-gradient(top,#98A0B9,#53618A,#3A4461);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#98A0B9),color-stop(0.5,#53618A),color-stop(1.0,#3A4461));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff98A0B9',EndColorStr='#ff3A4461');
}

.gradient2 {background-color:#53618A;
background-image:-moz-linear-gradient(top,#3A4461,#53618A,#98A0B9);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#3A4461),color-stop(0.5,#53618A),color-stop(1.0,#98A0B9));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff3A4461',EndColorStr='#ff98A0B9');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code