#535CFF - #71B0FF | 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 #535CFF to #71B0FF

#535CFF #71B0FF

Calculate the color between two colors, #535CFF and #71B0FF. 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)

#535CFF - #71B0FF | 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 #535CFF as 0% and #71B0FF as 100%.

0.0%	0.0% #535CFF	RGB 83 92 255	#535CFF
16.7%	16.7% #586AFF	RGB 88 106 255	#586AFF
33.3%	33.3% #5D78FF	RGB 93 120 255	#5D78FF
50.0%	50.0% #6286FF	RGB 98 134 255	#6286FF
66.7%	66.7% #6794FF	RGB 103 148 255	#6794FF
83.3%	83.3% #6CA2FF	RGB 108 162 255	#6CA2FF
100.0%	100.0% #71B0FF	RGB 113 176 255	#71B0FF

#535CFF #586AFF #5D78FF #6286FF #6794FF #6CA2FF #71B0FF

#535CFF - #71B0FF

HSV Blend

#535CFF - #71B0FF | 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 #535CFF as 0% and #71B0FF as 100%.

0.0%	0.0% #535BFF	RGB 83 91 255	#535BFF
16.7%	16.7% #586BFF	RGB 88 107 255	#586BFF
33.3%	33.3% #5D7AFF	RGB 93 122 255	#5D7AFF
50.0%	50.0% #6288FF	RGB 98 136 255	#6288FF
66.7%	66.7% #6796FF	RGB 103 150 255	#6796FF
83.3%	83.3% #6CA3FF	RGB 108 163 255	#6CA3FF
100.0%	100.0% #71B0FF	RGB 113 176 255	#71B0FF

#535BFF #586BFF #5D7AFF #6288FF #6796FF #6CA3FF #71B0FF

#535CFF - #6288FF - #71B0FF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #535BFF 0%, #6288FF 50%, #71B0FF 100%);
    background: -webkit-linear-gradient(top, #535BFF 0%, #6288FF 50%, #71B0FF 100%);
    background: linear-gradient(to bottom, #535BFF 0%, #6288FF 50%, #71B0FF 100%);
}
</style>