#3C66EC - #72B7FF | 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 #3C66EC to #72B7FF

#3C66EC #72B7FF

Calculate the color between two colors, #3C66EC and #72B7FF. 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)

#3C66EC - #72B7FF | 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 #3C66EC as 0% and #72B7FF as 100%.

0.0%	0.0% #3C66EC	RGB 60 102 236	#3C66EC
16.7%	16.7% #4573EF	RGB 69 115 239	#4573EF
33.3%	33.3% #4E81F2	RGB 78 129 242	#4E81F2
50.0%	50.0% #578EF5	RGB 87 142 245	#578EF5
66.7%	66.7% #609CF8	RGB 96 156 248	#609CF8
83.3%	83.3% #69A9FB	RGB 105 169 251	#69A9FB
100.0%	100.0% #72B7FF	RGB 114 183 255	#72B7FF

#3C66EC #4573EF #4E81F2 #578EF5 #609CF8 #69A9FB #72B7FF

#3C66EC - #72B7FF

HSV Blend

#3C66EC - #72B7FF | 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 #3C66EC as 0% and #72B7FF as 100%.

0.0%	0.0% #3C66EC	RGB 60 102 236	#3C66EC
16.7%	16.7% #4474EF	RGB 68 116 239	#4474EF
33.3%	33.3% #4D82F2	RGB 77 130 242	#4D82F2
50.0%	50.0% #5690F5	RGB 86 144 245	#5690F5
66.7%	66.7% #5F9DF8	RGB 95 157 248	#5F9DF8
83.3%	83.3% #68AAFB	RGB 104 170 251	#68AAFB
100.0%	100.0% #72B7FF	RGB 114 183 255	#72B7FF

#3C66EC #4474EF #4D82F2 #5690F5 #5F9DF8 #68AAFB #72B7FF

#3C66EC - #5690F5 - #72B7FF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3C66EC 0%, #5690F5 50%, #72B7FF 100%);
    background: -webkit-linear-gradient(top, #3C66EC 0%, #5690F5 50%, #72B7FF 100%);
    background: linear-gradient(to bottom, #3C66EC 0%, #5690F5 50%, #72B7FF 100%);
}
</style>