#BADAFF - #4D81CF | 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 #BADAFF to #4D81CF

#BADAFF #4D81CF

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

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

0.0%	0.0% #BADAFF	RGB 186 218 255	#BADAFF
16.7%	16.7% #A7CBF7	RGB 167 203 247	#A7CBF7
33.3%	33.3% #95BCEF	RGB 149 188 239	#95BCEF
50.0%	50.0% #83ADE7	RGB 131 173 231	#83ADE7
66.7%	66.7% #719EDF	RGB 113 158 223	#719EDF
83.3%	83.3% #5F8FD7	RGB 95 143 215	#5F8FD7
100.0%	100.0% #4D81CF	RGB 77 129 207	#4D81CF

#BADAFF #A7CBF7 #95BCEF #83ADE7 #719EDF #5F8FD7 #4D81CF

#BADAFF - #4D81CF

HSV Blend

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

0.0%	0.0% #BADAFF	RGB 186 218 255	#BADAFF
16.7%	16.7% #A5CAF7	RGB 165 202 247	#A5CAF7
33.3%	33.3% #91BBEF	RGB 145 187 239	#91BBEF
50.0%	50.0% #7FACE7	RGB 127 172 231	#7FACE7
66.7%	66.7% #6D9DDF	RGB 109 157 223	#6D9DDF
83.3%	83.3% #5C8ED7	RGB 92 142 215	#5C8ED7
100.0%	100.0% #4D81CF	RGB 77 129 207	#4D81CF

#BADAFF #A5CAF7 #91BBEF #7FACE7 #6D9DDF #5C8ED7 #4D81CF

#BADAFF - #7FACE7 - #4D81CF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BADAFF 0%, #7FACE7 50%, #4D81CF 100%);
    background: -webkit-linear-gradient(top, #BADAFF 0%, #7FACE7 50%, #4D81CF 100%);
    background: linear-gradient(to bottom, #BADAFF 0%, #7FACE7 50%, #4D81CF 100%);
}
</style>