Color Wheel

Basecolor
Hex: #3CB8DE. Brightness: 151. Parallel 3
Hex: #3C67DE. Brightness: 104. Parallel 4
Hex: #623CDE. Brightness: 90. Adjacent/tetrad
Hex: #B33CDE. Brightness: 114. Triad 1
Hex: #DE3CB8. Brightness: 123. Split complimentary 1
Hex: #DE3C67. Brightness: 113. Complimentary
Hex: #DE643C. Brightness: 132. Split complimentary 2
Hex: #DEB53C. Brightness: 179. Triad 2
Hex: #B5DE3C. Brightness: 191. Adjacent/tetrad
Hex: #64DE3C. Brightness: 167. Parallel 1
Hex: #3CDE64. Brightness: 160. Parallel 2
Hex: #3CDEB5. Brightness: 169.

Shades

Shade 90% black
Hex: #061216. Brightness: 15. Shade 80% black
Hex: #0C252C. Brightness: 30. Shade 70% black
Hex: #123743. Brightness: 45. Shade 60% black
Hex: #184A59. Brightness: 61. Shade 50% black
Hex: #1E5C6F. Brightness: 76. Shade 40% black
Hex: #246E85. Brightness: 90. Shade 30% black
Hex: #2A819B. Brightness: 106. Shade 20% black
Hex: #3093B2. Brightness: 121. Shade 10% black
Hex: #36A6C8. Brightness: 136. Basecolor
Hex: #3CB8DE. Brightness: 151.

Tints

Tint 10% white
Hex: #50BFE1. Brightness: 162. Tint 20% white
Hex: #63C6E5. Brightness: 172. Tint 30% white
Hex: #77CDE8. Brightness: 182. Tint 40% white
Hex: #8AD4EB. Brightness: 192. Tint 50% white
Hex: #9EDCEE. Brightness: 204. Tint 60% white
Hex: #B1E3F2. Brightness: 214. Tint 70% white
Hex: #C4EAF5. Brightness: 224. Tint 80% white
Hex: #D8F1F8. Brightness: 234. Tint 90% white
Hex: #ECF8FC. Brightness: 245.

Saturation

Saturation 10
Hex: #C8D9DE. Brightness: 212. Saturation 20
Hex: #B1D3DE. Brightness: 202. Saturation 30
Hex: #9BCEDE. Brightness: 193. Saturation 40
Hex: #85C9DE. Brightness: 183. Saturation 50
Hex: #6FC4DE. Brightness: 174. Saturation 60
Hex: #59BFDE. Brightness: 164. Saturation 70
Hex: #43BADE. Brightness: 155. Saturation 80
Hex: #2CB4DE. Brightness: 144. Saturation 90
Hex: #16AFDE. Brightness: 135. Saturation 100
Hex: #00AADE. Brightness: 125.

Gradient examples

CSS Code

.basecolor {background-color:#3CB8DE;}

.parallel_3 {background-color:#3C67DE;}

.parallel_4 {background-color:#623CDE;}

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

.triad_1 {background-color:#DE3CB8;}

.split_complimentary_1 {background-color:#DE3C67;}

.complimentary {background-color:#DE643C;}

.split_complimentary_2 {background-color:#DEB53C;}

.triad_2 {background-color:#B5DE3C;}

.adjacent/tetrad {background-color:#64DE3C;}

.parallel_1 {background-color:#3CDE64;}

.parallel_2 {background-color:#3CDEB5;}

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

.shade_80%_black {background-color:#0C252C;}

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

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

.shade_50%_black {background-color:#1E5C6F;}

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

.shade_30%_black {background-color:#2A819B;}

.shade_20%_black {background-color:#3093B2;}

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

.basecolor {background-color:#3CB8DE;}

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

.tint_20%_white {background-color:#63C6E5;}

.tint_30%_white {background-color:#77CDE8;}

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

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

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

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

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

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

.saturation_10 {background-color:#C8D9DE;}

.saturation_20 {background-color:#B1D3DE;}

.saturation_30 {background-color:#9BCEDE;}

.saturation_40 {background-color:#85C9DE;}

.saturation_50 {background-color:#6FC4DE;}

.saturation_60 {background-color:#59BFDE;}

.saturation_70 {background-color:#43BADE;}

.saturation_80 {background-color:#2CB4DE;}

.saturation_90 {background-color:#16AFDE;}

.saturation_100 {background-color:#00AADE;}

.gradient1 {background-color:#3CB8DE;
background-image:-moz-linear-gradient(top,#8AD4EB,#3CB8DE,#2A819B);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#8AD4EB),color-stop(0.5,#3CB8DE),color-stop(1.0,#2A819B));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff8AD4EB',EndColorStr='#ff2A819B');
}

.gradient2 {background-color:#3CB8DE;
background-image:-moz-linear-gradient(top,#2A819B,#3CB8DE,#8AD4EB);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#2A819B),color-stop(0.5,#3CB8DE),color-stop(1.0,#8AD4EB));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff2A819B',EndColorStr='#ff8AD4EB');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code