#BAD4FF - #4D70CF | 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 #BAD4FF to #4D70CF

#BAD4FF #4D70CF

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

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

0.0%	0.0% #BAD4FF	RGB 186 212 255	#BAD4FF
16.7%	16.7% #A7C3F7	RGB 167 195 247	#A7C3F7
33.3%	33.3% #95B2EF	RGB 149 178 239	#95B2EF
50.0%	50.0% #83A2E7	RGB 131 162 231	#83A2E7
66.7%	66.7% #7191DF	RGB 113 145 223	#7191DF
83.3%	83.3% #5F80D7	RGB 95 128 215	#5F80D7
100.0%	100.0% #4D70CF	RGB 77 112 207	#4D70CF

#BAD4FF #A7C3F7 #95B2EF #83A2E7 #7191DF #5F80D7 #4D70CF

#BAD4FF - #4D70CF

HSV Blend

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

0.0%	0.0% #BAD4FF	RGB 186 212 255	#BAD4FF
16.7%	16.7% #A5C2F7	RGB 165 194 247	#A5C2F7
33.3%	33.3% #91B1EF	RGB 145 177 239	#91B1EF
50.0%	50.0% #7FA0E7	RGB 127 160 231	#7FA0E7
66.7%	66.7% #6D90DF	RGB 109 144 223	#6D90DF
83.3%	83.3% #5C7FD7	RGB 92 127 215	#5C7FD7
100.0%	100.0% #4D70CF	RGB 77 112 207	#4D70CF

#BAD4FF #A5C2F7 #91B1EF #7FA0E7 #6D90DF #5C7FD7 #4D70CF

#BAD4FF - #7FA0E7 - #4D70CF

CSS codes

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

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