#7AB2FF - #225CD3 | 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 #7AB2FF to #225CD3

#7AB2FF #225CD3

Calculate the color between two colors, #7AB2FF and #225CD3. 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)

#7AB2FF - #225CD3 | 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 #7AB2FF as 0% and #225CD3 as 100%.

0.0%	0.0% #7AB2FF	RGB 122 178 255	#7AB2FF
16.7%	16.7% #6BA3F7	RGB 107 163 247	#6BA3F7
33.3%	33.3% #5C95F0	RGB 92 149 240	#5C95F0
50.0%	50.0% #4E87E9	RGB 78 135 233	#4E87E9
66.7%	66.7% #3F78E1	RGB 63 120 225	#3F78E1
83.3%	83.3% #306ADA	RGB 48 106 218	#306ADA
100.0%	100.0% #225CD3	RGB 34 92 211	#225CD3

#7AB2FF #6BA3F7 #5C95F0 #4E87E9 #3F78E1 #306ADA #225CD3

#7AB2FF - #225CD3

HSV Blend

#7AB2FF - #225CD3 | 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 #7AB2FF as 0% and #225CD3 as 100%.

0.0%	0.0% #7AB2FF	RGB 122 178 255	#7AB2FF
16.7%	16.7% #69A3F7	RGB 105 163 247	#69A3F7
33.3%	33.3% #5994F0	RGB 89 148 240	#5994F0
50.0%	50.0% #4A85E9	RGB 74 133 233	#4A85E9
66.7%	66.7% #3C77E1	RGB 60 119 225	#3C77E1
83.3%	83.3% #2E69DA	RGB 46 105 218	#2E69DA
100.0%	100.0% #225CD3	RGB 34 92 211	#225CD3

#7AB2FF #69A3F7 #5994F0 #4A85E9 #3C77E1 #2E69DA #225CD3

#7AB2FF - #4A85E9 - #225CD3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #7AB2FF 0%, #4A85E9 50%, #225CD3 100%);
    background: -webkit-linear-gradient(top, #7AB2FF 0%, #4A85E9 50%, #225CD3 100%);
    background: linear-gradient(to bottom, #7AB2FF 0%, #4A85E9 50%, #225CD3 100%);
}
</style>