#6B8CC9 - #D4DCEF | 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 #6B8CC9 to #D4DCEF

#6B8CC9 #D4DCEF

Calculate the color between two colors, #6B8CC9 and #D4DCEF. 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)

#6B8CC9 - #D4DCEF | 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 #6B8CC9 as 0% and #D4DCEF as 100%.

0.0%	0.0% #6B8CC9	RGB 107 140 201	#6B8CC9
16.7%	16.7% #7C99CF	RGB 124 153 207	#7C99CF
33.3%	33.3% #8EA6D5	RGB 142 166 213	#8EA6D5
50.0%	50.0% #9FB4DC	RGB 159 180 220	#9FB4DC
66.7%	66.7% #B1C1E2	RGB 177 193 226	#B1C1E2
83.3%	83.3% #C2CEE8	RGB 194 206 232	#C2CEE8
100.0%	100.0% #D4DCEF	RGB 212 220 239	#D4DCEF

#6B8CC9 #7C99CF #8EA6D5 #9FB4DC #B1C1E2 #C2CEE8 #D4DCEF

#6B8CC9 - #D4DCEF

HSV Blend

#6B8CC9 - #D4DCEF | 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 #6B8CC9 as 0% and #D4DCEF as 100%.

0.0%	0.0% #6B8CC9	RGB 107 140 201	#6B8CC9
16.7%	16.7% #7A97CF	RGB 122 151 207	#7A97CF
33.3%	33.3% #8BA3D5	RGB 139 163 213	#8BA3D5
50.0%	50.0% #9CB0DC	RGB 156 176 220	#9CB0DC
66.7%	66.7% #AEBEE2	RGB 174 190 226	#AEBEE2
83.3%	83.3% #C0CCE8	RGB 192 204 232	#C0CCE8
100.0%	100.0% #D4DCEF	RGB 212 220 239	#D4DCEF

#6B8CC9 #7A97CF #8BA3D5 #9CB0DC #AEBEE2 #C0CCE8 #D4DCEF

#6B8CC9 - #9CB0DC - #D4DCEF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #6B8CC9 0%, #9CB0DC 50%, #D4DCEF 100%);
    background: -webkit-linear-gradient(top, #6B8CC9 0%, #9CB0DC 50%, #D4DCEF 100%);
    background: linear-gradient(to bottom, #6B8CC9 0%, #9CB0DC 50%, #D4DCEF 100%);
}
</style>