#87CEFA - #2D80D2 | 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 #87CEFA to #2D80D2

#87CEFA #2D80D2

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

#87CEFA - #2D80D2 | 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 #87CEFA as 0% and #2D80D2 as 100%.

0.0%	0.0% #87CEFA	RGB 135 206 250	#87CEFA
16.7%	16.7% #78C1F3	RGB 120 193 243	#78C1F3
33.3%	33.3% #69B4EC	RGB 105 180 236	#69B4EC
50.0%	50.0% #5AA7E6	RGB 90 167 230	#5AA7E6
66.7%	66.7% #4B9ADF	RGB 75 154 223	#4B9ADF
83.3%	83.3% #3C8DD8	RGB 60 141 216	#3C8DD8
100.0%	100.0% #2D80D2	RGB 45 128 210	#2D80D2

#87CEFA #78C1F3 #69B4EC #5AA7E6 #4B9ADF #3C8DD8 #2D80D2

#87CEFA - #2D80D2

HSV Blend

#87CEFA - #2D80D2 | 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 #87CEFA as 0% and #2D80D2 as 100%.

0.0%	0.0% #87CEFA	RGB 135 206 250	#87CEFA
16.7%	16.7% #76C1F3	RGB 118 193 243	#76C1F3
33.3%	33.3% #66B4EC	RGB 102 180 236	#66B4EC
50.0%	50.0% #56A6E6	RGB 86 166 230	#56A6E6
66.7%	66.7% #4899DF	RGB 72 153 223	#4899DF
83.3%	83.3% #3A8CD8	RGB 58 140 216	#3A8CD8
100.0%	100.0% #2D80D2	RGB 45 128 210	#2D80D2

#87CEFA #76C1F3 #66B4EC #56A6E6 #4899DF #3A8CD8 #2D80D2

#87CEFA - #56A6E6 - #2D80D2

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #87CEFA 0%, #56A6E6 50%, #2D80D2 100%);
    background: -webkit-linear-gradient(top, #87CEFA 0%, #56A6E6 50%, #2D80D2 100%);
    background: linear-gradient(to bottom, #87CEFA 0%, #56A6E6 50%, #2D80D2 100%);
}
</style>