#5A8FD9 - #1968B4 | 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 #5A8FD9 to #1968B4

#5A8FD9 #1968B4

Calculate the color between two colors, #5A8FD9 and #1968B4. 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)

#5A8FD9 - #1968B4 | 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 #5A8FD9 as 0% and #1968B4 as 100%.

0.0%	0.0% #5A8FD9	RGB 90 143 217	#5A8FD9
16.7%	16.7% #4F88D2	RGB 79 136 210	#4F88D2
33.3%	33.3% #4482CC	RGB 68 130 204	#4482CC
50.0%	50.0% #397BC6	RGB 57 123 198	#397BC6
66.7%	66.7% #2E75C0	RGB 46 117 192	#2E75C0
83.3%	83.3% #236EBA	RGB 35 110 186	#236EBA
100.0%	100.0% #1968B4	RGB 25 104 180	#1968B4

#5A8FD9 #4F88D2 #4482CC #397BC6 #2E75C0 #236EBA #1968B4

#5A8FD9 - #1968B4

HSV Blend

#5A8FD9 - #1968B4 | 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 #5A8FD9 as 0% and #1968B4 as 100%.

0.0%	0.0% #5A8FD9	RGB 90 143 217	#5A8FD9
16.7%	16.7% #4D87D2	RGB 77 135 210	#4D87D2
33.3%	33.3% #4280CC	RGB 66 128 204	#4280CC
50.0%	50.0% #3679C6	RGB 54 121 198	#3679C6
66.7%	66.7% #2C73C0	RGB 44 115 192	#2C73C0
83.3%	83.3% #226DBA	RGB 34 109 186	#226DBA
100.0%	100.0% #1968B4	RGB 25 104 180	#1968B4

#5A8FD9 #4D87D2 #4280CC #3679C6 #2C73C0 #226DBA #1968B4

#5A8FD9 - #3679C6 - #1968B4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5A8FD9 0%, #3679C6 50%, #1968B4 100%);
    background: -webkit-linear-gradient(top, #5A8FD9 0%, #3679C6 50%, #1968B4 100%);
    background: linear-gradient(to bottom, #5A8FD9 0%, #3679C6 50%, #1968B4 100%);
}
</style>