#7CD0FF - #2283DB | 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 #7CD0FF to #2283DB

#7CD0FF #2283DB

Calculate the color between two colors, #7CD0FF and #2283DB. 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)

#7CD0FF - #2283DB | 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 #7CD0FF as 0% and #2283DB as 100%.

0.0%	0.0% #7CD0FF	RGB 124 208 255	#7CD0FF
16.7%	16.7% #6DC3F9	RGB 109 195 249	#6DC3F9
33.3%	33.3% #5EB6F3	RGB 94 182 243	#5EB6F3
50.0%	50.0% #4FA9ED	RGB 79 169 237	#4FA9ED
66.7%	66.7% #409CE7	RGB 64 156 231	#409CE7
83.3%	83.3% #318FE1	RGB 49 143 225	#318FE1
100.0%	100.0% #2283DB	RGB 34 131 219	#2283DB

#7CD0FF #6DC3F9 #5EB6F3 #4FA9ED #409CE7 #318FE1 #2283DB

#7CD0FF - #2283DB

HSV Blend

#7CD0FF - #2283DB | 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 #7CD0FF as 0% and #2283DB as 100%.

0.0%	0.0% #7CD0FF	RGB 124 208 255	#7CD0FF
16.7%	16.7% #6BC3F9	RGB 107 195 249	#6BC3F9
33.3%	33.3% #5BB6F3	RGB 91 182 243	#5BB6F3
50.0%	50.0% #4CA9ED	RGB 76 169 237	#4CA9ED
66.7%	66.7% #3D9CE7	RGB 61 156 231	#3D9CE7
83.3%	83.3% #2F8FE1	RGB 47 143 225	#2F8FE1
100.0%	100.0% #2283DB	RGB 34 131 219	#2283DB

#7CD0FF #6BC3F9 #5BB6F3 #4CA9ED #3D9CE7 #2F8FE1 #2283DB

#7CD0FF - #4CA9ED - #2283DB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #7CD0FF 0%, #4CA9ED 50%, #2283DB 100%);
    background: -webkit-linear-gradient(top, #7CD0FF 0%, #4CA9ED 50%, #2283DB 100%);
    background: linear-gradient(to bottom, #7CD0FF 0%, #4CA9ED 50%, #2283DB 100%);
}
</style>