#3C7CBC - #A1C4D6 | 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 #3C7CBC to #A1C4D6

#3C7CBC #A1C4D6

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

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

0.0%	0.0% #3C7CBC	RGB 60 124 188	#3C7CBC
16.7%	16.7% #4C88C0	RGB 76 136 192	#4C88C0
33.3%	33.3% #5D94C4	RGB 93 148 196	#5D94C4
50.0%	50.0% #6EA0C9	RGB 110 160 201	#6EA0C9
66.7%	66.7% #7FACCD	RGB 127 172 205	#7FACCD
83.3%	83.3% #90B8D1	RGB 144 184 209	#90B8D1
100.0%	100.0% #A1C4D6	RGB 161 196 214	#A1C4D6

#3C7CBC #4C88C0 #5D94C4 #6EA0C9 #7FACCD #90B8D1 #A1C4D6

#3C7CBC - #A1C4D6

HSV Blend

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

0.0%	0.0% #3C7CBC	RGB 60 124 188	#3C7CBC
16.7%	16.7% #4B88C0	RGB 75 136 192	#4B88C0
33.3%	33.3% #5B95C4	RGB 91 149 196	#5B95C4
50.0%	50.0% #6BA1C9	RGB 107 161 201	#6BA1C9
66.7%	66.7% #7CADCD	RGB 124 173 205	#7CADCD
83.3%	83.3% #8EB9D1	RGB 142 185 209	#8EB9D1
100.0%	100.0% #A1C4D6	RGB 161 196 214	#A1C4D6

#3C7CBC #4B88C0 #5B95C4 #6BA1C9 #7CADCD #8EB9D1 #A1C4D6

#3C7CBC - #6BA1C9 - #A1C4D6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3C7CBC 0%, #6BA1C9 50%, #A1C4D6 100%);
    background: -webkit-linear-gradient(top, #3C7CBC 0%, #6BA1C9 50%, #A1C4D6 100%);
    background: linear-gradient(to bottom, #3C7CBC 0%, #6BA1C9 50%, #A1C4D6 100%);
}
</style>