Color Wheel

Basecolor
Hex: #617C86. Brightness: 117. Parallel 3
Hex: #616A87. Brightness: 107. Parallel 4
Hex: #6B6187. Brightness: 104. Adjacent/tetrad
Hex: #7E6187. Brightness: 110. Triad 1
Hex: #87617D. Brightness: 112. Split complimentary 1
Hex: #87616A. Brightness: 109. Complimentary
Hex: #876C61. Brightness: 115. Split complimentary 2
Hex: #877F61. Brightness: 126. Triad 2
Hex: #7C8761. Brightness: 127. Adjacent/tetrad
Hex: #6A8761. Brightness: 122. Parallel 1
Hex: #61876C. Brightness: 121. Parallel 2
Hex: #61877F. Brightness: 123.

Shades

Shade 90% black
Hex: #0A0C0D. Brightness: 12. Shade 80% black
Hex: #13191B. Brightness: 23. Shade 70% black
Hex: #1D2528. Brightness: 35. Shade 60% black
Hex: #273236. Brightness: 47. Shade 50% black
Hex: #303E43. Brightness: 58. Shade 40% black
Hex: #3A4A50. Brightness: 70. Shade 30% black
Hex: #44575E. Brightness: 82. Shade 20% black
Hex: #4E636B. Brightness: 94. Shade 10% black
Hex: #577079. Brightness: 106. Basecolor
Hex: #617C86. Brightness: 117.

Tints

Tint 10% white
Hex: #718992. Brightness: 131. Tint 20% white
Hex: #81969E. Brightness: 145. Tint 30% white
Hex: #90A3AA. Brightness: 158. Tint 40% white
Hex: #A0B0B6. Brightness: 172. Tint 50% white
Hex: #B0BEC2. Brightness: 186. Tint 60% white
Hex: #C0CBCF. Brightness: 200. Tint 70% white
Hex: #D0D8DB. Brightness: 214. Tint 80% white
Hex: #DFE5E7. 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: #5F7C87. Brightness: 117. Saturation 40
Hex: #517987. Brightness: 111. Saturation 50
Hex: #447587. Brightness: 104. Saturation 60
Hex: #367287. Brightness: 98. Saturation 70
Hex: #296E87. Brightness: 92. Saturation 80
Hex: #1B6A87. Brightness: 86. Saturation 90
Hex: #0E6787. Brightness: 80. Saturation 100
Hex: #006387. Brightness: 74.

Gradient examples

CSS Code

.basecolor {background-color:#617C86;}

.parallel_3 {background-color:#616A87;}

.parallel_4 {background-color:#6B6187;}

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

.triad_1 {background-color:#87617D;}

.split_complimentary_1 {background-color:#87616A;}

.complimentary {background-color:#876C61;}

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

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

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

.parallel_1 {background-color:#61876C;}

.parallel_2 {background-color:#61877F;}

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

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

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

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

.shade_50%_black {background-color:#303E43;}

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

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

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

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

.basecolor {background-color:#617C86;}

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

.tint_20%_white {background-color:#81969E;}

.tint_30%_white {background-color:#90A3AA;}

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

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

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

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

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

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

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

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

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

.saturation_40 {background-color:#517987;}

.saturation_50 {background-color:#447587;}

.saturation_60 {background-color:#367287;}

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

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

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

.saturation_100 {background-color:#006387;}

.gradient1 {background-color:#617C86;
background-image:-moz-linear-gradient(top,#A0B0B6,#617C86,#44575E);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#A0B0B6),color-stop(0.5,#617C86),color-stop(1.0,#44575E));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffA0B0B6',EndColorStr='#ff44575E');
}

.gradient2 {background-color:#617C86;
background-image:-moz-linear-gradient(top,#44575E,#617C86,#A0B0B6);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#44575E),color-stop(0.5,#617C86),color-stop(1.0,#A0B0B6));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff44575E',EndColorStr='#ffA0B0B6');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code