#3C6BFF - #6ABCFF | 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 #3C6BFF to #6ABCFF

#3C6BFF #6ABCFF

Calculate the color between two colors, #3C6BFF and #6ABCFF. 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)

#3C6BFF - #6ABCFF | 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 #3C6BFF as 0% and #6ABCFF as 100%.

0.0%	0.0% #3C6BFF	RGB 60 107 255	#3C6BFF
16.7%	16.7% #4378FF	RGB 67 120 255	#4378FF
33.3%	33.3% #4B86FF	RGB 75 134 255	#4B86FF
50.0%	50.0% #5393FF	RGB 83 147 255	#5393FF
66.7%	66.7% #5AA1FF	RGB 90 161 255	#5AA1FF
83.3%	83.3% #62AEFF	RGB 98 174 255	#62AEFF
100.0%	100.0% #6ABCFF	RGB 106 188 255	#6ABCFF

#3C6BFF #4378FF #4B86FF #5393FF #5AA1FF #62AEFF #6ABCFF

#3C6BFF - #6ABCFF

HSV Blend

#3C6BFF - #6ABCFF | 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 #3C6BFF as 0% and #6ABCFF as 100%.

0.0%	0.0% #3B6BFF	RGB 59 107 255	#3B6BFF
16.7%	16.7% #437AFF	RGB 67 122 255	#437AFF
33.3%	33.3% #4B89FF	RGB 75 137 255	#4B89FF
50.0%	50.0% #5397FF	RGB 83 151 255	#5397FF
66.7%	66.7% #5AA4FF	RGB 90 164 255	#5AA4FF
83.3%	83.3% #62B0FF	RGB 98 176 255	#62B0FF
100.0%	100.0% #6ABCFF	RGB 106 188 255	#6ABCFF

#3B6BFF #437AFF #4B89FF #5397FF #5AA4FF #62B0FF #6ABCFF

#3C6BFF - #5397FF - #6ABCFF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3B6BFF 0%, #5397FF 50%, #6ABCFF 100%);
    background: -webkit-linear-gradient(top, #3B6BFF 0%, #5397FF 50%, #6ABCFF 100%);
    background: linear-gradient(to bottom, #3B6BFF 0%, #5397FF 50%, #6ABCFF 100%);
}
</style>