#368FB6 - #8ECCD8 | 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 #368FB6 to #8ECCD8

#368FB6 #8ECCD8

Calculate the color between two colors, #368FB6 and #8ECCD8. 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)

#368FB6 - #8ECCD8 | 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 #368FB6 as 0% and #8ECCD8 as 100%.

0.0%	0.0% #368FB6	RGB 54 143 182	#368FB6
16.7%	16.7% #4499BB	RGB 68 153 187	#4499BB
33.3%	33.3% #53A3C1	RGB 83 163 193	#53A3C1
50.0%	50.0% #62ADC7	RGB 98 173 199	#62ADC7
66.7%	66.7% #70B7CC	RGB 112 183 204	#70B7CC
83.3%	83.3% #7FC1D2	RGB 127 193 210	#7FC1D2
100.0%	100.0% #8ECCD8	RGB 142 204 216	#8ECCD8

#368FB6 #4499BB #53A3C1 #62ADC7 #70B7CC #7FC1D2 #8ECCD8

#368FB6 - #8ECCD8

HSV Blend

#368FB6 - #8ECCD8 | 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 #368FB6 as 0% and #8ECCD8 as 100%.

0.0%	0.0% #368FB6	RGB 54 143 182	#368FB6
16.7%	16.7% #4299BB	RGB 66 153 187	#4299BB
33.3%	33.3% #50A4C1	RGB 80 164 193	#50A4C1
50.0%	50.0% #5EAEC7	RGB 94 174 199	#5EAEC7
66.7%	66.7% #6DB8CC	RGB 109 184 204	#6DB8CC
83.3%	83.3% #7DC2D2	RGB 125 194 210	#7DC2D2
100.0%	100.0% #8ECCD8	RGB 142 204 216	#8ECCD8

#368FB6 #4299BB #50A4C1 #5EAEC7 #6DB8CC #7DC2D2 #8ECCD8

#368FB6 - #5EAEC7 - #8ECCD8

CSS codes

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

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