#BBC3FF - #556ED5 | 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 #BBC3FF to #556ED5

#BBC3FF #556ED5

Calculate the color between two colors, #BBC3FF and #556ED5. 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)

#BBC3FF - #556ED5 | 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 #BBC3FF as 0% and #556ED5 as 100%.

0.0%	0.0% #BBC3FF	RGB 187 195 255	#BBC3FF
16.7%	16.7% #AAB4F8	RGB 170 180 248	#AAB4F8
33.3%	33.3% #99A6F1	RGB 153 166 241	#99A6F1
50.0%	50.0% #8898EA	RGB 136 152 234	#8898EA
66.7%	66.7% #778AE3	RGB 119 138 227	#778AE3
83.3%	83.3% #667CDC	RGB 102 124 220	#667CDC
100.0%	100.0% #556ED5	RGB 85 110 213	#556ED5

#BBC3FF #AAB4F8 #99A6F1 #8898EA #778AE3 #667CDC #556ED5

#BBC3FF - #556ED5

HSV Blend

#BBC3FF - #556ED5 | 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 #BBC3FF as 0% and #556ED5 as 100%.

0.0%	0.0% #BBC3FF	RGB 187 195 255	#BBC3FF
16.7%	16.7% #A8B2F8	RGB 168 178 248	#A8B2F8
33.3%	33.3% #95A2F1	RGB 149 162 241	#95A2F1
50.0%	50.0% #8494EA	RGB 132 148 234	#8494EA
66.7%	66.7% #7386E3	RGB 115 134 227	#7386E3
83.3%	83.3% #6479DC	RGB 100 121 220	#6479DC
100.0%	100.0% #556ED5	RGB 85 110 213	#556ED5

#BBC3FF #A8B2F8 #95A2F1 #8494EA #7386E3 #6479DC #556ED5

#BBC3FF - #8494EA - #556ED5

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BBC3FF 0%, #8494EA 50%, #556ED5 100%);
    background: -webkit-linear-gradient(top, #BBC3FF 0%, #8494EA 50%, #556ED5 100%);
    background: linear-gradient(to bottom, #BBC3FF 0%, #8494EA 50%, #556ED5 100%);
}
</style>