#C0E4F2 - #689DC3 | 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 #C0E4F2 to #689DC3

#C0E4F2 #689DC3

Calculate the color between two colors, #C0E4F2 and #689DC3. 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)

#C0E4F2 - #689DC3 | 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 #C0E4F2 as 0% and #689DC3 as 100%.

0.0%	0.0% #C0E4F2	RGB 192 228 242	#C0E4F2
16.7%	16.7% #B1D8EA	RGB 177 216 234	#B1D8EA
33.3%	33.3% #A2CCE2	RGB 162 204 226	#A2CCE2
50.0%	50.0% #94C0DA	RGB 148 192 218	#94C0DA
66.7%	66.7% #85B4D2	RGB 133 180 210	#85B4D2
83.3%	83.3% #76A8CA	RGB 118 168 202	#76A8CA
100.0%	100.0% #689DC3	RGB 104 157 195	#689DC3

#C0E4F2 #B1D8EA #A2CCE2 #94C0DA #85B4D2 #76A8CA #689DC3

#C0E4F2 - #689DC3

HSV Blend

#C0E4F2 - #689DC3 | 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 #C0E4F2 as 0% and #689DC3 as 100%.

0.0%	0.0% #C0E4F2	RGB 192 228 242	#C0E4F2
16.7%	16.7% #AFD8EA	RGB 175 216 234	#AFD8EA
33.3%	33.3% #9FCCE2	RGB 159 204 226	#9FCCE2
50.0%	50.0% #90C0DA	RGB 144 192 218	#90C0DA
66.7%	66.7% #82B4D2	RGB 130 180 210	#82B4D2
83.3%	83.3% #74A8CA	RGB 116 168 202	#74A8CA
100.0%	100.0% #689DC3	RGB 104 157 195	#689DC3

#C0E4F2 #AFD8EA #9FCCE2 #90C0DA #82B4D2 #74A8CA #689DC3

#C0E4F2 - #90C0DA - #689DC3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #C0E4F2 0%, #90C0DA 50%, #689DC3 100%);
    background: -webkit-linear-gradient(top, #C0E4F2 0%, #90C0DA 50%, #689DC3 100%);
    background: linear-gradient(to bottom, #C0E4F2 0%, #90C0DA 50%, #689DC3 100%);
}
</style>