#BACAFF - #5677D6 | 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 #BACAFF to #5677D6

#BACAFF #5677D6

Calculate the color between two colors, #BACAFF and #5677D6. 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)

#BACAFF - #5677D6 | 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 #BACAFF as 0% and #5677D6 as 100%.

0.0%	0.0% #BACAFF	RGB 186 202 255	#BACAFF
16.7%	16.7% #A9BCF8	RGB 169 188 248	#A9BCF8
33.3%	33.3% #98AEF1	RGB 152 174 241	#98AEF1
50.0%	50.0% #88A0EA	RGB 136 160 234	#88A0EA
66.7%	66.7% #7792E3	RGB 119 146 227	#7792E3
83.3%	83.3% #6684DC	RGB 102 132 220	#6684DC
100.0%	100.0% #5677D6	RGB 86 119 214	#5677D6

#BACAFF #A9BCF8 #98AEF1 #88A0EA #7792E3 #6684DC #5677D6

#BACAFF - #5677D6

HSV Blend

#BACAFF - #5677D6 | 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 #BACAFF as 0% and #5677D6 as 100%.

0.0%	0.0% #BACAFF	RGB 186 202 255	#BACAFF
16.7%	16.7% #A7BAF8	RGB 167 186 248	#A7BAF8
33.3%	33.3% #95ABF1	RGB 149 171 241	#95ABF1
50.0%	50.0% #849DEA	RGB 132 157 234	#849DEA
66.7%	66.7% #7490E3	RGB 116 144 227	#7490E3
83.3%	83.3% #6483DC	RGB 100 131 220	#6483DC
100.0%	100.0% #5677D6	RGB 86 119 214	#5677D6

#BACAFF #A7BAF8 #95ABF1 #849DEA #7490E3 #6483DC #5677D6

#BACAFF - #849DEA - #5677D6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BACAFF 0%, #849DEA 50%, #5677D6 100%);
    background: -webkit-linear-gradient(top, #BACAFF 0%, #849DEA 50%, #5677D6 100%);
    background: linear-gradient(to bottom, #BACAFF 0%, #849DEA 50%, #5677D6 100%);
}
</style>