#3C6AAD - #C7D3E7 | 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 #3C6AAD to #C7D3E7

#3C6AAD #C7D3E7

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

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

0.0%	0.0% #3C6AAD	RGB 60 106 173	#3C6AAD
16.7%	16.7% #537BB6	RGB 83 123 182	#537BB6
33.3%	33.3% #6A8DC0	RGB 106 141 192	#6A8DC0
50.0%	50.0% #819ECA	RGB 129 158 202	#819ECA
66.7%	66.7% #98B0D3	RGB 152 176 211	#98B0D3
83.3%	83.3% #AFC1DD	RGB 175 193 221	#AFC1DD
100.0%	100.0% #C7D3E7	RGB 199 211 231	#C7D3E7

#3C6AAD #537BB6 #6A8DC0 #819ECA #98B0D3 #AFC1DD #C7D3E7

#3C6AAD - #C7D3E7

HSV Blend

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

0.0%	0.0% #3C6AAD	RGB 60 106 173	#3C6AAD
16.7%	16.7% #4F78B6	RGB 79 120 182	#4F78B6
33.3%	33.3% #6388C0	RGB 99 136 192	#6388C0
50.0%	50.0% #7A99CA	RGB 122 153 202	#7A99CA
66.7%	66.7% #92ABD3	RGB 146 171 211	#92ABD3
83.3%	83.3% #ABBEDD	RGB 171 190 221	#ABBEDD
100.0%	100.0% #C7D3E7	RGB 199 211 231	#C7D3E7

#3C6AAD #4F78B6 #6388C0 #7A99CA #92ABD3 #ABBEDD #C7D3E7

#3C6AAD - #7A99CA - #C7D3E7

CSS codes

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

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