#7DF0FF - #1FB2E3 | 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 #7DF0FF to #1FB2E3

#7DF0FF #1FB2E3

Calculate the color between two colors, #7DF0FF and #1FB2E3. 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)

#7DF0FF - #1FB2E3 | 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 #7DF0FF as 0% and #1FB2E3 as 100%.

0.0%	0.0% #7DF0FF	RGB 125 240 255	#7DF0FF
16.7%	16.7% #6DE5FA	RGB 109 229 250	#6DE5FA
33.3%	33.3% #5DDBF5	RGB 93 219 245	#5DDBF5
50.0%	50.0% #4ED1F1	RGB 78 209 241	#4ED1F1
66.7%	66.7% #3EC6EC	RGB 62 198 236	#3EC6EC
83.3%	83.3% #2EBCE7	RGB 46 188 231	#2EBCE7
100.0%	100.0% #1FB2E3	RGB 31 178 227	#1FB2E3

#7DF0FF #6DE5FA #5DDBF5 #4ED1F1 #3EC6EC #2EBCE7 #1FB2E3

#7DF0FF - #1FB2E3

HSV Blend

#7DF0FF - #1FB2E3 | 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 #7DF0FF as 0% and #1FB2E3 as 100%.

0.0%	0.0% #7DF0FF	RGB 125 240 255	#7DF0FF
16.7%	16.7% #6BE6FA	RGB 107 230 250	#6BE6FA
33.3%	33.3% #5BDCF5	RGB 91 220 245	#5BDCF5
50.0%	50.0% #4BD2F1	RGB 75 210 241	#4BD2F1
66.7%	66.7% #3CC8EC	RGB 60 200 236	#3CC8EC
83.3%	83.3% #2DBDE7	RGB 45 189 231	#2DBDE7
100.0%	100.0% #1FB2E3	RGB 31 178 227	#1FB2E3

#7DF0FF #6BE6FA #5BDCF5 #4BD2F1 #3CC8EC #2DBDE7 #1FB2E3

#7DF0FF - #4BD2F1 - #1FB2E3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #7DF0FF 0%, #4BD2F1 50%, #1FB2E3 100%);
    background: -webkit-linear-gradient(top, #7DF0FF 0%, #4BD2F1 50%, #1FB2E3 100%);
    background: linear-gradient(to bottom, #7DF0FF 0%, #4BD2F1 50%, #1FB2E3 100%);
}
</style>