#9ED8FF - #369CD0 | 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 #9ED8FF to #369CD0

#9ED8FF #369CD0

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

#9ED8FF - #369CD0 | 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 #9ED8FF as 0% and #369CD0 as 100%.

0.0%	0.0% #9ED8FF	RGB 158 216 255	#9ED8FF
16.7%	16.7% #8CCEF7	RGB 140 206 247	#8CCEF7
33.3%	33.3% #7BC4EF	RGB 123 196 239	#7BC4EF
50.0%	50.0% #6ABAE7	RGB 106 186 231	#6ABAE7
66.7%	66.7% #58B0DF	RGB 88 176 223	#58B0DF
83.3%	83.3% #47A6D7	RGB 71 166 215	#47A6D7
100.0%	100.0% #369CD0	RGB 54 156 208	#369CD0

#9ED8FF #8CCEF7 #7BC4EF #6ABAE7 #58B0DF #47A6D7 #369CD0

#9ED8FF - #369CD0

HSV Blend

#9ED8FF - #369CD0 | 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 #9ED8FF as 0% and #369CD0 as 100%.

0.0%	0.0% #9ED8FF	RGB 158 216 255	#9ED8FF
16.7%	16.7% #8ACCF7	RGB 138 204 247	#8ACCF7
33.3%	33.3% #77C1EF	RGB 119 193 239	#77C1EF
50.0%	50.0% #65B7E7	RGB 101 183 231	#65B7E7
66.7%	66.7% #54ADDF	RGB 84 173 223	#54ADDF
83.3%	83.3% #44A4D7	RGB 68 164 215	#44A4D7
100.0%	100.0% #369CD0	RGB 54 156 208	#369CD0

#9ED8FF #8ACCF7 #77C1EF #65B7E7 #54ADDF #44A4D7 #369CD0

#9ED8FF - #65B7E7 - #369CD0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #9ED8FF 0%, #65B7E7 50%, #369CD0 100%);
    background: -webkit-linear-gradient(top, #9ED8FF 0%, #65B7E7 50%, #369CD0 100%);
    background: linear-gradient(to bottom, #9ED8FF 0%, #65B7E7 50%, #369CD0 100%);
}
</style>