#3384A8 - #AAE3B0 | 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 #3384A8 to #AAE3B0

#3384A8 #AAE3B0

Calculate the color between two colors, #3384A8 and #AAE3B0. 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)

#3384A8 - #AAE3B0 | 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 #3384A8 as 0% and #AAE3B0 as 100%.

0.0%	0.0% #3384A8	RGB 51 132 168	#3384A8
16.7%	16.7% #4693A9	RGB 70 147 169	#4693A9
33.3%	33.3% #5AA3AA	RGB 90 163 170	#5AA3AA
50.0%	50.0% #6EB3AC	RGB 110 179 172	#6EB3AC
66.7%	66.7% #82C3AD	RGB 130 195 173	#82C3AD
83.3%	83.3% #96D3AE	RGB 150 211 174	#96D3AE
100.0%	100.0% #AAE3B0	RGB 170 227 176	#AAE3B0

#3384A8 #4693A9 #5AA3AA #6EB3AC #82C3AD #96D3AE #AAE3B0

#3384A8 - #AAE3B0

HSV Blend

#3384A8 - #AAE3B0 | 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 #3384A8 as 0% and #AAE3B0 as 100%.

0.0%	0.0% #3384A8	RGB 51 132 168	#3384A8
16.7%	16.7% #43A5B1	RGB 67 165 177	#43A5B1
33.3%	33.3% #54BBB2	RGB 84 187 178	#54BBB2
50.0%	50.0% #67C5AA	RGB 103 197 170	#67C5AA
66.7%	66.7% #7CCFA6	RGB 124 207 166	#7CCFA6
83.3%	83.3% #92D9A8	RGB 146 217 168	#92D9A8
100.0%	100.0% #AAE3B0	RGB 170 227 176	#AAE3B0

#3384A8 #43A5B1 #54BBB2 #67C5AA #7CCFA6 #92D9A8 #AAE3B0

#3384A8 - #67C5AA - #AAE3B0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3384A8 0%, #67C5AA 50%, #AAE3B0 100%);
    background: -webkit-linear-gradient(top, #3384A8 0%, #67C5AA 50%, #AAE3B0 100%);
    background: linear-gradient(to bottom, #3384A8 0%, #67C5AA 50%, #AAE3B0 100%);
}
</style>