#7EB6FF - #2561D4 | 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 #7EB6FF to #2561D4

#7EB6FF #2561D4

Calculate the color between two colors, #7EB6FF and #2561D4. 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)

#7EB6FF - #2561D4 | 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 #7EB6FF as 0% and #2561D4 as 100%.

0.0%	0.0% #7EB6FF	RGB 126 182 255	#7EB6FF
16.7%	16.7% #6FA7F7	RGB 111 167 247	#6FA7F7
33.3%	33.3% #6099F0	RGB 96 153 240	#6099F0
50.0%	50.0% #518BE9	RGB 81 139 233	#518BE9
66.7%	66.7% #427DE2	RGB 66 125 226	#427DE2
83.3%	83.3% #336FDB	RGB 51 111 219	#336FDB
100.0%	100.0% #2561D4	RGB 37 97 212	#2561D4

#7EB6FF #6FA7F7 #6099F0 #518BE9 #427DE2 #336FDB #2561D4

#7EB6FF - #2561D4

HSV Blend

#7EB6FF - #2561D4 | 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 #7EB6FF as 0% and #2561D4 as 100%.

0.0%	0.0% #7EB6FF	RGB 126 182 255	#7EB6FF
16.7%	16.7% #6DA7F7	RGB 109 167 247	#6DA7F7
33.3%	33.3% #5D98F0	RGB 93 152 240	#5D98F0
50.0%	50.0% #4E8AE9	RGB 78 138 233	#4E8AE9
66.7%	66.7% #3F7CE2	RGB 63 124 226	#3F7CE2
83.3%	83.3% #316EDB	RGB 49 110 219	#316EDB
100.0%	100.0% #2561D4	RGB 37 97 212	#2561D4

#7EB6FF #6DA7F7 #5D98F0 #4E8AE9 #3F7CE2 #316EDB #2561D4

#7EB6FF - #4E8AE9 - #2561D4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #7EB6FF 0%, #4E8AE9 50%, #2561D4 100%);
    background: -webkit-linear-gradient(top, #7EB6FF 0%, #4E8AE9 50%, #2561D4 100%);
    background: linear-gradient(to bottom, #7EB6FF 0%, #4E8AE9 50%, #2561D4 100%);
}
</style>