#3C7EB0 - #C7DAE8 | 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 #3C7EB0 to #C7DAE8

#3C7EB0 #C7DAE8

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

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

0.0%	0.0% #3C7EB0	RGB 60 126 176	#3C7EB0
16.7%	16.7% #538DB9	RGB 83 141 185	#538DB9
33.3%	33.3% #6A9CC2	RGB 106 156 194	#6A9CC2
50.0%	50.0% #81ACCC	RGB 129 172 204	#81ACCC
66.7%	66.7% #98BBD5	RGB 152 187 213	#98BBD5
83.3%	83.3% #AFCADE	RGB 175 202 222	#AFCADE
100.0%	100.0% #C7DAE8	RGB 199 218 232	#C7DAE8

#3C7EB0 #538DB9 #6A9CC2 #81ACCC #98BBD5 #AFCADE #C7DAE8

#3C7EB0 - #C7DAE8

HSV Blend

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

0.0%	0.0% #3C7EB0	RGB 60 126 176	#3C7EB0
16.7%	16.7% #4F8BB9	RGB 79 139 185	#4F8BB9
33.3%	33.3% #639AC2	RGB 99 154 194	#639AC2
50.0%	50.0% #7AA9CC	RGB 122 169 204	#7AA9CC
66.7%	66.7% #92B8D5	RGB 146 184 213	#92B8D5
83.3%	83.3% #ABC9DE	RGB 171 201 222	#ABC9DE
100.0%	100.0% #C7DAE8	RGB 199 218 232	#C7DAE8

#3C7EB0 #4F8BB9 #639AC2 #7AA9CC #92B8D5 #ABC9DE #C7DAE8

#3C7EB0 - #7AA9CC - #C7DAE8

CSS codes

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

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