Color Wheel

Basecolor
Hex: #5F538A. Brightness: 93. Parallel 3
Hex: #7A538A. Brightness: 101. Parallel 4
Hex: #8A537E. Brightness: 104. Adjacent/tetrad
Hex: #8A5362. Brightness: 101. Triad 1
Hex: #8A5F53. Brightness: 106. Split complimentary 1
Hex: #8A7B53. Brightness: 123. Complimentary
Hex: #7D8A53. Brightness: 128. Split complimentary 2
Hex: #618A53. Brightness: 119. Triad 2
Hex: #538A5F. Brightness: 117. Adjacent/tetrad
Hex: #538A7B. Brightness: 120. Parallel 1
Hex: #537D8A. Brightness: 114. Parallel 2
Hex: #53618A. Brightness: 97.

Shades

Shade 90% black
Hex: #0A080E. Brightness: 9. Shade 80% black
Hex: #13111C. Brightness: 19. Shade 70% black
Hex: #1C1929. Brightness: 28. Shade 60% black
Hex: #262137. Brightness: 37. Shade 50% black
Hex: #302A45. Brightness: 47. Shade 40% black
Hex: #393253. Brightness: 56. Shade 30% black
Hex: #423A61. Brightness: 65. Shade 20% black
Hex: #4C426E. Brightness: 74. Shade 10% black
Hex: #564B7C. Brightness: 84. Basecolor
Hex: #5F538A. Brightness: 93.

Tints

Tint 10% white
Hex: #6F6496. Brightness: 109. Tint 20% white
Hex: #7F75A1. Brightness: 125. Tint 30% white
Hex: #8F87AD. Brightness: 142. Tint 40% white
Hex: #9F98B9. Brightness: 158. Tint 50% white
Hex: #AFA9C4. Brightness: 174. Tint 60% white
Hex: #BFBAD0. Brightness: 190. Tint 70% white
Hex: #CFCBDC. Brightness: 206. Tint 80% white
Hex: #DFDDE8. Brightness: 223. Tint 90% white
Hex: #EFEEF3. Brightness: 239.

Saturation

Saturation 10
Hex: #7F7C8A. Brightness: 126. Saturation 20
Hex: #746E8A. Brightness: 115. Saturation 30
Hex: #69608A. Brightness: 103. Saturation 40
Hex: #5F538A. Brightness: 93. Saturation 50
Hex: #54458A. Brightness: 81. Saturation 60
Hex: #49378A. Brightness: 70. Saturation 70
Hex: #3E298A. Brightness: 58. Saturation 80
Hex: #331C8A. Brightness: 47. Saturation 90
Hex: #290E8A. Brightness: 36. Saturation 100
Hex: #1E008A. Brightness: 25.

Gradient examples

CSS Code

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

.parallel_3 {background-color:#7A538A;}

.parallel_4 {background-color:#8A537E;}

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

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

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

.complimentary {background-color:#7D8A53;}

.split_complimentary_2 {background-color:#618A53;}

.triad_2 {background-color:#538A5F;}

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

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

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

.shade_90%_black {background-color:#0A080E;}

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

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

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

.shade_50%_black {background-color:#302A45;}

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

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

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

.shade_10%_black {background-color:#564B7C;}

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

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

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

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

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

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

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

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

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

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

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

.saturation_20 {background-color:#746E8A;}

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

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

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

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

.saturation_70 {background-color:#3E298A;}

.saturation_80 {background-color:#331C8A;}

.saturation_90 {background-color:#290E8A;}

.saturation_100 {background-color:#1E008A;}

.gradient1 {background-color:#5F538A;
background-image:-moz-linear-gradient(top,#9F98B9,#5F538A,#423A61);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#9F98B9),color-stop(0.5,#5F538A),color-stop(1.0,#423A61));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff9F98B9',EndColorStr='#ff423A61');
}

.gradient2 {background-color:#5F538A;
background-image:-moz-linear-gradient(top,#423A61,#5F538A,#9F98B9);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#423A61),color-stop(0.5,#5F538A),color-stop(1.0,#9F98B9));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff423A61',EndColorStr='#ff9F98B9');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code