#5CB5E7 - #1866AF | 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 #5CB5E7 to #1866AF

#5CB5E7 #1866AF

Calculate the color between two colors, #5CB5E7 and #1866AF. 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)

#5CB5E7 - #1866AF | 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 #5CB5E7 as 0% and #1866AF as 100%.

0.0%	0.0% #5CB5E7	RGB 92 181 231	#5CB5E7
16.7%	16.7% #50A7DD	RGB 80 167 221	#50A7DD
33.3%	33.3% #459AD4	RGB 69 154 212	#459AD4
50.0%	50.0% #3A8DCB	RGB 58 141 203	#3A8DCB
66.7%	66.7% #2E80C1	RGB 46 128 193	#2E80C1
83.3%	83.3% #2373B8	RGB 35 115 184	#2373B8
100.0%	100.0% #1866AF	RGB 24 102 175	#1866AF

#5CB5E7 #50A7DD #459AD4 #3A8DCB #2E80C1 #2373B8 #1866AF

#5CB5E7 - #1866AF

HSV Blend

#5CB5E7 - #1866AF | 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 #5CB5E7 as 0% and #1866AF as 100%.

0.0%	0.0% #5CB5E7	RGB 92 181 231	#5CB5E7
16.7%	16.7% #4EA7DD	RGB 78 167 221	#4EA7DD
33.3%	33.3% #4299D4	RGB 66 153 212	#4299D4
50.0%	50.0% #368CCB	RGB 54 140 203	#368CCB
66.7%	66.7% #2B7FC1	RGB 43 127 193	#2B7FC1
83.3%	83.3% #2172B8	RGB 33 114 184	#2172B8
100.0%	100.0% #1866AF	RGB 24 102 175	#1866AF

#5CB5E7 #4EA7DD #4299D4 #368CCB #2B7FC1 #2172B8 #1866AF

#5CB5E7 - #368CCB - #1866AF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5CB5E7 0%, #368CCB 50%, #1866AF 100%);
    background: -webkit-linear-gradient(top, #5CB5E7 0%, #368CCB 50%, #1866AF 100%);
    background: linear-gradient(to bottom, #5CB5E7 0%, #368CCB 50%, #1866AF 100%);
}
</style>