Color Wheel

Basecolor
Hex: #00C3FF. Brightness: 144. Parallel 3
Hex: #0044FF. Brightness: 69. Parallel 4
Hex: #3C00FF. Brightness: 47. Adjacent/tetrad
Hex: #BB00FF. Brightness: 85. Triad 1
Hex: #FF00C3. Brightness: 98. Split complimentary 1
Hex: #FF0044. Brightness: 84. Complimentary
Hex: #FF4000. Brightness: 114. Split complimentary 2
Hex: #FFBF00. Brightness: 188. Triad 2
Hex: #BFFF00. Brightness: 207. Adjacent/tetrad
Hex: #40FF00. Brightness: 169. Parallel 1
Hex: #00FF40. Brightness: 157. Parallel 2
Hex: #00FFBF. Brightness: 171.

Shades

Shade 90% black
Hex: #00141A. Brightness: 15. Shade 80% black
Hex: #002733. Brightness: 29. Shade 70% black
Hex: #003A4C. Brightness: 43. Shade 60% black
Hex: #004E66. Brightness: 57. Shade 50% black
Hex: #006280. Brightness: 72. Shade 40% black
Hex: #007599. Brightness: 86. Shade 30% black
Hex: #0088B2. Brightness: 100. Shade 20% black
Hex: #009CCC. Brightness: 115. Shade 10% black
Hex: #00B0E6. Brightness: 130. Basecolor
Hex: #00C3FF. Brightness: 144.

Tints

Tint 10% white
Hex: #19C9FF. Brightness: 155. Tint 20% white
Hex: #33CFFF. Brightness: 166. Tint 30% white
Hex: #4DD5FF. Brightness: 177. Tint 40% white
Hex: #66DBFF. Brightness: 188. Tint 50% white
Hex: #80E1FF. Brightness: 199. Tint 60% white
Hex: #99E7FF. Brightness: 210. Tint 70% white
Hex: #B2EDFF. Brightness: 221. Tint 80% white
Hex: #CCF3FF. Brightness: 233. Tint 90% white
Hex: #E6F9FF. Brightness: 244.

Saturation

Saturation 10
Hex: #E6F9FF. Brightness: 244. Saturation 20
Hex: #CCF3FF. Brightness: 233. Saturation 30
Hex: #B2EDFF. Brightness: 221. Saturation 40
Hex: #99E7FF. Brightness: 210. Saturation 50
Hex: #80E1FF. Brightness: 199. Saturation 60
Hex: #66DBFF. Brightness: 188. Saturation 70
Hex: #4DD5FF. Brightness: 177. Saturation 80
Hex: #33CFFF. Brightness: 166. Saturation 90
Hex: #19C9FF. Brightness: 155. Saturation 100
Hex: #00C3FF. Brightness: 144.

Gradient examples

CSS Code

.basecolor {background-color:#00C3FF;}

.parallel_3 {background-color:#0044FF;}

.parallel_4 {background-color:#3C00FF;}

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

.triad_1 {background-color:#FF00C3;}

.split_complimentary_1 {background-color:#FF0044;}

.complimentary {background-color:#FF4000;}

.split_complimentary_2 {background-color:#FFBF00;}

.triad_2 {background-color:#BFFF00;}

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

.parallel_1 {background-color:#00FF40;}

.parallel_2 {background-color:#00FFBF;}

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

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

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

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

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

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

.shade_30%_black {background-color:#0088B2;}

.shade_20%_black {background-color:#009CCC;}

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

.basecolor {background-color:#00C3FF;}

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

.tint_20%_white {background-color:#33CFFF;}

.tint_30%_white {background-color:#4DD5FF;}

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

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

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

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

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

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

.saturation_10 {background-color:#E6F9FF;}

.saturation_20 {background-color:#CCF3FF;}

.saturation_30 {background-color:#B2EDFF;}

.saturation_40 {background-color:#99E7FF;}

.saturation_50 {background-color:#80E1FF;}

.saturation_60 {background-color:#66DBFF;}

.saturation_70 {background-color:#4DD5FF;}

.saturation_80 {background-color:#33CFFF;}

.saturation_90 {background-color:#19C9FF;}

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

.gradient1 {background-color:#00C3FF;
background-image:-moz-linear-gradient(top,#66DBFF,#00C3FF,#0088B2);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#66DBFF),color-stop(0.5,#00C3FF),color-stop(1.0,#0088B2));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff66DBFF',EndColorStr='#ff0088B2');
}

.gradient2 {background-color:#00C3FF;
background-image:-moz-linear-gradient(top,#0088B2,#00C3FF,#66DBFF);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0.0,#0088B2),color-stop(0.5,#00C3FF),color-stop(1.0,#66DBFF));
filter:PROGID:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff0088B2',EndColorStr='#ff66DBFF');
}

Color picker

Color Wheel

Shades

Tints

Saturation

Gradient examples

CSS Code