#3C8DBB - #ABEEA2 | 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 #3C8DBB to #ABEEA2

#3C8DBB #ABEEA2

Calculate the color between two colors, #3C8DBB and #ABEEA2. 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)

#3C8DBB - #ABEEA2 | 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 #3C8DBB as 0% and #ABEEA2 as 100%.

0.0%	0.0% #3C8DBB	RGB 60 141 187	#3C8DBB
16.7%	16.7% #4E9DB6	RGB 78 157 182	#4E9DB6
33.3%	33.3% #61ADB2	RGB 97 173 178	#61ADB2
50.0%	50.0% #73BDAE	RGB 115 189 174	#73BDAE
66.7%	66.7% #86CDAA	RGB 134 205 170	#86CDAA
83.3%	83.3% #98DDA6	RGB 152 221 166	#98DDA6
100.0%	100.0% #ABEEA2	RGB 171 238 162	#ABEEA2

#3C8DBB #4E9DB6 #61ADB2 #73BDAE #86CDAA #98DDA6 #ABEEA2

#3C8DBB - #ABEEA2

HSV Blend

#3C8DBB - #ABEEA2 | 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 #3C8DBB as 0% and #ABEEA2 as 100%.

0.0%	0.0% #3C8CBB	RGB 60 140 187	#3C8CBB
16.7%	16.7% #4AB5C3	RGB 74 181 195	#4AB5C3
33.3%	33.3% #59CCBD	RGB 89 204 189	#59CCBD
50.0%	50.0% #6AD4AC	RGB 106 212 172	#6AD4AC
66.7%	66.7% #7BDDA0	RGB 123 221 160	#7BDDA0
83.3%	83.3% #8EE599	RGB 142 229 153	#8EE599
100.0%	100.0% #ABEEA2	RGB 171 238 162	#ABEEA2

#3C8CBB #4AB5C3 #59CCBD #6AD4AC #7BDDA0 #8EE599 #ABEEA2

#3C8DBB - #6AD4AC - #ABEEA2

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3C8CBB 0%, #6AD4AC 50%, #ABEEA2 100%);
    background: -webkit-linear-gradient(top, #3C8CBB 0%, #6AD4AC 50%, #ABEEA2 100%);
    background: linear-gradient(to bottom, #3C8CBB 0%, #6AD4AC 50%, #ABEEA2 100%);
}
</style>