#4D7B9A - #CCD9E2 | 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 #4D7B9A to #CCD9E2

#4D7B9A #CCD9E2

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

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

0.0%	0.0% #4D7B9A	RGB 77 123 154	#4D7B9A
16.7%	16.7% #628AA6	RGB 98 138 166	#628AA6
33.3%	33.3% #779AB2	RGB 119 154 178	#779AB2
50.0%	50.0% #8CAABE	RGB 140 170 190	#8CAABE
66.7%	66.7% #A1B9CA	RGB 161 185 202	#A1B9CA
83.3%	83.3% #B6C9D6	RGB 182 201 214	#B6C9D6
100.0%	100.0% #CCD9E2	RGB 204 217 226	#CCD9E2

#4D7B9A #628AA6 #779AB2 #8CAABE #A1B9CA #B6C9D6 #CCD9E2

#4D7B9A - #CCD9E2

HSV Blend

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

0.0%	0.0% #4D7B9A	RGB 77 123 154	#4D7B9A
16.7%	16.7% #5E88A6	RGB 94 136 166	#5E88A6
33.3%	33.3% #7097B2	RGB 112 151 178	#7097B2
50.0%	50.0% #85A6BE	RGB 133 166 190	#85A6BE
66.7%	66.7% #9BB6CA	RGB 155 182 202	#9BB6CA
83.3%	83.3% #B2C7D6	RGB 178 199 214	#B2C7D6
100.0%	100.0% #CCD9E2	RGB 204 217 226	#CCD9E2

#4D7B9A #5E88A6 #7097B2 #85A6BE #9BB6CA #B2C7D6 #CCD9E2

#4D7B9A - #85A6BE - #CCD9E2

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4D7B9A 0%, #85A6BE 50%, #CCD9E2 100%);
    background: -webkit-linear-gradient(top, #4D7B9A 0%, #85A6BE 50%, #CCD9E2 100%);
    background: linear-gradient(to bottom, #4D7B9A 0%, #85A6BE 50%, #CCD9E2 100%);
}
</style>