#4C7EAB - #CBDAE7 | 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 #4C7EAB to #CBDAE7

#4C7EAB #CBDAE7

Calculate the color between two colors, #4C7EAB and #CBDAE7. 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)

#4C7EAB - #CBDAE7 | 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 #4C7EAB as 0% and #CBDAE7 as 100%.

0.0%	0.0% #4C7EAB	RGB 76 126 171	#4C7EAB
16.7%	16.7% #618DB5	RGB 97 141 181	#618DB5
33.3%	33.3% #769CBF	RGB 118 156 191	#769CBF
50.0%	50.0% #8BACC9	RGB 139 172 201	#8BACC9
66.7%	66.7% #A0BBD3	RGB 160 187 211	#A0BBD3
83.3%	83.3% #B5CADD	RGB 181 202 221	#B5CADD
100.0%	100.0% #CBDAE7	RGB 203 218 231	#CBDAE7

#4C7EAB #618DB5 #769CBF #8BACC9 #A0BBD3 #B5CADD #CBDAE7

#4C7EAB - #CBDAE7

HSV Blend

#4C7EAB - #CBDAE7 | 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 #4C7EAB as 0% and #CBDAE7 as 100%.

0.0%	0.0% #4C7EAB	RGB 76 126 171	#4C7EAB
16.7%	16.7% #5D8BB5	RGB 93 139 181	#5D8BB5
33.3%	33.3% #709ABF	RGB 112 154 191	#709ABF
50.0%	50.0% #84A9C9	RGB 132 169 201	#84A9C9
66.7%	66.7% #9AB8D3	RGB 154 184 211	#9AB8D3
83.3%	83.3% #B2C9DD	RGB 178 201 221	#B2C9DD
100.0%	100.0% #CBDAE7	RGB 203 218 231	#CBDAE7

#4C7EAB #5D8BB5 #709ABF #84A9C9 #9AB8D3 #B2C9DD #CBDAE7

#4C7EAB - #84A9C9 - #CBDAE7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4C7EAB 0%, #84A9C9 50%, #CBDAE7 100%);
    background: -webkit-linear-gradient(top, #4C7EAB 0%, #84A9C9 50%, #CBDAE7 100%);
    background: linear-gradient(to bottom, #4C7EAB 0%, #84A9C9 50%, #CBDAE7 100%);
}
</style>