#CACBEC - #677EB7 | 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 #CACBEC to #677EB7

#CACBEC #677EB7

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

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

0.0%	0.0% #CACBEC	RGB 202 203 236	#CACBEC
16.7%	16.7% #B9BEE3	RGB 185 190 227	#B9BEE3
33.3%	33.3% #A9B1DA	RGB 169 177 218	#A9B1DA
50.0%	50.0% #98A4D1	RGB 152 164 209	#98A4D1
66.7%	66.7% #8897C8	RGB 136 151 200	#8897C8
83.3%	83.3% #778ABF	RGB 119 138 191	#778ABF
100.0%	100.0% #677EB7	RGB 103 126 183	#677EB7

#CACBEC #B9BEE3 #A9B1DA #98A4D1 #8897C8 #778ABF #677EB7

#CACBEC - #677EB7

HSV Blend

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

0.0%	0.0% #CACBEC	RGB 202 203 236	#CACBEC
16.7%	16.7% #B7BAE3	RGB 183 186 227	#B7BAE3
33.3%	33.3% #A5ABDA	RGB 165 171 218	#A5ABDA
50.0%	50.0% #949ED1	RGB 148 158 209	#949ED1
66.7%	66.7% #8492C8	RGB 132 146 200	#8492C8
83.3%	83.3% #7587BF	RGB 117 135 191	#7587BF
100.0%	100.0% #677EB7	RGB 103 126 183	#677EB7

#CACBEC #B7BAE3 #A5ABDA #949ED1 #8492C8 #7587BF #677EB7

#CACBEC - #949ED1 - #677EB7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #CACBEC 0%, #949ED1 50%, #677EB7 100%);
    background: -webkit-linear-gradient(top, #CACBEC 0%, #949ED1 50%, #677EB7 100%);
    background: linear-gradient(to bottom, #CACBEC 0%, #949ED1 50%, #677EB7 100%);
}
</style>