#6AC3E5 - #1F76B0 | 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 #6AC3E5 to #1F76B0

#6AC3E5 #1F76B0

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

#6AC3E5 - #1F76B0 | 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 #6AC3E5 as 0% and #1F76B0 as 100%.

0.0%	0.0% #6AC3E5	RGB 106 195 229	#6AC3E5
16.7%	16.7% #5DB6DC	RGB 93 182 220	#5DB6DC
33.3%	33.3% #51A9D3	RGB 81 169 211	#51A9D3
50.0%	50.0% #449CCA	RGB 68 156 202	#449CCA
66.7%	66.7% #388FC1	RGB 56 143 193	#388FC1
83.3%	83.3% #2B82B8	RGB 43 130 184	#2B82B8
100.0%	100.0% #1F76B0	RGB 31 118 176	#1F76B0

#6AC3E5 #5DB6DC #51A9D3 #449CCA #388FC1 #2B82B8 #1F76B0

#6AC3E5 - #1F76B0

HSV Blend

#6AC3E5 - #1F76B0 | 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 #6AC3E5 as 0% and #1F76B0 as 100%.

0.0%	0.0% #6AC3E5	RGB 106 195 229	#6AC3E5
16.7%	16.7% #5BB5DC	RGB 91 181 220	#5BB5DC
33.3%	33.3% #4DA8D3	RGB 77 168 211	#4DA8D3
50.0%	50.0% #409BCA	RGB 64 155 202	#409BCA
66.7%	66.7% #348FC1	RGB 52 143 193	#348FC1
83.3%	83.3% #2982B8	RGB 41 130 184	#2982B8
100.0%	100.0% #1F76B0	RGB 31 118 176	#1F76B0

#6AC3E5 #5BB5DC #4DA8D3 #409BCA #348FC1 #2982B8 #1F76B0

#6AC3E5 - #409BCA - #1F76B0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #6AC3E5 0%, #409BCA 50%, #1F76B0 100%);
    background: -webkit-linear-gradient(top, #6AC3E5 0%, #409BCA 50%, #1F76B0 100%);
    background: linear-gradient(to bottom, #6AC3E5 0%, #409BCA 50%, #1F76B0 100%);
}
</style>