#ABC4FB - #5270DF | 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 #ABC4FB to #5270DF

#ABC4FB #5270DF

Calculate the color between two colors, #ABC4FB and #5270DF. 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)

#ABC4FB - #5270DF | 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 #ABC4FB as 0% and #5270DF as 100%.

0.0%	0.0% #ABC4FB	RGB 171 196 251	#ABC4FB
16.7%	16.7% #9CB6F6	RGB 156 182 246	#9CB6F6
33.3%	33.3% #8DA8F1	RGB 141 168 241	#8DA8F1
50.0%	50.0% #7E9AED	RGB 126 154 237	#7E9AED
66.7%	66.7% #6F8CE8	RGB 111 140 232	#6F8CE8
83.3%	83.3% #607EE3	RGB 96 126 227	#607EE3
100.0%	100.0% #5270DF	RGB 82 112 223	#5270DF

#ABC4FB #9CB6F6 #8DA8F1 #7E9AED #6F8CE8 #607EE3 #5270DF

#ABC4FB - #5270DF

HSV Blend

#ABC4FB - #5270DF | 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 #ABC4FB as 0% and #5270DF as 100%.

0.0%	0.0% #ABC4FB	RGB 171 196 251	#ABC4FB
16.7%	16.7% #9AB5F6	RGB 154 181 246	#9AB5F6
33.3%	33.3% #8BA7F1	RGB 139 167 241	#8BA7F1
50.0%	50.0% #7C99ED	RGB 124 153 237	#7C99ED
66.7%	66.7% #6D8BE8	RGB 109 139 232	#6D8BE8
83.3%	83.3% #5F7DE3	RGB 95 125 227	#5F7DE3
100.0%	100.0% #5270DF	RGB 82 112 223	#5270DF

#ABC4FB #9AB5F6 #8BA7F1 #7C99ED #6D8BE8 #5F7DE3 #5270DF

#ABC4FB - #7C99ED - #5270DF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABC4FB 0%, #7C99ED 50%, #5270DF 100%);
    background: -webkit-linear-gradient(top, #ABC4FB 0%, #7C99ED 50%, #5270DF 100%);
    background: linear-gradient(to bottom, #ABC4FB 0%, #7C99ED 50%, #5270DF 100%);
}
</style>