Color Wheel

Basecolor
Hex: #6B7C84. Brightness: 120. Parallel 3
Hex: #6B7085. Brightness: 113. Parallel 4
Hex: #736B85. Brightness: 112. Adjacent/tetrad
Hex: #806B85. Brightness: 116. Triad 1
Hex: #856B7D. Brightness: 117. Split complimentary 1
Hex: #856B70. Brightness: 115. Complimentary
Hex: #85746B. Brightness: 120. Split complimentary 2
Hex: #85806B. Brightness: 127. Triad 2
Hex: #7C856B. Brightness: 127. Adjacent/tetrad
Hex: #70856B. Brightness: 124. Parallel 1
Hex: #6B8574. Brightness: 123. Parallel 2
Hex: #6B8580. Brightness: 125.

Shades

Shade 90% black
Hex: #0B0C0D. Brightness: 12. Shade 80% black
Hex: #15191A. Brightness: 24. Shade 70% black
Hex: #202528. Brightness: 36. Shade 60% black
Hex: #2B3235. Brightness: 48. Shade 50% black
Hex: #363E42. Brightness: 60. Shade 40% black
Hex: #404A4F. Brightness: 72. Shade 30% black
Hex: #4B575C. Brightness: 84. Shade 20% black
Hex: #56636A. Brightness: 96. Shade 10% black
Hex: #607077. Brightness: 108. Basecolor
Hex: #6B7C84. Brightness: 120.

Tints

Tint 10% white
Hex: #7A8990. Brightness: 133. Tint 20% white
Hex: #89969D. Brightness: 147. Tint 30% white
Hex: #97A3A9. Brightness: 160. Tint 40% white
Hex: #A6B0B5. Brightness: 174. Tint 50% white
Hex: #B5BEC2. Brightness: 188. Tint 60% white
Hex: #C4CBCE. Brightness: 201. Tint 70% white
Hex: #D3D8DA. Brightness: 215. Tint 80% white
Hex: #E1E5E6. Brightness: 228. Tint 90% white
Hex: #F0F2F3. Brightness: 242.

Saturation

Saturation 10
Hex: #778085. Brightness: 126. Saturation 20
Hex: #6A7C85. Brightness: 120. Saturation 30
Hex: #5D7885. Brightness: 113. Saturation 40
Hex: #507485. Brightness: 107. Saturation 50
Hex: #427085. Brightness: 101. Saturation 60
Hex: #356B85. Brightness: 94. Saturation 70
Hex: #286785. Brightness: 88. Saturation 80
Hex: #1B6385. Brightness: 81. Saturation 90
Hex: #0D5F85. Brightness: 75. Saturation 100
Hex: #005B85. Brightness: 69.

Gradient examples

CSS Code

.basecolor {background-color:#6B7C84;}

.parallel_3 {background-color:#6B7085;}

.parallel_4 {background-color:#736B85;}

.adjacent/tetrad {background-color:#806B85;}

.triad_1 {background-color:#856B7D;}

.split_complimentary_1 {background-color:#856B70;}

.complimentary {background-color:#85746B;}

.split_complimentary_2 {background-color:#85806B;}

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

.adjacent/tetrad {background-color:#70856B;}

.parallel_1 {background-color:#6B8574;}

.parallel_2 {background-color:#6B8580;}

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

.shade_80%_black {background-color:#15191A;}

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

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

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

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

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

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

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

.basecolor {background-color:#6B7C84;}

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

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

.tint_30%_white {background-color:#97A3A9;}

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

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

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

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

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

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

.saturation_10 {background-color:#778085;}

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

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

.saturation_40 {background-color:#507485;}

.saturation_50 {background-color:#427085;}

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

.saturation_70 {background-color:#286785;}

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

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

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

.gradient1 {background-color:#6B7C84;
background-image:-moz-linear-gradient(top,#A6B0B5,#6B7C84,#4B575C);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#A6B0B5),color-stop(0.5,#6B7C84),color-stop(1.0,#4B575C));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffA6B0B5',EndColorStr='#ff4B575C');
}

.gradient2 {background-color:#6B7C84;
background-image:-moz-linear-gradient(top,#4B575C,#6B7C84,#A6B0B5);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#4B575C),color-stop(0.5,#6B7C84),color-stop(1.0,#A6B0B5));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff4B575C',EndColorStr='#ffA6B0B5');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code