#487BCD - #CAD9F0 | 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 #487BCD to #CAD9F0

#487BCD #CAD9F0

Calculate the color between two colors, #487BCD and #CAD9F0. 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)

#487BCD - #CAD9F0 | 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 #487BCD as 0% and #CAD9F0 as 100%.

0.0%	0.0% #487BCD	RGB 72 123 205	#487BCD
16.7%	16.7% #5D8AD2	RGB 93 138 210	#5D8AD2
33.3%	33.3% #739AD8	RGB 115 154 216	#739AD8
50.0%	50.0% #89AADE	RGB 137 170 222	#89AADE
66.7%	66.7% #9EB9E4	RGB 158 185 228	#9EB9E4
83.3%	83.3% #B4C9EA	RGB 180 201 234	#B4C9EA
100.0%	100.0% #CAD9F0	RGB 202 217 240	#CAD9F0

#487BCD #5D8AD2 #739AD8 #89AADE #9EB9E4 #B4C9EA #CAD9F0

#487BCD - #CAD9F0

HSV Blend

#487BCD - #CAD9F0 | 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 #487BCD as 0% and #CAD9F0 as 100%.

0.0%	0.0% #477ACD	RGB 71 122 205	#477ACD
16.7%	16.7% #5B89D2	RGB 91 137 210	#5B89D2
33.3%	33.3% #6F98D8	RGB 111 152 216	#6F98D8
50.0%	50.0% #84A7DE	RGB 132 167 222	#84A7DE
66.7%	66.7% #9AB7E4	RGB 154 183 228	#9AB7E4
83.3%	83.3% #B1C8EA	RGB 177 200 234	#B1C8EA
100.0%	100.0% #CAD9F0	RGB 202 217 240	#CAD9F0

#477ACD #5B89D2 #6F98D8 #84A7DE #9AB7E4 #B1C8EA #CAD9F0

#487BCD - #84A7DE - #CAD9F0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #477ACD 0%, #84A7DE 50%, #CAD9F0 100%);
    background: -webkit-linear-gradient(top, #477ACD 0%, #84A7DE 50%, #CAD9F0 100%);
    background: linear-gradient(to bottom, #477ACD 0%, #84A7DE 50%, #CAD9F0 100%);
}
</style>