#667DBD - #D3D9EC | 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 #667DBD to #D3D9EC

#667DBD #D3D9EC

Calculate the color between two colors, #667DBD and #D3D9EC. 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)

#667DBD - #D3D9EC | 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 #667DBD as 0% and #D3D9EC as 100%.

0.0%	0.0% #667DBD	RGB 102 125 189	#667DBD
16.7%	16.7% #788CC4	RGB 120 140 196	#788CC4
33.3%	33.3% #8A9BCC	RGB 138 155 204	#8A9BCC
50.0%	50.0% #9CABD4	RGB 156 171 212	#9CABD4
66.7%	66.7% #AEBADC	RGB 174 186 220	#AEBADC
83.3%	83.3% #C0C9E4	RGB 192 201 228	#C0C9E4
100.0%	100.0% #D3D9EC	RGB 211 217 236	#D3D9EC

#667DBD #788CC4 #8A9BCC #9CABD4 #AEBADC #C0C9E4 #D3D9EC

#667DBD - #D3D9EC

HSV Blend

#667DBD - #D3D9EC | 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 #667DBD as 0% and #D3D9EC as 100%.

0.0%	0.0% #667CBD	RGB 102 124 189	#667CBD
16.7%	16.7% #758AC4	RGB 117 138 196	#758AC4
33.3%	33.3% #8698CC	RGB 134 152 204	#8698CC
50.0%	50.0% #98A7D4	RGB 152 167 212	#98A7D4
66.7%	66.7% #AAB7DC	RGB 170 183 220	#AAB7DC
83.3%	83.3% #BEC7E4	RGB 190 199 228	#BEC7E4
100.0%	100.0% #D3D9EC	RGB 211 217 236	#D3D9EC

#667CBD #758AC4 #8698CC #98A7D4 #AAB7DC #BEC7E4 #D3D9EC

#667DBD - #98A7D4 - #D3D9EC

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #667CBD 0%, #98A7D4 50%, #D3D9EC 100%);
    background: -webkit-linear-gradient(top, #667CBD 0%, #98A7D4 50%, #D3D9EC 100%);
    background: linear-gradient(to bottom, #667CBD 0%, #98A7D4 50%, #D3D9EC 100%);
}
</style>