#ABDBFF - #CCFFF7 | 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 #ABDBFF to #CCFFF7

#ABDBFF #CCFFF7

Calculate the color between two colors, #ABDBFF and #CCFFF7. 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)

#ABDBFF - #CCFFF7 | 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 #ABDBFF as 0% and #CCFFF7 as 100%.

0.0%	0.0% #ABDBFF	RGB 171 219 255	#ABDBFF
16.7%	16.7% #B0E1FD	RGB 176 225 253	#B0E1FD
33.3%	33.3% #B6E7FC	RGB 182 231 252	#B6E7FC
50.0%	50.0% #BBEDFB	RGB 187 237 251	#BBEDFB
66.7%	66.7% #C1F3F9	RGB 193 243 249	#C1F3F9
83.3%	83.3% #C6F9F8	RGB 198 249 248	#C6F9F8
100.0%	100.0% #CCFFF7	RGB 204 255 247	#CCFFF7

#ABDBFF #B0E1FD #B6E7FC #BBEDFB #C1F3F9 #C6F9F8 #CCFFF7

#ABDBFF - #CCFFF7

HSV Blend

#ABDBFF - #CCFFF7 | 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 #ABDBFF as 0% and #CCFFF7 as 100%.

0.0%	0.0% #ABDBFF	RGB 171 219 255	#ABDBFF
16.7%	16.7% #B0E5FF	RGB 176 229 255	#B0E5FF
33.3%	33.3% #B6EDFF	RGB 182 237 255	#B6EDFF
50.0%	50.0% #BBF5FF	RGB 187 245 255	#BBF5FF
66.7%	66.7% #C1FCFF	RGB 193 252 255	#C1FCFF
83.3%	83.3% #C6FFFB	RGB 198 255 251	#C6FFFB
100.0%	100.0% #CCFFF7	RGB 204 255 247	#CCFFF7

#ABDBFF #B0E5FF #B6EDFF #BBF5FF #C1FCFF #C6FFFB #CCFFF7

#ABDBFF - #BBF5FF - #CCFFF7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABDBFF 0%, #BBF5FF 50%, #CCFFF7 100%);
    background: -webkit-linear-gradient(top, #ABDBFF 0%, #BBF5FF 50%, #CCFFF7 100%);
    background: linear-gradient(to bottom, #ABDBFF 0%, #BBF5FF 50%, #CCFFF7 100%);
}
</style>