#5A8EA3 - #CFDEE4 | 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 #5A8EA3 to #CFDEE4

#5A8EA3 #CFDEE4

Calculate the color between two colors, #5A8EA3 and #CFDEE4. 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)

#5A8EA3 - #CFDEE4 | 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 #5A8EA3 as 0% and #CFDEE4 as 100%.

0.0%	0.0% #5A8EA3	RGB 90 142 163	#5A8EA3
16.7%	16.7% #6D9BAD	RGB 109 155 173	#6D9BAD
33.3%	33.3% #81A8B8	RGB 129 168 184	#81A8B8
50.0%	50.0% #94B6C3	RGB 148 182 195	#94B6C3
66.7%	66.7% #A8C3CE	RGB 168 195 206	#A8C3CE
83.3%	83.3% #BBD0D9	RGB 187 208 217	#BBD0D9
100.0%	100.0% #CFDEE4	RGB 207 222 228	#CFDEE4

#5A8EA3 #6D9BAD #81A8B8 #94B6C3 #A8C3CE #BBD0D9 #CFDEE4

#5A8EA3 - #CFDEE4

HSV Blend

#5A8EA3 - #CFDEE4 | 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 #5A8EA3 as 0% and #CFDEE4 as 100%.

0.0%	0.0% #5A8EA3	RGB 90 142 163	#5A8EA3
16.7%	16.7% #6A9AAD	RGB 106 154 173	#6A9AAD
33.3%	33.3% #7BA7B8	RGB 123 167 184	#7BA7B8
50.0%	50.0% #8EB4C3	RGB 142 180 195	#8EB4C3
66.7%	66.7% #A2C1CE	RGB 162 193 206	#A2C1CE
83.3%	83.3% #B8CFD9	RGB 184 207 217	#B8CFD9
100.0%	100.0% #CFDEE4	RGB 207 222 228	#CFDEE4

#5A8EA3 #6A9AAD #7BA7B8 #8EB4C3 #A2C1CE #B8CFD9 #CFDEE4

#5A8EA3 - #8EB4C3 - #CFDEE4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5A8EA3 0%, #8EB4C3 50%, #CFDEE4 100%);
    background: -webkit-linear-gradient(top, #5A8EA3 0%, #8EB4C3 50%, #CFDEE4 100%);
    background: linear-gradient(to bottom, #5A8EA3 0%, #8EB4C3 50%, #CFDEE4 100%);
}
</style>