#3E5DA2 - #AFBDC3 | 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 #3E5DA2 to #AFBDC3

#3E5DA2 #AFBDC3

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

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

0.0%	0.0% #3E5DA2	RGB 62 93 162	#3E5DA2
16.7%	16.7% #506DA7	RGB 80 109 167	#506DA7
33.3%	33.3% #637DAD	RGB 99 125 173	#637DAD
50.0%	50.0% #768DB2	RGB 118 141 178	#768DB2
66.7%	66.7% #899DB8	RGB 137 157 184	#899DB8
83.3%	83.3% #9CADBD	RGB 156 173 189	#9CADBD
100.0%	100.0% #AFBDC3	RGB 175 189 195	#AFBDC3

#3E5DA2 #506DA7 #637DAD #768DB2 #899DB8 #9CADBD #AFBDC3

#3E5DA2 - #AFBDC3

HSV Blend

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

0.0%	0.0% #3E5DA2	RGB 62 93 162	#3E5DA2
16.7%	16.7% #4E6FA7	RGB 78 111 167	#4E6FA7
33.3%	33.3% #5F81AD	RGB 95 129 173	#5F81AD
50.0%	50.0% #7292B2	RGB 114 146 178	#7292B2
66.7%	66.7% #85A2B8	RGB 133 162 184	#85A2B8
83.3%	83.3% #99B0BD	RGB 153 176 189	#99B0BD
100.0%	100.0% #AFBDC3	RGB 175 189 195	#AFBDC3

#3E5DA2 #4E6FA7 #5F81AD #7292B2 #85A2B8 #99B0BD #AFBDC3

#3E5DA2 - #7292B2 - #AFBDC3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3E5DA2 0%, #7292B2 50%, #AFBDC3 100%);
    background: -webkit-linear-gradient(top, #3E5DA2 0%, #7292B2 50%, #AFBDC3 100%);
    background: linear-gradient(to bottom, #3E5DA2 0%, #7292B2 50%, #AFBDC3 100%);
}
</style>