#A2D6FF - #2D7CCE | 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 #A2D6FF to #2D7CCE

#A2D6FF #2D7CCE

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

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

0.0%	0.0% #A2D6FF	RGB 162 214 255	#A2D6FF
16.7%	16.7% #8EC7F6	RGB 142 199 246	#8EC7F6
33.3%	33.3% #7BB8EE	RGB 123 184 238	#7BB8EE
50.0%	50.0% #67A9E6	RGB 103 169 230	#67A9E6
66.7%	66.7% #549ADE	RGB 84 154 222	#549ADE
83.3%	83.3% #408BD6	RGB 64 139 214	#408BD6
100.0%	100.0% #2D7CCE	RGB 45 124 206	#2D7CCE

#A2D6FF #8EC7F6 #7BB8EE #67A9E6 #549ADE #408BD6 #2D7CCE

#A2D6FF - #2D7CCE

HSV Blend

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

0.0%	0.0% #A2D6FF	RGB 162 214 255	#A2D6FF
16.7%	16.7% #8BC6F6	RGB 139 198 246	#8BC6F6
33.3%	33.3% #76B6EE	RGB 118 182 238	#76B6EE
50.0%	50.0% #62A7E6	RGB 98 167 230	#62A7E6
66.7%	66.7% #4F98DE	RGB 79 152 222	#4F98DE
83.3%	83.3% #3D8AD6	RGB 61 138 214	#3D8AD6
100.0%	100.0% #2D7CCE	RGB 45 124 206	#2D7CCE

#A2D6FF #8BC6F6 #76B6EE #62A7E6 #4F98DE #3D8AD6 #2D7CCE

#A2D6FF - #62A7E6 - #2D7CCE

CSS codes

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

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