#0074FF - #42D0FF | 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 #0074FF to #42D0FF

#0074FF #42D0FF

Calculate the color between two colors, #0074FF and #42D0FF. 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)

#0074FF - #42D0FF | 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 #0074FF as 0% and #42D0FF as 100%.

0.0%	0.0% #0074FF	RGB 0 116 255	#0074FF
16.7%	16.7% #0B83FF	RGB 11 131 255	#0B83FF
33.3%	33.3% #1692FF	RGB 22 146 255	#1692FF
50.0%	50.0% #21A2FF	RGB 33 162 255	#21A2FF
66.7%	66.7% #2CB1FF	RGB 44 177 255	#2CB1FF
83.3%	83.3% #37C0FF	RGB 55 192 255	#37C0FF
100.0%	100.0% #42D0FF	RGB 66 208 255	#42D0FF

#0074FF #0B83FF #1692FF #21A2FF #2CB1FF #37C0FF #42D0FF

#0074FF - #42D0FF

HSV Blend

#0074FF - #42D0FF | 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 #0074FF as 0% and #42D0FF as 100%.

0.0%	0.0% #0074FF	RGB 0 116 255	#0074FF
16.7%	16.7% #0A86FF	RGB 10 134 255	#0A86FF
33.3%	33.3% #1597FF	RGB 21 151 255	#1597FF
50.0%	50.0% #20A6FF	RGB 32 166 255	#20A6FF
66.7%	66.7% #2BB5FF	RGB 43 181 255	#2BB5FF
83.3%	83.3% #36C3FF	RGB 54 195 255	#36C3FF
100.0%	100.0% #42D0FF	RGB 66 208 255	#42D0FF

#0074FF #0A86FF #1597FF #20A6FF #2BB5FF #36C3FF #42D0FF

#0074FF - #20A6FF - #42D0FF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #0074FF 0%, #20A6FF 50%, #42D0FF 100%);
    background: -webkit-linear-gradient(top, #0074FF 0%, #20A6FF 50%, #42D0FF 100%);
    background: linear-gradient(to bottom, #0074FF 0%, #20A6FF 50%, #42D0FF 100%);
}
</style>