#5B4A8C - #7BC2D1 | 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 #5B4A8C to #7BC2D1

#5B4A8C #7BC2D1

Calculate the color between two colors, #5B4A8C and #7BC2D1. 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)

#5B4A8C - #7BC2D1 | 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 #5B4A8C as 0% and #7BC2D1 as 100%.

0.0%	0.0% #5B4A8C	RGB 91 74 140	#5B4A8C
16.7%	16.7% #605E97	RGB 96 94 151	#605E97
33.3%	33.3% #6572A3	RGB 101 114 163	#6572A3
50.0%	50.0% #6B86AE	RGB 107 134 174	#6B86AE
66.7%	66.7% #709ABA	RGB 112 154 186	#709ABA
83.3%	83.3% #75AEC5	RGB 117 174 197	#75AEC5
100.0%	100.0% #7BC2D1	RGB 123 194 209	#7BC2D1

#5B4A8C #605E97 #6572A3 #6B86AE #709ABA #75AEC5 #7BC2D1

#5B4A8C - #7BC2D1

HSV Blend

#5B4A8C - #7BC2D1 | 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 #5B4A8C as 0% and #7BC2D1 as 100%.

0.0%	0.0% #5B4A8C	RGB 91 74 140	#5B4A8C
16.7%	16.7% #565197	RGB 86 81 151	#565197
33.3%	33.3% #5961A3	RGB 89 97 163	#5961A3
50.0%	50.0% #6177AE	RGB 97 119 174	#6177AE
66.7%	66.7% #698FBA	RGB 105 143 186	#698FBA
83.3%	83.3% #72A7C5	RGB 114 167 197	#72A7C5
100.0%	100.0% #7BC2D1	RGB 123 194 209	#7BC2D1

#5B4A8C #565197 #5961A3 #6177AE #698FBA #72A7C5 #7BC2D1

#5B4A8C - #6177AE - #7BC2D1

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5B4A8C 0%, #6177AE 50%, #7BC2D1 100%);
    background: -webkit-linear-gradient(top, #5B4A8C 0%, #6177AE 50%, #7BC2D1 100%);
    background: linear-gradient(to bottom, #5B4A8C 0%, #6177AE 50%, #7BC2D1 100%);
}
</style>