#2D6ED2 - #7EBEEE | 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 #2D6ED2 to #7EBEEE

#2D6ED2 #7EBEEE

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

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

0.0%	0.0% #2D6ED2	RGB 45 110 210	#2D6ED2
16.7%	16.7% #3A7BD6	RGB 58 123 214	#3A7BD6
33.3%	33.3% #4888DB	RGB 72 136 219	#4888DB
50.0%	50.0% #5596E0	RGB 85 150 224	#5596E0
66.7%	66.7% #63A3E4	RGB 99 163 228	#63A3E4
83.3%	83.3% #70B0E9	RGB 112 176 233	#70B0E9
100.0%	100.0% #7EBEEE	RGB 126 190 238	#7EBEEE

#2D6ED2 #3A7BD6 #4888DB #5596E0 #63A3E4 #70B0E9 #7EBEEE

#2D6ED2 - #7EBEEE

HSV Blend

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

0.0%	0.0% #2C6ED2	RGB 44 110 210	#2C6ED2
16.7%	16.7% #397BD6	RGB 57 123 214	#397BD6
33.3%	33.3% #4689DB	RGB 70 137 219	#4689DB
50.0%	50.0% #5397E0	RGB 83 151 224	#5397E0
66.7%	66.7% #61A4E4	RGB 97 164 228	#61A4E4
83.3%	83.3% #6FB1E9	RGB 111 177 233	#6FB1E9
100.0%	100.0% #7EBEEE	RGB 126 190 238	#7EBEEE

#2C6ED2 #397BD6 #4689DB #5397E0 #61A4E4 #6FB1E9 #7EBEEE

#2D6ED2 - #5397E0 - #7EBEEE

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #2C6ED2 0%, #5397E0 50%, #7EBEEE 100%);
    background: -webkit-linear-gradient(top, #2C6ED2 0%, #5397E0 50%, #7EBEEE 100%);
    background: linear-gradient(to bottom, #2C6ED2 0%, #5397E0 50%, #7EBEEE 100%);
}
</style>