#77C0FF - #206ED7 | 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 #77C0FF to #206ED7

#77C0FF #206ED7

Calculate the color between two colors, #77C0FF and #206ED7. 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)

#77C0FF - #206ED7 | 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 #77C0FF as 0% and #206ED7 as 100%.

0.0%	0.0% #77C0FF	RGB 119 192 255	#77C0FF
16.7%	16.7% #68B2F8	RGB 104 178 248	#68B2F8
33.3%	33.3% #5AA4F1	RGB 90 164 241	#5AA4F1
50.0%	50.0% #4B97EB	RGB 75 151 235	#4B97EB
66.7%	66.7% #3D89E4	RGB 61 137 228	#3D89E4
83.3%	83.3% #2E7BDD	RGB 46 123 221	#2E7BDD
100.0%	100.0% #206ED7	RGB 32 110 215	#206ED7

#77C0FF #68B2F8 #5AA4F1 #4B97EB #3D89E4 #2E7BDD #206ED7

#77C0FF - #206ED7

HSV Blend

#77C0FF - #206ED7 | 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 #77C0FF as 0% and #206ED7 as 100%.

0.0%	0.0% #77C0FF	RGB 119 192 255	#77C0FF
16.7%	16.7% #66B2F8	RGB 102 178 248	#66B2F8
33.3%	33.3% #57A4F1	RGB 87 164 241	#57A4F1
50.0%	50.0% #4896EB	RGB 72 150 235	#4896EB
66.7%	66.7% #3A88E4	RGB 58 136 228	#3A88E4
83.3%	83.3% #2C7BDD	RGB 44 123 221	#2C7BDD
100.0%	100.0% #206ED7	RGB 32 110 215	#206ED7

#77C0FF #66B2F8 #57A4F1 #4896EB #3A88E4 #2C7BDD #206ED7

#77C0FF - #4896EB - #206ED7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #77C0FF 0%, #4896EB 50%, #206ED7 100%);
    background: -webkit-linear-gradient(top, #77C0FF 0%, #4896EB 50%, #206ED7 100%);
    background: linear-gradient(to bottom, #77C0FF 0%, #4896EB 50%, #206ED7 100%);
}
</style>