#7FD3E1 - #2F8AAE | 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 #7FD3E1 to #2F8AAE

#7FD3E1 #2F8AAE

Calculate the color between two colors, #7FD3E1 and #2F8AAE. 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)

#7FD3E1 - #2F8AAE | 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 #7FD3E1 as 0% and #2F8AAE as 100%.

0.0%	0.0% #7FD3E1	RGB 127 211 225	#7FD3E1
16.7%	16.7% #71C6D8	RGB 113 198 216	#71C6D8
33.3%	33.3% #64BAD0	RGB 100 186 208	#64BAD0
50.0%	50.0% #57AEC7	RGB 87 174 199	#57AEC7
66.7%	66.7% #49A2BF	RGB 73 162 191	#49A2BF
83.3%	83.3% #3C96B6	RGB 60 150 182	#3C96B6
100.0%	100.0% #2F8AAE	RGB 47 138 174	#2F8AAE

#7FD3E1 #71C6D8 #64BAD0 #57AEC7 #49A2BF #3C96B6 #2F8AAE

#7FD3E1 - #2F8AAE

HSV Blend

#7FD3E1 - #2F8AAE | 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 #7FD3E1 as 0% and #2F8AAE as 100%.

0.0%	0.0% #7FD3E1	RGB 127 211 225	#7FD3E1
16.7%	16.7% #6FC7D8	RGB 111 199 216	#6FC7D8
33.3%	33.3% #60BAD0	RGB 96 186 208	#60BAD0
50.0%	50.0% #53AEC7	RGB 83 174 199	#53AEC7
66.7%	66.7% #46A2BF	RGB 70 162 191	#46A2BF
83.3%	83.3% #3A96B6	RGB 58 150 182	#3A96B6
100.0%	100.0% #2F8AAE	RGB 47 138 174	#2F8AAE

#7FD3E1 #6FC7D8 #60BAD0 #53AEC7 #46A2BF #3A96B6 #2F8AAE

#7FD3E1 - #53AEC7 - #2F8AAE

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #7FD3E1 0%, #53AEC7 50%, #2F8AAE 100%);
    background: -webkit-linear-gradient(top, #7FD3E1 0%, #53AEC7 50%, #2F8AAE 100%);
    background: linear-gradient(to bottom, #7FD3E1 0%, #53AEC7 50%, #2F8AAE 100%);
}
</style>