#8CDEF7 - #3197D0 | 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 #8CDEF7 to #3197D0

#8CDEF7 #3197D0

Calculate the color between two colors, #8CDEF7 and #3197D0. 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)

#8CDEF7 - #3197D0 | 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 #8CDEF7 as 0% and #3197D0 as 100%.

0.0%	0.0% #8CDEF7	RGB 140 222 247	#8CDEF7
16.7%	16.7% #7CD2F0	RGB 124 210 240	#7CD2F0
33.3%	33.3% #6DC6EA	RGB 109 198 234	#6DC6EA
50.0%	50.0% #5EBAE3	RGB 94 186 227	#5EBAE3
66.7%	66.7% #4FAEDD	RGB 79 174 221	#4FAEDD
83.3%	83.3% #40A2D6	RGB 64 162 214	#40A2D6
100.0%	100.0% #3197D0	RGB 49 151 208	#3197D0

#8CDEF7 #7CD2F0 #6DC6EA #5EBAE3 #4FAEDD #40A2D6 #3197D0

#8CDEF7 - #3197D0

HSV Blend

#8CDEF7 - #3197D0 | 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 #8CDEF7 as 0% and #3197D0 as 100%.

0.0%	0.0% #8CDEF7	RGB 140 222 247	#8CDEF7
16.7%	16.7% #7BD2F0	RGB 123 210 240	#7BD2F0
33.3%	33.3% #6AC6EA	RGB 106 198 234	#6AC6EA
50.0%	50.0% #5BBBE3	RGB 91 187 227	#5BBBE3
66.7%	66.7% #4CAFDD	RGB 76 175 221	#4CAFDD
83.3%	83.3% #3EA3D6	RGB 62 163 214	#3EA3D6
100.0%	100.0% #3197D0	RGB 49 151 208	#3197D0

#8CDEF7 #7BD2F0 #6AC6EA #5BBBE3 #4CAFDD #3EA3D6 #3197D0

#8CDEF7 - #5BBBE3 - #3197D0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #8CDEF7 0%, #5BBBE3 50%, #3197D0 100%);
    background: -webkit-linear-gradient(top, #8CDEF7 0%, #5BBBE3 50%, #3197D0 100%);
    background: linear-gradient(to bottom, #8CDEF7 0%, #5BBBE3 50%, #3197D0 100%);
}
</style>