#55A8C3 - #D2DCCE | 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 #55A8C3 to #D2DCCE

#55A8C3 #D2DCCE

Calculate the color between two colors, #55A8C3 and #D2DCCE. 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)

#55A8C3 - #D2DCCE | 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 #55A8C3 as 0% and #D2DCCE as 100%.

0.0%	0.0% #55A8C3	RGB 85 168 195	#55A8C3
16.7%	16.7% #69B0C4	RGB 105 176 196	#69B0C4
33.3%	33.3% #7EB9C6	RGB 126 185 198	#7EB9C6
50.0%	50.0% #93C2C8	RGB 147 194 200	#93C2C8
66.7%	66.7% #A8CACA	RGB 168 202 202	#A8CACA
83.3%	83.3% #BDD3CC	RGB 189 211 204	#BDD3CC
100.0%	100.0% #D2DCCE	RGB 210 220 206	#D2DCCE

#55A8C3 #69B0C4 #7EB9C6 #93C2C8 #A8CACA #BDD3CC #D2DCCE

#55A8C3 - #D2DCCE

HSV Blend

#55A8C3 - #D2DCCE | 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 #55A8C3 as 0% and #D2DCCE as 100%.

0.0%	0.0% #55A8C3	RGB 85 168 195	#55A8C3
16.7%	16.7% #67C7C6	RGB 103 199 198	#67C7C6
33.3%	33.3% #7ACBB5	RGB 122 203 181	#7ACBB5
50.0%	50.0% #8ECFAD	RGB 142 207 173	#8ECFAD
66.7%	66.7% #A2D3AD	RGB 162 211 173	#A2D3AD
83.3%	83.3% #B9D7B8	RGB 185 215 184	#B9D7B8
100.0%	100.0% #D2DCCE	RGB 210 220 206	#D2DCCE

#55A8C3 #67C7C6 #7ACBB5 #8ECFAD #A2D3AD #B9D7B8 #D2DCCE

#55A8C3 - #8ECFAD - #D2DCCE

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #55A8C3 0%, #8ECFAD 50%, #D2DCCE 100%);
    background: -webkit-linear-gradient(top, #55A8C3 0%, #8ECFAD 50%, #D2DCCE 100%);
    background: linear-gradient(to bottom, #55A8C3 0%, #8ECFAD 50%, #D2DCCE 100%);
}
</style>