#6363FF - #7FB4FF | 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 #6363FF to #7FB4FF

#6363FF #7FB4FF

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

#6363FF - #7FB4FF | 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 #6363FF as 0% and #7FB4FF as 100%.

0.0%	0.0% #6363FF	RGB 99 99 255	#6363FF
16.7%	16.7% #6770FF	RGB 103 112 255	#6770FF
33.3%	33.3% #6C7EFF	RGB 108 126 255	#6C7EFF
50.0%	50.0% #718BFF	RGB 113 139 255	#718BFF
66.7%	66.7% #7599FF	RGB 117 153 255	#7599FF
83.3%	83.3% #7AA6FF	RGB 122 166 255	#7AA6FF
100.0%	100.0% #7FB4FF	RGB 127 180 255	#7FB4FF

#6363FF #6770FF #6C7EFF #718BFF #7599FF #7AA6FF #7FB4FF

#6363FF - #7FB4FF

HSV Blend

#6363FF - #7FB4FF | 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 #6363FF as 0% and #7FB4FF as 100%.

0.0%	0.0% #6363FF	RGB 99 99 255	#6363FF
16.7%	16.7% #6772FF	RGB 103 114 255	#6772FF
33.3%	33.3% #6C80FF	RGB 108 128 255	#6C80FF
50.0%	50.0% #718EFF	RGB 113 142 255	#718EFF
66.7%	66.7% #759BFF	RGB 117 155 255	#759BFF
83.3%	83.3% #7AA8FF	RGB 122 168 255	#7AA8FF
100.0%	100.0% #7FB4FF	RGB 127 180 255	#7FB4FF

#6363FF #6772FF #6C80FF #718EFF #759BFF #7AA8FF #7FB4FF

#6363FF - #718EFF - #7FB4FF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #6363FF 0%, #718EFF 50%, #7FB4FF 100%);
    background: -webkit-linear-gradient(top, #6363FF 0%, #718EFF 50%, #7FB4FF 100%);
    background: linear-gradient(to bottom, #6363FF 0%, #718EFF 50%, #7FB4FF 100%);
}
</style>