#63B5E5 - #1C66AC | 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 #63B5E5 to #1C66AC

#63B5E5 #1C66AC

Calculate the color between two colors, #63B5E5 and #1C66AC. 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)

#63B5E5 - #1C66AC | 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 #63B5E5 as 0% and #1C66AC as 100%.

0.0%	0.0% #63B5E5	RGB 99 181 229	#63B5E5
16.7%	16.7% #57A7DB	RGB 87 167 219	#57A7DB
33.3%	33.3% #4B9AD2	RGB 75 154 210	#4B9AD2
50.0%	50.0% #3F8DC8	RGB 63 141 200	#3F8DC8
66.7%	66.7% #3380BF	RGB 51 128 191	#3380BF
83.3%	83.3% #2773B5	RGB 39 115 181	#2773B5
100.0%	100.0% #1C66AC	RGB 28 102 172	#1C66AC

#63B5E5 #57A7DB #4B9AD2 #3F8DC8 #3380BF #2773B5 #1C66AC

#63B5E5 - #1C66AC

HSV Blend

#63B5E5 - #1C66AC | 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 #63B5E5 as 0% and #1C66AC as 100%.

0.0%	0.0% #63B5E5	RGB 99 181 229	#63B5E5
16.7%	16.7% #55A7DB	RGB 85 167 219	#55A7DB
33.3%	33.3% #4799D2	RGB 71 153 210	#4799D2
50.0%	50.0% #3B8CC8	RGB 59 140 200	#3B8CC8
66.7%	66.7% #307FBF	RGB 48 127 191	#307FBF
83.3%	83.3% #2572B5	RGB 37 114 181	#2572B5
100.0%	100.0% #1C66AC	RGB 28 102 172	#1C66AC

#63B5E5 #55A7DB #4799D2 #3B8CC8 #307FBF #2572B5 #1C66AC

#63B5E5 - #3B8CC8 - #1C66AC

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #63B5E5 0%, #3B8CC8 50%, #1C66AC 100%);
    background: -webkit-linear-gradient(top, #63B5E5 0%, #3B8CC8 50%, #1C66AC 100%);
    background: linear-gradient(to bottom, #63B5E5 0%, #3B8CC8 50%, #1C66AC 100%);
}
</style>