#3A7ECC - #C6D9F0 | 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 #3A7ECC to #C6D9F0

#3A7ECC #C6D9F0

Calculate the color between two colors, #3A7ECC and #C6D9F0. 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)

#3A7ECC - #C6D9F0 | 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 #3A7ECC as 0% and #C6D9F0 as 100%.

0.0%	0.0% #3A7ECC	RGB 58 126 204	#3A7ECC
16.7%	16.7% #518DD2	RGB 81 141 210	#518DD2
33.3%	33.3% #689CD8	RGB 104 156 216	#689CD8
50.0%	50.0% #80ABDE	RGB 128 171 222	#80ABDE
66.7%	66.7% #97BAE4	RGB 151 186 228	#97BAE4
83.3%	83.3% #AEC9EA	RGB 174 201 234	#AEC9EA
100.0%	100.0% #C6D9F0	RGB 198 217 240	#C6D9F0

#3A7ECC #518DD2 #689CD8 #80ABDE #97BAE4 #AEC9EA #C6D9F0

#3A7ECC - #C6D9F0

HSV Blend

#3A7ECC - #C6D9F0 | 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 #3A7ECC as 0% and #C6D9F0 as 100%.

0.0%	0.0% #3A7ECC	RGB 58 126 204	#3A7ECC
16.7%	16.7% #4E8BD2	RGB 78 139 210	#4E8BD2
33.3%	33.3% #6499D8	RGB 100 153 216	#6499D8
50.0%	50.0% #7BA8DE	RGB 123 168 222	#7BA8DE
66.7%	66.7% #93B8E4	RGB 147 184 228	#93B8E4
83.3%	83.3% #ABC8EA	RGB 171 200 234	#ABC8EA
100.0%	100.0% #C6D9F0	RGB 198 217 240	#C6D9F0

#3A7ECC #4E8BD2 #6499D8 #7BA8DE #93B8E4 #ABC8EA #C6D9F0

#3A7ECC - #7BA8DE - #C6D9F0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3A7ECC 0%, #7BA8DE 50%, #C6D9F0 100%);
    background: -webkit-linear-gradient(top, #3A7ECC 0%, #7BA8DE 50%, #C6D9F0 100%);
    background: linear-gradient(to bottom, #3A7ECC 0%, #7BA8DE 50%, #C6D9F0 100%);
}
</style>