#CCEDEE - #7AD4DF | 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 #CCEDEE to #7AD4DF

#CCEDEE #7AD4DF

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

#CCEDEE - #7AD4DF | 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 #CCEDEE as 0% and #7AD4DF as 100%.

0.0%	0.0% #CCEDEE	RGB 204 237 238	#CCEDEE
16.7%	16.7% #BEE8EB	RGB 190 232 235	#BEE8EB
33.3%	33.3% #B0E4E9	RGB 176 228 233	#B0E4E9
50.0%	50.0% #A3E0E6	RGB 163 224 230	#A3E0E6
66.7%	66.7% #95DCE4	RGB 149 220 228	#95DCE4
83.3%	83.3% #87D8E1	RGB 135 216 225	#87D8E1
100.0%	100.0% #7AD4DF	RGB 122 212 223	#7AD4DF

#CCEDEE #BEE8EB #B0E4E9 #A3E0E6 #95DCE4 #87D8E1 #7AD4DF

#CCEDEE - #7AD4DF

HSV Blend

#CCEDEE - #7AD4DF | 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 #CCEDEE as 0% and #7AD4DF as 100%.

0.0%	0.0% #CCEDEE	RGB 204 237 238	#CCEDEE
16.7%	16.7% #BDE9EB	RGB 189 233 235	#BDE9EB
33.3%	33.3% #AFE5E9	RGB 175 229 233	#AFE5E9
50.0%	50.0% #A1E1E6	RGB 161 225 230	#A1E1E6
66.7%	66.7% #94DDE4	RGB 148 221 228	#94DDE4
83.3%	83.3% #87D8E1	RGB 135 216 225	#87D8E1
100.0%	100.0% #7AD4DF	RGB 122 212 223	#7AD4DF

#CCEDEE #BDE9EB #AFE5E9 #A1E1E6 #94DDE4 #87D8E1 #7AD4DF

#CCEDEE - #A1E1E6 - #7AD4DF

CSS codes

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

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