#3FB5E4 - #4376FF | 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 #3FB5E4 to #4376FF

#3FB5E4 #4376FF

Calculate the color between two colors, #3FB5E4 and #4376FF. 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)

#3FB5E4 - #4376FF | 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 #3FB5E4 as 0% and #4376FF as 100%.

0.0%	0.0% #3FB5E4	RGB 63 181 228	#3FB5E4
16.7%	16.7% #3FAAE8	RGB 63 170 232	#3FAAE8
33.3%	33.3% #40A0ED	RGB 64 160 237	#40A0ED
50.0%	50.0% #4195F1	RGB 65 149 241	#4195F1
66.7%	66.7% #418BF6	RGB 65 139 246	#418BF6
83.3%	83.3% #4280FA	RGB 66 128 250	#4280FA
100.0%	100.0% #4376FF	RGB 67 118 255	#4376FF

#3FB5E4 #3FAAE8 #40A0ED #4195F1 #418BF6 #4280FA #4376FF

#3FB5E4 - #4376FF

HSV Blend

#3FB5E4 - #4376FF | 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 #3FB5E4 as 0% and #4376FF as 100%.

0.0%	0.0% #3FB5E4	RGB 63 181 228	#3FB5E4
16.7%	16.7% #3FABE8	RGB 63 171 232	#3FABE8
33.3%	33.3% #40A2ED	RGB 64 162 237	#40A2ED
50.0%	50.0% #4198F1	RGB 65 152 241	#4198F1
66.7%	66.7% #418DF6	RGB 65 141 246	#418DF6
83.3%	83.3% #4281FA	RGB 66 129 250	#4281FA
100.0%	100.0% #4376FF	RGB 67 118 255	#4376FF

#3FB5E4 #3FABE8 #40A2ED #4198F1 #418DF6 #4281FA #4376FF

#3FB5E4 - #4198F1 - #4376FF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3FB5E4 0%, #4198F1 50%, #4376FF 100%);
    background: -webkit-linear-gradient(top, #3FB5E4 0%, #4198F1 50%, #4376FF 100%);
    background: linear-gradient(to bottom, #3FB5E4 0%, #4198F1 50%, #4376FF 100%);
}
</style>