#3E77BC - #ABBDF5 | 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 #3E77BC to #ABBDF5

#3E77BC #ABBDF5

Calculate the color between two colors, #3E77BC and #ABBDF5. 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)

#3E77BC - #ABBDF5 | 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 #3E77BC as 0% and #ABBDF5 as 100%.

0.0%	0.0% #3E77BC	RGB 62 119 188	#3E77BC
16.7%	16.7% #5082C5	RGB 80 130 197	#5082C5
33.3%	33.3% #628ECF	RGB 98 142 207	#628ECF
50.0%	50.0% #749AD8	RGB 116 154 216	#749AD8
66.7%	66.7% #86A5E2	RGB 134 165 226	#86A5E2
83.3%	83.3% #98B1EB	RGB 152 177 235	#98B1EB
100.0%	100.0% #ABBDF5	RGB 171 189 245	#ABBDF5

#3E77BC #5082C5 #628ECF #749AD8 #86A5E2 #98B1EB #ABBDF5

#3E77BC - #ABBDF5

HSV Blend

#3E77BC - #ABBDF5 | 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 #3E77BC as 0% and #ABBDF5 as 100%.

0.0%	0.0% #3E77BC	RGB 62 119 188	#3E77BC
16.7%	16.7% #4D7FC5	RGB 77 127 197	#4D7FC5
33.3%	33.3% #5D89CF	RGB 93 137 207	#5D89CF
50.0%	50.0% #6F93D8	RGB 111 147 216	#6F93D8
66.7%	66.7% #82A0E2	RGB 130 160 226	#82A0E2
83.3%	83.3% #95ADEB	RGB 149 173 235	#95ADEB
100.0%	100.0% #ABBDF5	RGB 171 189 245	#ABBDF5

#3E77BC #4D7FC5 #5D89CF #6F93D8 #82A0E2 #95ADEB #ABBDF5

#3E77BC - #6F93D8 - #ABBDF5

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3E77BC 0%, #6F93D8 50%, #ABBDF5 100%);
    background: -webkit-linear-gradient(top, #3E77BC 0%, #6F93D8 50%, #ABBDF5 100%);
    background: linear-gradient(to bottom, #3E77BC 0%, #6F93D8 50%, #ABBDF5 100%);
}
</style>