#ABCCEC - #4F7DB9 | 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 #ABCCEC to #4F7DB9

#ABCCEC #4F7DB9

Calculate the color between two colors, #ABCCEC and #4F7DB9. 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)

#ABCCEC - #4F7DB9 | 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 #ABCCEC as 0% and #4F7DB9 as 100%.

0.0%	0.0% #ABCCEC	RGB 171 204 236	#ABCCEC
16.7%	16.7% #9BBEE3	RGB 155 190 227	#9BBEE3
33.3%	33.3% #8CB1DB	RGB 140 177 219	#8CB1DB
50.0%	50.0% #7DA4D2	RGB 125 164 210	#7DA4D2
66.7%	66.7% #6D97CA	RGB 109 151 202	#6D97CA
83.3%	83.3% #5E8AC1	RGB 94 138 193	#5E8AC1
100.0%	100.0% #4F7DB9	RGB 79 125 185	#4F7DB9

#ABCCEC #9BBEE3 #8CB1DB #7DA4D2 #6D97CA #5E8AC1 #4F7DB9

#ABCCEC - #4F7DB9

HSV Blend

#ABCCEC - #4F7DB9 | 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 #ABCCEC as 0% and #4F7DB9 as 100%.

0.0%	0.0% #ABCCEC	RGB 171 204 236	#ABCCEC
16.7%	16.7% #99BEE3	RGB 153 190 227	#99BEE3
33.3%	33.3% #88B0DB	RGB 136 176 219	#88B0DB
50.0%	50.0% #79A3D2	RGB 121 163 210	#79A3D2
66.7%	66.7% #6A96CA	RGB 106 150 202	#6A96CA
83.3%	83.3% #5C89C1	RGB 92 137 193	#5C89C1
100.0%	100.0% #4F7DB9	RGB 79 125 185	#4F7DB9

#ABCCEC #99BEE3 #88B0DB #79A3D2 #6A96CA #5C89C1 #4F7DB9

#ABCCEC - #79A3D2 - #4F7DB9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABCCEC 0%, #79A3D2 50%, #4F7DB9 100%);
    background: -webkit-linear-gradient(top, #ABCCEC 0%, #79A3D2 50%, #4F7DB9 100%);
    background: linear-gradient(to bottom, #ABCCEC 0%, #79A3D2 50%, #4F7DB9 100%);
}
</style>