#4484E5 - #0048C7 | 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 #4484E5 to #0048C7

#4484E5 #0048C7

Calculate the color between two colors, #4484E5 and #0048C7. 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)

#4484E5 - #0048C7 | 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 #4484E5 as 0% and #0048C7 as 100%.

0.0%	0.0% #4484E5	RGB 68 132 229	#4484E5
16.7%	16.7% #387AE0	RGB 56 122 224	#387AE0
33.3%	33.3% #2D70DB	RGB 45 112 219	#2D70DB
50.0%	50.0% #2266D6	RGB 34 102 214	#2266D6
66.7%	66.7% #165CD1	RGB 22 92 209	#165CD1
83.3%	83.3% #0B52CC	RGB 11 82 204	#0B52CC
100.0%	100.0% #0048C7	RGB 0 72 199	#0048C7

#4484E5 #387AE0 #2D70DB #2266D6 #165CD1 #0B52CC #0048C7

#4484E5 - #0048C7

HSV Blend

#4484E5 - #0048C7 | 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 #4484E5 as 0% and #0048C7 as 100%.

0.0%	0.0% #4483E5	RGB 68 131 229	#4483E5
16.7%	16.7% #3779E0	RGB 55 121 224	#3779E0
33.3%	33.3% #2B6FDB	RGB 43 111 219	#2B6FDB
50.0%	50.0% #1F64D6	RGB 31 100 214	#1F64D6
66.7%	66.7% #145BD1	RGB 20 91 209	#145BD1
83.3%	83.3% #0A51CC	RGB 10 81 204	#0A51CC
100.0%	100.0% #0048C7	RGB 0 72 199	#0048C7

#4483E5 #3779E0 #2B6FDB #1F64D6 #145BD1 #0A51CC #0048C7

#4484E5 - #1F64D6 - #0048C7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4483E5 0%, #1F64D6 50%, #0048C7 100%);
    background: -webkit-linear-gradient(top, #4483E5 0%, #1F64D6 50%, #0048C7 100%);
    background: linear-gradient(to bottom, #4483E5 0%, #1F64D6 50%, #0048C7 100%);
}
</style>