#BAFFF0 - #DBFDF7 | 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 #BAFFF0 to #DBFDF7

#BAFFF0 #DBFDF7

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

#BAFFF0 - #DBFDF7 | 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 #BAFFF0 as 0% and #DBFDF7 as 100%.

0.0%	0.0% #BAFFF0	RGB 186 255 240	#BAFFF0
16.7%	16.7% #BFFEF1	RGB 191 254 241	#BFFEF1
33.3%	33.3% #C5FEF2	RGB 197 254 242	#C5FEF2
50.0%	50.0% #CAFEF3	RGB 202 254 243	#CAFEF3
66.7%	66.7% #D0FDF4	RGB 208 253 244	#D0FDF4
83.3%	83.3% #D5FDF5	RGB 213 253 245	#D5FDF5
100.0%	100.0% #DBFDF7	RGB 219 253 247	#DBFDF7

#BAFFF0 #BFFEF1 #C5FEF2 #CAFEF3 #D0FDF4 #D5FDF5 #DBFDF7

#BAFFF0 - #DBFDF7

HSV Blend

#BAFFF0 - #DBFDF7 | 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 #BAFFF0 as 0% and #DBFDF7 as 100%.

0.0%	0.0% #BAFFF0	RGB 186 255 240	#BAFFF0
16.7%	16.7% #BFFEF1	RGB 191 254 241	#BFFEF1
33.3%	33.3% #C5FEF2	RGB 197 254 242	#C5FEF2
50.0%	50.0% #CAFEF3	RGB 202 254 243	#CAFEF3
66.7%	66.7% #D0FDF4	RGB 208 253 244	#D0FDF4
83.3%	83.3% #D5FDF6	RGB 213 253 246	#D5FDF6
100.0%	100.0% #DBFDF7	RGB 219 253 247	#DBFDF7

#BAFFF0 #BFFEF1 #C5FEF2 #CAFEF3 #D0FDF4 #D5FDF6 #DBFDF7

#BAFFF0 - #CAFEF3 - #DBFDF7

CSS codes

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

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