#A2BAD4 - #4C7EBA | 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 #A2BAD4 to #4C7EBA

#A2BAD4 #4C7EBA

Calculate the color between two colors, #A2BAD4 and #4C7EBA. 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)

#A2BAD4 - #4C7EBA | 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 #A2BAD4 as 0% and #4C7EBA as 100%.

0.0%	0.0% #A2BAD4	RGB 162 186 212	#A2BAD4
16.7%	16.7% #93B0CF	RGB 147 176 207	#93B0CF
33.3%	33.3% #85A6CB	RGB 133 166 203	#85A6CB
50.0%	50.0% #779CC7	RGB 119 156 199	#779CC7
66.7%	66.7% #6892C2	RGB 104 146 194	#6892C2
83.3%	83.3% #5A88BE	RGB 90 136 190	#5A88BE
100.0%	100.0% #4C7EBA	RGB 76 126 186	#4C7EBA

#A2BAD4 #93B0CF #85A6CB #779CC7 #6892C2 #5A88BE #4C7EBA

#A2BAD4 - #4C7EBA

HSV Blend

#A2BAD4 - #4C7EBA | 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 #A2BAD4 as 0% and #4C7EBA as 100%.

0.0%	0.0% #A2BAD4	RGB 162 186 212	#A2BAD4
16.7%	16.7% #92AFCF	RGB 146 175 207	#92AFCF
33.3%	33.3% #83A5CB	RGB 131 165 203	#83A5CB
50.0%	50.0% #749BC7	RGB 116 155 199	#749BC7
66.7%	66.7% #6691C2	RGB 102 145 194	#6691C2
83.3%	83.3% #5987BE	RGB 89 135 190	#5987BE
100.0%	100.0% #4C7EBA	RGB 76 126 186	#4C7EBA

#A2BAD4 #92AFCF #83A5CB #749BC7 #6691C2 #5987BE #4C7EBA

#A2BAD4 - #749BC7 - #4C7EBA

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #A2BAD4 0%, #749BC7 50%, #4C7EBA 100%);
    background: -webkit-linear-gradient(top, #A2BAD4 0%, #749BC7 50%, #4C7EBA 100%);
    background: linear-gradient(to bottom, #A2BAD4 0%, #749BC7 50%, #4C7EBA 100%);
}
</style>