#B2D0FF - #367AE8 | 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 #B2D0FF to #367AE8

#B2D0FF #367AE8

Calculate the color between two colors, #B2D0FF and #367AE8. 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)

#B2D0FF - #367AE8 | 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 #B2D0FF as 0% and #367AE8 as 100%.

0.0%	0.0% #B2D0FF	RGB 178 208 255	#B2D0FF
16.7%	16.7% #9DC1FB	RGB 157 193 251	#9DC1FB
33.3%	33.3% #88B3F7	RGB 136 179 247	#88B3F7
50.0%	50.0% #74A5F3	RGB 116 165 243	#74A5F3
66.7%	66.7% #5F96EF	RGB 95 150 239	#5F96EF
83.3%	83.3% #4A88EB	RGB 74 136 235	#4A88EB
100.0%	100.0% #367AE8	RGB 54 122 232	#367AE8

#B2D0FF #9DC1FB #88B3F7 #74A5F3 #5F96EF #4A88EB #367AE8

#B2D0FF - #367AE8

HSV Blend

#B2D0FF - #367AE8 | 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 #B2D0FF as 0% and #367AE8 as 100%.

0.0%	0.0% #B2D0FF	RGB 178 208 255	#B2D0FF
16.7%	16.7% #9BC0FB	RGB 155 192 251	#9BC0FB
33.3%	33.3% #86B2F7	RGB 134 178 247	#86B2F7
50.0%	50.0% #71A3F3	RGB 113 163 243	#71A3F3
66.7%	66.7% #5C95EF	RGB 92 149 239	#5C95EF
83.3%	83.3% #4987EB	RGB 73 135 235	#4987EB
100.0%	100.0% #367AE8	RGB 54 122 232	#367AE8

#B2D0FF #9BC0FB #86B2F7 #71A3F3 #5C95EF #4987EB #367AE8

#B2D0FF - #71A3F3 - #367AE8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #B2D0FF 0%, #71A3F3 50%, #367AE8 100%);
    background: -webkit-linear-gradient(top, #B2D0FF 0%, #71A3F3 50%, #367AE8 100%);
    background: linear-gradient(to bottom, #B2D0FF 0%, #71A3F3 50%, #367AE8 100%);
}
</style>