#BADAF2 - #EBF3FB | 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 #BADAF2 to #EBF3FB

#BADAF2 #EBF3FB

Calculate the color between two colors, #BADAF2 and #EBF3FB. 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)

#BADAF2 - #EBF3FB | 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 #BADAF2 as 0% and #EBF3FB as 100%.

0.0%	0.0% #BADAF2	RGB 186 218 242	#BADAF2
16.7%	16.7% #C2DEF3	RGB 194 222 243	#C2DEF3
33.3%	33.3% #CAE2F5	RGB 202 226 245	#CAE2F5
50.0%	50.0% #D2E6F6	RGB 210 230 246	#D2E6F6
66.7%	66.7% #DAEAF8	RGB 218 234 248	#DAEAF8
83.3%	83.3% #E2EEF9	RGB 226 238 249	#E2EEF9
100.0%	100.0% #EBF3FB	RGB 235 243 251	#EBF3FB

#BADAF2 #C2DEF3 #CAE2F5 #D2E6F6 #DAEAF8 #E2EEF9 #EBF3FB

#BADAF2 - #EBF3FB

HSV Blend

#BADAF2 - #EBF3FB | 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 #BADAF2 as 0% and #EBF3FB as 100%.

0.0%	0.0% #BADAF2	RGB 186 218 242	#BADAF2
16.7%	16.7% #C1DDF3	RGB 193 221 243	#C1DDF3
33.3%	33.3% #C9E1F5	RGB 201 225 245	#C9E1F5
50.0%	50.0% #D2E5F6	RGB 210 229 246	#D2E5F6
66.7%	66.7% #DAE9F8	RGB 218 233 248	#DAE9F8
83.3%	83.3% #E2EEF9	RGB 226 238 249	#E2EEF9
100.0%	100.0% #EBF3FB	RGB 235 243 251	#EBF3FB

#BADAF2 #C1DDF3 #C9E1F5 #D2E5F6 #DAE9F8 #E2EEF9 #EBF3FB

#BADAF2 - #D2E5F6 - #EBF3FB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BADAF2 0%, #D2E5F6 50%, #EBF3FB 100%);
    background: -webkit-linear-gradient(top, #BADAF2 0%, #D2E5F6 50%, #EBF3FB 100%);
    background: linear-gradient(to bottom, #BADAF2 0%, #D2E5F6 50%, #EBF3FB 100%);
}
</style>