#369EB5 - #C5E3E9 | 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 #369EB5 to #C5E3E9

#369EB5 #C5E3E9

Calculate the color between two colors, #369EB5 and #C5E3E9. 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)

#369EB5 - #C5E3E9 | 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 #369EB5 as 0% and #C5E3E9 as 100%.

0.0%	0.0% #369EB5	RGB 54 158 181	#369EB5
16.7%	16.7% #4DA9BD	RGB 77 169 189	#4DA9BD
33.3%	33.3% #65B5C6	RGB 101 181 198	#65B5C6
50.0%	50.0% #7DC0CF	RGB 125 192 207	#7DC0CF
66.7%	66.7% #95CCD7	RGB 149 204 215	#95CCD7
83.3%	83.3% #ADD7E0	RGB 173 215 224	#ADD7E0
100.0%	100.0% #C5E3E9	RGB 197 227 233	#C5E3E9

#369EB5 #4DA9BD #65B5C6 #7DC0CF #95CCD7 #ADD7E0 #C5E3E9

#369EB5 - #C5E3E9

HSV Blend

#369EB5 - #C5E3E9 | 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 #369EB5 as 0% and #C5E3E9 as 100%.

0.0%	0.0% #369EB5	RGB 54 158 181	#369EB5
16.7%	16.7% #49A8BD	RGB 73 168 189	#49A8BD
33.3%	33.3% #5FB4C6	RGB 95 180 198	#5FB4C6
50.0%	50.0% #76BFCF	RGB 118 191 207	#76BFCF
66.7%	66.7% #8FCBD7	RGB 143 203 215	#8FCBD7
83.3%	83.3% #A9D7E0	RGB 169 215 224	#A9D7E0
100.0%	100.0% #C5E3E9	RGB 197 227 233	#C5E3E9

#369EB5 #49A8BD #5FB4C6 #76BFCF #8FCBD7 #A9D7E0 #C5E3E9

#369EB5 - #76BFCF - #C5E3E9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #369EB5 0%, #76BFCF 50%, #C5E3E9 100%);
    background: -webkit-linear-gradient(top, #369EB5 0%, #76BFCF 50%, #C5E3E9 100%);
    background: linear-gradient(to bottom, #369EB5 0%, #76BFCF 50%, #C5E3E9 100%);
}
</style>