Color Wheel

Basecolor
Hex: #667C85. Brightness: 118. Parallel 3
Hex: #666D85. Brightness: 110. Parallel 4
Hex: #6F6685. Brightness: 108. Adjacent/tetrad
Hex: #7E6685. Brightness: 113. Triad 1
Hex: #85667C. Brightness: 114. Split complimentary 1
Hex: #85666D. Brightness: 112. Complimentary
Hex: #856F66. Brightness: 117. Split complimentary 2
Hex: #857F66. Brightness: 126. Triad 2
Hex: #7B8566. Brightness: 126. Adjacent/tetrad
Hex: #6C8566. Brightness: 122. Parallel 1
Hex: #66856F. Brightness: 121. Parallel 2
Hex: #66857F. Brightness: 123.

Shades

Shade 90% black
Hex: #0A0C0D. Brightness: 12. Shade 80% black
Hex: #14191B. Brightness: 24. Shade 70% black
Hex: #1F2528. Brightness: 36. Shade 60% black
Hex: #293235. Brightness: 48. Shade 50% black
Hex: #333E42. Brightness: 59. Shade 40% black
Hex: #3D4A50. Brightness: 71. Shade 30% black
Hex: #47575D. Brightness: 83. Shade 20% black
Hex: #52636A. Brightness: 95. Shade 10% black
Hex: #5C7078. Brightness: 107. Basecolor
Hex: #667C85. Brightness: 118.

Tints

Tint 10% white
Hex: #758991. Brightness: 132. Tint 20% white
Hex: #85969D. Brightness: 146. Tint 30% white
Hex: #94A3AA. Brightness: 159. Tint 40% white
Hex: #A3B0B6. Brightness: 173. Tint 50% white
Hex: #B2BEC2. Brightness: 187. Tint 60% white
Hex: #C2CBCE. Brightness: 201. Tint 70% white
Hex: #D1D8DA. Brightness: 214. Tint 80% white
Hex: #E0E5E7. Brightness: 228. Tint 90% white
Hex: #F0F2F3. Brightness: 242.

Saturation

Saturation 10
Hex: #778185. Brightness: 126. Saturation 20
Hex: #6A7D85. Brightness: 120. Saturation 30
Hex: #5D7985. Brightness: 114. Saturation 40
Hex: #507685. Brightness: 108. Saturation 50
Hex: #427285. Brightness: 102. Saturation 60
Hex: #356E85. Brightness: 96. Saturation 70
Hex: #286A85. Brightness: 89. Saturation 80
Hex: #1B6785. Brightness: 84. Saturation 90
Hex: #0D6385. Brightness: 77. Saturation 100
Hex: #005F85. Brightness: 71.

Gradient examples

CSS Code

.basecolor {background-color:#667C85;}

.parallel_3 {background-color:#666D85;}

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

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

.triad_1 {background-color:#85667C;}

.split_complimentary_1 {background-color:#85666D;}

.complimentary {background-color:#856F66;}

.split_complimentary_2 {background-color:#857F66;}

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

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

.parallel_1 {background-color:#66856F;}

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

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

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

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

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

.shade_50%_black {background-color:#333E42;}

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

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

.shade_20%_black {background-color:#52636A;}

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

.basecolor {background-color:#667C85;}

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

.tint_20%_white {background-color:#85969D;}

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

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

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

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

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

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

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

.saturation_10 {background-color:#778185;}

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

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

.saturation_40 {background-color:#507685;}

.saturation_50 {background-color:#427285;}

.saturation_60 {background-color:#356E85;}

.saturation_70 {background-color:#286A85;}

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

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

.saturation_100 {background-color:#005F85;}

.gradient1 {background-color:#667C85;
background-image:-moz-linear-gradient(top,#A3B0B6,#667C85,#47575D);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#A3B0B6),color-stop(0.5,#667C85),color-stop(1.0,#47575D));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffA3B0B6',EndColorStr='#ff47575D');
}

.gradient2 {background-color:#667C85;
background-image:-moz-linear-gradient(top,#47575D,#667C85,#A3B0B6);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#47575D),color-stop(0.5,#667C85),color-stop(1.0,#A3B0B6));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff47575D',EndColorStr='#ffA3B0B6');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code