#3F478D - #C8CADE | 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 #3F478D to #C8CADE

#3F478D #C8CADE

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

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

0.0%	0.0% #3F478D	RGB 63 71 141	#3F478D
16.7%	16.7% #555C9A	RGB 85 92 154	#555C9A
33.3%	33.3% #6C72A8	RGB 108 114 168	#6C72A8
50.0%	50.0% #8388B5	RGB 131 136 181	#8388B5
66.7%	66.7% #9A9EC3	RGB 154 158 195	#9A9EC3
83.3%	83.3% #B1B4D0	RGB 177 180 208	#B1B4D0
100.0%	100.0% #C8CADE	RGB 200 202 222	#C8CADE

#3F478D #555C9A #6C72A8 #8388B5 #9A9EC3 #B1B4D0 #C8CADE

#3F478D - #C8CADE

HSV Blend

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

0.0%	0.0% #3F468D	RGB 63 70 141	#3F468D
16.7%	16.7% #50589A	RGB 80 88 154	#50589A
33.3%	33.3% #646BA8	RGB 100 107 168	#646BA8
50.0%	50.0% #7A80B5	RGB 122 128 181	#7A80B5
66.7%	66.7% #9296C3	RGB 146 150 195	#9296C3
83.3%	83.3% #ACAFD0	RGB 172 175 208	#ACAFD0
100.0%	100.0% #C8CADE	RGB 200 202 222	#C8CADE

#3F468D #50589A #646BA8 #7A80B5 #9296C3 #ACAFD0 #C8CADE

#3F478D - #7A80B5 - #C8CADE

CSS codes

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

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