#564B5E - #C676D1 | 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 #564B5E to #C676D1

#564B5E #C676D1

Calculate the color between two colors, #564B5E and #C676D1. 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)

#564B5E - #C676D1 | 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 #564B5E as 0% and #C676D1 as 100%.

0.0%	0.0% #564B5E	RGB 86 75 94	#564B5E
16.7%	16.7% #685271	RGB 104 82 113	#685271
33.3%	33.3% #7B5984	RGB 123 89 132	#7B5984
50.0%	50.0% #8E6097	RGB 142 96 151	#8E6097
66.7%	66.7% #A067AA	RGB 160 103 170	#A067AA
83.3%	83.3% #B36EBD	RGB 179 110 189	#B36EBD
100.0%	100.0% #C676D1	RGB 198 118 209	#C676D1

#564B5E #685271 #7B5984 #8E6097 #A067AA #B36EBD #C676D1

#564B5E - #C676D1

HSV Blend

#564B5E - #C676D1 | 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 #564B5E as 0% and #C676D1 as 100%.

0.0%	0.0% #564B5E	RGB 86 75 94	#564B5E
16.7%	16.7% #675571	RGB 103 85 113	#675571
33.3%	33.3% #785F84	RGB 120 95 132	#785F84
50.0%	50.0% #8A6797	RGB 138 103 151	#8A6797
66.7%	66.7% #9D6DAA	RGB 157 109 170	#9D6DAA
83.3%	83.3% #B072BD	RGB 176 114 189	#B072BD
100.0%	100.0% #C676D1	RGB 198 118 209	#C676D1

#564B5E #675571 #785F84 #8A6797 #9D6DAA #B072BD #C676D1

#564B5E - #8A6797 - #C676D1

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #564B5E 0%, #8A6797 50%, #C676D1 100%);
    background: -webkit-linear-gradient(top, #564B5E 0%, #8A6797 50%, #C676D1 100%);
    background: linear-gradient(to bottom, #564B5E 0%, #8A6797 50%, #C676D1 100%);
}
</style>