#C4CADE - #677EA4 | 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 #C4CADE to #677EA4

#C4CADE #677EA4

Calculate the color between two colors, #C4CADE and #677EA4. 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)

#C4CADE - #677EA4 | 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 #C4CADE as 0% and #677EA4 as 100%.

0.0%	0.0% #C4CADE	RGB 196 202 222	#C4CADE
16.7%	16.7% #B4BDD4	RGB 180 189 212	#B4BDD4
33.3%	33.3% #A5B0CA	RGB 165 176 202	#A5B0CA
50.0%	50.0% #95A4C1	RGB 149 164 193	#95A4C1
66.7%	66.7% #8697B7	RGB 134 151 183	#8697B7
83.3%	83.3% #768AAD	RGB 118 138 173	#768AAD
100.0%	100.0% #677EA4	RGB 103 126 164	#677EA4

#C4CADE #B4BDD4 #A5B0CA #95A4C1 #8697B7 #768AAD #677EA4

#C4CADE - #677EA4

HSV Blend

#C4CADE - #677EA4 | 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 #C4CADE as 0% and #677EA4 as 100%.

0.0%	0.0% #C4CADE	RGB 196 202 222	#C4CADE
16.7%	16.7% #B2BBD4	RGB 178 187 212	#B2BBD4
33.3%	33.3% #A1ADCA	RGB 161 173 202	#A1ADCA
50.0%	50.0% #91A0C1	RGB 145 160 193	#91A0C1
66.7%	66.7% #8293B7	RGB 130 147 183	#8293B7
83.3%	83.3% #7488AD	RGB 116 136 173	#7488AD
100.0%	100.0% #677EA4	RGB 103 126 164	#677EA4

#C4CADE #B2BBD4 #A1ADCA #91A0C1 #8293B7 #7488AD #677EA4

#C4CADE - #91A0C1 - #677EA4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #C4CADE 0%, #91A0C1 50%, #677EA4 100%);
    background: -webkit-linear-gradient(top, #C4CADE 0%, #91A0C1 50%, #677EA4 100%);
    background: linear-gradient(to bottom, #C4CADE 0%, #91A0C1 50%, #677EA4 100%);
}
</style>