#7BB5E9 - #2964B2 | 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 #7BB5E9 to #2964B2

#7BB5E9 #2964B2

Calculate the color between two colors, #7BB5E9 and #2964B2. 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)

#7BB5E9 - #2964B2 | 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 #7BB5E9 as 0% and #2964B2 as 100%.

0.0%	0.0% #7BB5E9	RGB 123 181 233	#7BB5E9
16.7%	16.7% #6DA7DF	RGB 109 167 223	#6DA7DF
33.3%	33.3% #5F9AD6	RGB 95 154 214	#5F9AD6
50.0%	50.0% #528CCD	RGB 82 140 205	#528CCD
66.7%	66.7% #447FC4	RGB 68 127 196	#447FC4
83.3%	83.3% #3671BB	RGB 54 113 187	#3671BB
100.0%	100.0% #2964B2	RGB 41 100 178	#2964B2

#7BB5E9 #6DA7DF #5F9AD6 #528CCD #447FC4 #3671BB #2964B2

#7BB5E9 - #2964B2

HSV Blend

#7BB5E9 - #2964B2 | 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 #7BB5E9 as 0% and #2964B2 as 100%.

0.0%	0.0% #7BB5E9	RGB 123 181 233	#7BB5E9
16.7%	16.7% #6BA6DF	RGB 107 166 223	#6BA6DF
33.3%	33.3% #5C98D6	RGB 92 152 214	#5C98D6
50.0%	50.0% #4D8BCD	RGB 77 139 205	#4D8BCD
66.7%	66.7% #407DC4	RGB 64 125 196	#407DC4
83.3%	83.3% #3470BB	RGB 52 112 187	#3470BB
100.0%	100.0% #2964B2	RGB 41 100 178	#2964B2

#7BB5E9 #6BA6DF #5C98D6 #4D8BCD #407DC4 #3470BB #2964B2

#7BB5E9 - #4D8BCD - #2964B2

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #7BB5E9 0%, #4D8BCD 50%, #2964B2 100%);
    background: -webkit-linear-gradient(top, #7BB5E9 0%, #4D8BCD 50%, #2964B2 100%);
    background: linear-gradient(to bottom, #7BB5E9 0%, #4D8BCD 50%, #2964B2 100%);
}
</style>