#0060E2 - #42C0FF | colorate

colorate is a color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work. Make this site better

Blend #0060E2 to #42C0FF

#0060E2 #42C0FF

Calculate the color between two colors, #0060E2 and #42C0FF. In calculation of RGB values, saturation between the dissimilar colors is low. In calculating of HSV values, saturation between the dissimilar colors is not low.

RGB Blend(Linear)

#0060E2 - #42C0FF | colorate

Calculation of color between two colors based on RGB value. For colors that are distant from each other, the saturation between the two colors decreases. Expand the color between two colors with #0060E2 as 0% and #42C0FF as 100%.

0.0%	0.0% #0060E2	RGB 0 96 226	#0060E2
16.7%	16.7% #0B70E6	RGB 11 112 230	#0B70E6
33.3%	33.3% #1680EB	RGB 22 128 235	#1680EB
50.0%	50.0% #2190F0	RGB 33 144 240	#2190F0
66.7%	66.7% #2CA0F5	RGB 44 160 245	#2CA0F5
83.3%	83.3% #37B0FA	RGB 55 176 250	#37B0FA
100.0%	100.0% #42C0FF	RGB 66 192 255	#42C0FF

#0060E2 #0B70E6 #1680EB #2190F0 #2CA0F5 #37B0FA #42C0FF

#0060E2 - #42C0FF

HSV Blend

#0060E2 - #42C0FF | colorate

Calculation of color between two colors based on HSV value. Even between distinct colors of color, the saturation between the two colors does not decrease. Expand the color between two colors with #0060E2 as 0% and #42C0FF as 100%.

0.0%	0.0% #0060E2	RGB 0 96 226	#0060E2
16.7%	16.7% #0970E6	RGB 9 112 230	#0970E6
33.3%	33.3% #1481EB	RGB 20 129 235	#1481EB
50.0%	50.0% #1F91F0	RGB 31 145 240	#1F91F0
66.7%	66.7% #2AA1F5	RGB 42 161 245	#2AA1F5
83.3%	83.3% #35B0FA	RGB 53 176 250	#35B0FA
100.0%	100.0% #42C0FF	RGB 66 192 255	#42C0FF

#0060E2 #0970E6 #1481EB #1F91F0 #2AA1F5 #35B0FA #42C0FF

#0060E2 - #1F91F0 - #42C0FF

CSS codes

<style type="text/css">
/* RGB Gradient */
div {
    background: -moz-linear-gradient(top, #0060E2 0%, #42C0FF 100%);
    background: -webkit-linear-gradient(top, #0060E2 0%, #42C0FF 100%);
    background: linear-gradient(to bottom, #0060E2 0%, #42C0FF 100%);
}

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #0060E2 0%, #1F91F0 50%, #42C0FF 100%);
    background: -webkit-linear-gradient(top, #0060E2 0%, #1F91F0 50%, #42C0FF 100%);
    background: linear-gradient(to bottom, #0060E2 0%, #1F91F0 50%, #42C0FF 100%);
}
</style>