#0063D6 - #4DC2FF | 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 #0063D6 to #4DC2FF

#0063D6 #4DC2FF

Calculate the color between two colors, #0063D6 and #4DC2FF. 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)

#0063D6 - #4DC2FF | 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 #0063D6 as 0% and #4DC2FF as 100%.

0.0%	0.0% #0063D6	RGB 0 99 214	#0063D6
16.7%	16.7% #0C72DC	RGB 12 114 220	#0C72DC
33.3%	33.3% #1982E3	RGB 25 130 227	#1982E3
50.0%	50.0% #2692EA	RGB 38 146 234	#2692EA
66.7%	66.7% #33A2F1	RGB 51 162 241	#33A2F1
83.3%	83.3% #40B2F8	RGB 64 178 248	#40B2F8
100.0%	100.0% #4DC2FF	RGB 77 194 255	#4DC2FF

#0063D6 #0C72DC #1982E3 #2692EA #33A2F1 #40B2F8 #4DC2FF

#0063D6 - #4DC2FF

HSV Blend

#0063D6 - #4DC2FF | 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 #0063D6 as 0% and #4DC2FF as 100%.

0.0%	0.0% #0063D6	RGB 0 99 214	#0063D6
16.7%	16.7% #0B72DC	RGB 11 114 220	#0B72DC
33.3%	33.3% #1682E3	RGB 22 130 227	#1682E3
50.0%	50.0% #2392EA	RGB 35 146 234	#2392EA
66.7%	66.7% #30A2F1	RGB 48 162 241	#30A2F1
83.3%	83.3% #3EB2F8	RGB 62 178 248	#3EB2F8
100.0%	100.0% #4DC2FF	RGB 77 194 255	#4DC2FF

#0063D6 #0B72DC #1682E3 #2392EA #30A2F1 #3EB2F8 #4DC2FF

#0063D6 - #2392EA - #4DC2FF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #0063D6 0%, #2392EA 50%, #4DC2FF 100%);
    background: -webkit-linear-gradient(top, #0063D6 0%, #2392EA 50%, #4DC2FF 100%);
    background: linear-gradient(to bottom, #0063D6 0%, #2392EA 50%, #4DC2FF 100%);
}
</style>