#7CB5E4 - #D1DBDF | 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 #7CB5E4 to #D1DBDF

#7CB5E4 #D1DBDF

Calculate the color between two colors, #7CB5E4 and #D1DBDF. 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)

#7CB5E4 - #D1DBDF | 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 #7CB5E4 as 0% and #D1DBDF as 100%.

0.0%	0.0% #7CB5E4	RGB 124 181 228	#7CB5E4
16.7%	16.7% #8ABBE3	RGB 138 187 227	#8ABBE3
33.3%	33.3% #98C1E2	RGB 152 193 226	#98C1E2
50.0%	50.0% #A6C8E1	RGB 166 200 225	#A6C8E1
66.7%	66.7% #B4CEE0	RGB 180 206 224	#B4CEE0
83.3%	83.3% #C2D4DF	RGB 194 212 223	#C2D4DF
100.0%	100.0% #D1DBDF	RGB 209 219 223	#D1DBDF

#7CB5E4 #8ABBE3 #98C1E2 #A6C8E1 #B4CEE0 #C2D4DF #D1DBDF

#7CB5E4 - #D1DBDF

HSV Blend

#7CB5E4 - #D1DBDF | 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 #7CB5E4 as 0% and #D1DBDF as 100%.

0.0%	0.0% #7CB4E4	RGB 124 180 228	#7CB4E4
16.7%	16.7% #8ABDE3	RGB 138 189 227	#8ABDE3
33.3%	33.3% #98C5E2	RGB 152 197 226	#98C5E2
50.0%	50.0% #A6CBE1	RGB 166 203 225	#A6CBE1
66.7%	66.7% #B5D1E0	RGB 181 209 224	#B5D1E0
83.3%	83.3% #C3D6DF	RGB 195 214 223	#C3D6DF
100.0%	100.0% #D1DBDF	RGB 209 219 223	#D1DBDF

#7CB4E4 #8ABDE3 #98C5E2 #A6CBE1 #B5D1E0 #C3D6DF #D1DBDF

#7CB5E4 - #A6CBE1 - #D1DBDF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #7CB4E4 0%, #A6CBE1 50%, #D1DBDF 100%);
    background: -webkit-linear-gradient(top, #7CB4E4 0%, #A6CBE1 50%, #D1DBDF 100%);
    background: linear-gradient(to bottom, #7CB4E4 0%, #A6CBE1 50%, #D1DBDF 100%);
}
</style>