#77C7FF - #1F77D9 | 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 #77C7FF to #1F77D9

#77C7FF #1F77D9

Calculate the color between two colors, #77C7FF and #1F77D9. 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)

#77C7FF - #1F77D9 | 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 #77C7FF as 0% and #1F77D9 as 100%.

0.0%	0.0% #77C7FF	RGB 119 199 255	#77C7FF
16.7%	16.7% #68B9F8	RGB 104 185 248	#68B9F8
33.3%	33.3% #59ACF2	RGB 89 172 242	#59ACF2
50.0%	50.0% #4B9FEC	RGB 75 159 236	#4B9FEC
66.7%	66.7% #3C91E5	RGB 60 145 229	#3C91E5
83.3%	83.3% #2D84DF	RGB 45 132 223	#2D84DF
100.0%	100.0% #1F77D9	RGB 31 119 217	#1F77D9

#77C7FF #68B9F8 #59ACF2 #4B9FEC #3C91E5 #2D84DF #1F77D9

#77C7FF - #1F77D9

HSV Blend

#77C7FF - #1F77D9 | 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 #77C7FF as 0% and #1F77D9 as 100%.

0.0%	0.0% #77C7FF	RGB 119 199 255	#77C7FF
16.7%	16.7% #66B9F8	RGB 102 185 248	#66B9F8
33.3%	33.3% #56ACF2	RGB 86 172 242	#56ACF2
50.0%	50.0% #479EEC	RGB 71 158 236	#479EEC
66.7%	66.7% #3991E5	RGB 57 145 229	#3991E5
83.3%	83.3% #2B84DF	RGB 43 132 223	#2B84DF
100.0%	100.0% #1F77D9	RGB 31 119 217	#1F77D9

#77C7FF #66B9F8 #56ACF2 #479EEC #3991E5 #2B84DF #1F77D9

#77C7FF - #479EEC - #1F77D9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #77C7FF 0%, #479EEC 50%, #1F77D9 100%);
    background: -webkit-linear-gradient(top, #77C7FF 0%, #479EEC 50%, #1F77D9 100%);
    background: linear-gradient(to bottom, #77C7FF 0%, #479EEC 50%, #1F77D9 100%);
}
</style>