#53A2FF - #A2D6F3 | 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 #53A2FF to #A2D6F3

#53A2FF #A2D6F3

Calculate the color between two colors, #53A2FF and #A2D6F3. 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)

#53A2FF - #A2D6F3 | 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 #53A2FF as 0% and #A2D6F3 as 100%.

0.0%	0.0% #53A2FF	RGB 83 162 255	#53A2FF
16.7%	16.7% #60AAFD	RGB 96 170 253	#60AAFD
33.3%	33.3% #6DB3FB	RGB 109 179 251	#6DB3FB
50.0%	50.0% #7ABCF9	RGB 122 188 249	#7ABCF9
66.7%	66.7% #87C4F7	RGB 135 196 247	#87C4F7
83.3%	83.3% #94CDF5	RGB 148 205 245	#94CDF5
100.0%	100.0% #A2D6F3	RGB 162 214 243	#A2D6F3

#53A2FF #60AAFD #6DB3FB #7ABCF9 #87C4F7 #94CDF5 #A2D6F3

#53A2FF - #A2D6F3

HSV Blend

#53A2FF - #A2D6F3 | 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 #53A2FF as 0% and #A2D6F3 as 100%.

0.0%	0.0% #53A2FF	RGB 83 162 255	#53A2FF
16.7%	16.7% #60ADFD	RGB 96 173 253	#60ADFD
33.3%	33.3% #6EB7FB	RGB 110 183 251	#6EB7FB
50.0%	50.0% #7BC0F9	RGB 123 192 249	#7BC0F9
66.7%	66.7% #88C8F7	RGB 136 200 247	#88C8F7
83.3%	83.3% #95CFF5	RGB 149 207 245	#95CFF5
100.0%	100.0% #A2D6F3	RGB 162 214 243	#A2D6F3

#53A2FF #60ADFD #6EB7FB #7BC0F9 #88C8F7 #95CFF5 #A2D6F3

#53A2FF - #7BC0F9 - #A2D6F3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #53A2FF 0%, #7BC0F9 50%, #A2D6F3 100%);
    background: -webkit-linear-gradient(top, #53A2FF 0%, #7BC0F9 50%, #A2D6F3 100%);
    background: linear-gradient(to bottom, #53A2FF 0%, #7BC0F9 50%, #A2D6F3 100%);
}
</style>