#A2D3FF - #2D7BCE | 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 #A2D3FF to #2D7BCE

#A2D3FF #2D7BCE

Calculate the color between two colors, #A2D3FF and #2D7BCE. 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)

#A2D3FF - #2D7BCE | 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 #A2D3FF as 0% and #2D7BCE as 100%.

0.0%	0.0% #A2D3FF	RGB 162 211 255	#A2D3FF
16.7%	16.7% #8EC4F6	RGB 142 196 246	#8EC4F6
33.3%	33.3% #7BB5EE	RGB 123 181 238	#7BB5EE
50.0%	50.0% #67A7E6	RGB 103 167 230	#67A7E6
66.7%	66.7% #5498DE	RGB 84 152 222	#5498DE
83.3%	83.3% #4089D6	RGB 64 137 214	#4089D6
100.0%	100.0% #2D7BCE	RGB 45 123 206	#2D7BCE

#A2D3FF #8EC4F6 #7BB5EE #67A7E6 #5498DE #4089D6 #2D7BCE

#A2D3FF - #2D7BCE

HSV Blend

#A2D3FF - #2D7BCE | 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 #A2D3FF as 0% and #2D7BCE as 100%.

0.0%	0.0% #A2D3FF	RGB 162 211 255	#A2D3FF
16.7%	16.7% #8BC3F6	RGB 139 195 246	#8BC3F6
33.3%	33.3% #76B4EE	RGB 118 180 238	#76B4EE
50.0%	50.0% #62A5E6	RGB 98 165 230	#62A5E6
66.7%	66.7% #4F96DE	RGB 79 150 222	#4F96DE
83.3%	83.3% #3D88D6	RGB 61 136 214	#3D88D6
100.0%	100.0% #2D7BCE	RGB 45 123 206	#2D7BCE

#A2D3FF #8BC3F6 #76B4EE #62A5E6 #4F96DE #3D88D6 #2D7BCE

#A2D3FF - #62A5E6 - #2D7BCE

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #A2D3FF 0%, #62A5E6 50%, #2D7BCE 100%);
    background: -webkit-linear-gradient(top, #A2D3FF 0%, #62A5E6 50%, #2D7BCE 100%);
    background: linear-gradient(to bottom, #A2D3FF 0%, #62A5E6 50%, #2D7BCE 100%);
}
</style>