#C5D9F4 - #688EC5 | 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 #C5D9F4 to #688EC5

#C5D9F4 #688EC5

Calculate the color between two colors, #C5D9F4 and #688EC5. 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)

#C5D9F4 - #688EC5 | 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 #C5D9F4 as 0% and #688EC5 as 100%.

0.0%	0.0% #C5D9F4	RGB 197 217 244	#C5D9F4
16.7%	16.7% #B5CCEC	RGB 181 204 236	#B5CCEC
33.3%	33.3% #A6C0E4	RGB 166 192 228	#A6C0E4
50.0%	50.0% #96B3DC	RGB 150 179 220	#96B3DC
66.7%	66.7% #87A7D4	RGB 135 167 212	#87A7D4
83.3%	83.3% #779ACC	RGB 119 154 204	#779ACC
100.0%	100.0% #688EC5	RGB 104 142 197	#688EC5

#C5D9F4 #B5CCEC #A6C0E4 #96B3DC #87A7D4 #779ACC #688EC5

#C5D9F4 - #688EC5

HSV Blend

#C5D9F4 - #688EC5 | 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 #C5D9F4 as 0% and #688EC5 as 100%.

0.0%	0.0% #C5D9F4	RGB 197 217 244	#C5D9F4
16.7%	16.7% #B3CBEC	RGB 179 203 236	#B3CBEC
33.3%	33.3% #A3BEE4	RGB 163 190 228	#A3BEE4
50.0%	50.0% #93B1DC	RGB 147 177 220	#93B1DC
66.7%	66.7% #84A5D4	RGB 132 165 212	#84A5D4
83.3%	83.3% #7599CC	RGB 117 153 204	#7599CC
100.0%	100.0% #688EC5	RGB 104 142 197	#688EC5

#C5D9F4 #B3CBEC #A3BEE4 #93B1DC #84A5D4 #7599CC #688EC5

#C5D9F4 - #93B1DC - #688EC5

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #C5D9F4 0%, #93B1DC 50%, #688EC5 100%);
    background: -webkit-linear-gradient(top, #C5D9F4 0%, #93B1DC 50%, #688EC5 100%);
    background: linear-gradient(to bottom, #C5D9F4 0%, #93B1DC 50%, #688EC5 100%);
}
</style>