#5E86A9 - #D1DCE6 | 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 #5E86A9 to #D1DCE6

#5E86A9 #D1DCE6

Calculate the color between two colors, #5E86A9 and #D1DCE6. 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)

#5E86A9 - #D1DCE6 | 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 #5E86A9 as 0% and #D1DCE6 as 100%.

0.0%	0.0% #5E86A9	RGB 94 134 169	#5E86A9
16.7%	16.7% #7194B3	RGB 113 148 179	#7194B3
33.3%	33.3% #84A2BD	RGB 132 162 189	#84A2BD
50.0%	50.0% #97B1C7	RGB 151 177 199	#97B1C7
66.7%	66.7% #AABFD1	RGB 170 191 209	#AABFD1
83.3%	83.3% #BDCDDB	RGB 189 205 219	#BDCDDB
100.0%	100.0% #D1DCE6	RGB 209 220 230	#D1DCE6

#5E86A9 #7194B3 #84A2BD #97B1C7 #AABFD1 #BDCDDB #D1DCE6

#5E86A9 - #D1DCE6

HSV Blend

#5E86A9 - #D1DCE6 | 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 #5E86A9 as 0% and #D1DCE6 as 100%.

0.0%	0.0% #5E86A9	RGB 94 134 169	#5E86A9
16.7%	16.7% #6E92B3	RGB 110 146 179	#6E92B3
33.3%	33.3% #7FA0BD	RGB 127 160 189	#7FA0BD
50.0%	50.0% #92AEC7	RGB 146 174 199	#92AEC7
66.7%	66.7% #A5BCD1	RGB 165 188 209	#A5BCD1
83.3%	83.3% #BACCDB	RGB 186 204 219	#BACCDB
100.0%	100.0% #D1DCE6	RGB 209 220 230	#D1DCE6

#5E86A9 #6E92B3 #7FA0BD #92AEC7 #A5BCD1 #BACCDB #D1DCE6

#5E86A9 - #92AEC7 - #D1DCE6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5E86A9 0%, #92AEC7 50%, #D1DCE6 100%);
    background: -webkit-linear-gradient(top, #5E86A9 0%, #92AEC7 50%, #D1DCE6 100%);
    background: linear-gradient(to bottom, #5E86A9 0%, #92AEC7 50%, #D1DCE6 100%);
}
</style>