#DF4ED9 - #B7D2EB | 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 #DF4ED9 to #B7D2EB

#DF4ED9 #B7D2EB

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

#DF4ED9 - #B7D2EB | 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 #DF4ED9 as 0% and #B7D2EB as 100%.

0.0%	0.0% #DF4ED9	RGB 223 78 217	#DF4ED9
16.7%	16.7% #D864DC	RGB 216 100 220	#D864DC
33.3%	33.3% #D17ADF	RGB 209 122 223	#D17ADF
50.0%	50.0% #CB90E2	RGB 203 144 226	#CB90E2
66.7%	66.7% #C4A6E5	RGB 196 166 229	#C4A6E5
83.3%	83.3% #BDBCE8	RGB 189 188 232	#BDBCE8
100.0%	100.0% #B7D2EB	RGB 183 210 235	#B7D2EB

#DF4ED9 #D864DC #D17ADF #CB90E2 #C4A6E5 #BDBCE8 #B7D2EB

#DF4ED9 - #B7D2EB

HSV Blend

#DF4ED9 - #B7D2EB | 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 #DF4ED9 as 0% and #B7D2EB as 100%.

0.0%	0.0% #DF4ED9	RGB 223 78 217	#DF4ED9
16.7%	16.7% #C45EE1	RGB 196 94 225	#C45EE1
33.3%	33.3% #AB6FE3	RGB 171 111 227	#AB6FE3
50.0%	50.0% #9B81E5	RGB 155 129 229	#9B81E5
66.7%	66.7% #9292E7	RGB 146 146 231	#9292E7
83.3%	83.3% #A4B6E9	RGB 164 182 233	#A4B6E9
100.0%	100.0% #B7D2EB	RGB 183 210 235	#B7D2EB

#DF4ED9 #C45EE1 #AB6FE3 #9B81E5 #9292E7 #A4B6E9 #B7D2EB

#DF4ED9 - #9B81E5 - #B7D2EB

CSS codes

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

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