#4680D9 - #B5ECB9 | 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 #4680D9 to #B5ECB9

#4680D9 #B5ECB9

Calculate the color between two colors, #4680D9 and #B5ECB9. 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)

#4680D9 - #B5ECB9 | 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 #4680D9 as 0% and #B5ECB9 as 100%.

0.0%	0.0% #4680D9	RGB 70 128 217	#4680D9
16.7%	16.7% #5892D3	RGB 88 146 211	#5892D3
33.3%	33.3% #6BA4CE	RGB 107 164 206	#6BA4CE
50.0%	50.0% #7DB6C9	RGB 125 182 201	#7DB6C9
66.7%	66.7% #90C8C3	RGB 144 200 195	#90C8C3
83.3%	83.3% #A2DABE	RGB 162 218 190	#A2DABE
100.0%	100.0% #B5ECB9	RGB 181 236 185	#B5ECB9

#4680D9 #5892D3 #6BA4CE #7DB6C9 #90C8C3 #A2DABE #B5ECB9

#4680D9 - #B5ECB9

HSV Blend

#4680D9 - #B5ECB9 | 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 #4680D9 as 0% and #B5ECB9 as 100%.

0.0%	0.0% #4680D9	RGB 70 128 217	#4680D9
16.7%	16.7% #57ADDC	RGB 87 173 220	#57ADDC
33.3%	33.3% #69D4DF	RGB 105 212 223	#69D4DF
50.0%	50.0% #7BE2D1	RGB 123 226 209	#7BE2D1
66.7%	66.7% #8EE5C1	RGB 142 229 193	#8EE5C1
83.3%	83.3% #A1E8B8	RGB 161 232 184	#A1E8B8
100.0%	100.0% #B5ECB9	RGB 181 236 185	#B5ECB9

#4680D9 #57ADDC #69D4DF #7BE2D1 #8EE5C1 #A1E8B8 #B5ECB9

#4680D9 - #7BE2D1 - #B5ECB9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4680D9 0%, #7BE2D1 50%, #B5ECB9 100%);
    background: -webkit-linear-gradient(top, #4680D9 0%, #7BE2D1 50%, #B5ECB9 100%);
    background: linear-gradient(to bottom, #4680D9 0%, #7BE2D1 50%, #B5ECB9 100%);
}
</style>