#3C86AF - #54A8FC | 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 #3C86AF to #54A8FC

#3C86AF #54A8FC

Calculate the color between two colors, #3C86AF and #54A8FC. 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)

#3C86AF - #54A8FC | 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 #3C86AF as 0% and #54A8FC as 100%.

0.0%	0.0% #3C86AF	RGB 60 134 175	#3C86AF
16.7%	16.7% #408BBB	RGB 64 139 187	#408BBB
33.3%	33.3% #4491C8	RGB 68 145 200	#4491C8
50.0%	50.0% #4897D5	RGB 72 151 213	#4897D5
66.7%	66.7% #4C9CE2	RGB 76 156 226	#4C9CE2
83.3%	83.3% #50A2EF	RGB 80 162 239	#50A2EF
100.0%	100.0% #54A8FC	RGB 84 168 252	#54A8FC

#3C86AF #408BBB #4491C8 #4897D5 #4C9CE2 #50A2EF #54A8FC

#3C86AF - #54A8FC

HSV Blend

#3C86AF - #54A8FC | 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 #3C86AF as 0% and #54A8FC as 100%.

0.0%	0.0% #3C86AF	RGB 60 134 175	#3C86AF
16.7%	16.7% #408CBB	RGB 64 140 187	#408CBB
33.3%	33.3% #4493C8	RGB 68 147 200	#4493C8
50.0%	50.0% #4898D5	RGB 72 152 213	#4898D5
66.7%	66.7% #4C9EE2	RGB 76 158 226	#4C9EE2
83.3%	83.3% #50A3EF	RGB 80 163 239	#50A3EF
100.0%	100.0% #54A8FC	RGB 84 168 252	#54A8FC

#3C86AF #408CBB #4493C8 #4898D5 #4C9EE2 #50A3EF #54A8FC

#3C86AF - #4898D5 - #54A8FC

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3C86AF 0%, #4898D5 50%, #54A8FC 100%);
    background: -webkit-linear-gradient(top, #3C86AF 0%, #4898D5 50%, #54A8FC 100%);
    background: linear-gradient(to bottom, #3C86AF 0%, #4898D5 50%, #54A8FC 100%);
}
</style>