#3C87BA - #C7DCEB | 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 #3C87BA to #C7DCEB

#3C87BA #C7DCEB

Calculate the color between two colors, #3C87BA and #C7DCEB. 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)

#3C87BA - #C7DCEB | 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 #3C87BA as 0% and #C7DCEB as 100%.

0.0%	0.0% #3C87BA	RGB 60 135 186	#3C87BA
16.7%	16.7% #5395C2	RGB 83 149 194	#5395C2
33.3%	33.3% #6AA3CA	RGB 106 163 202	#6AA3CA
50.0%	50.0% #81B1D2	RGB 129 177 210	#81B1D2
66.7%	66.7% #98BFDA	RGB 152 191 218	#98BFDA
83.3%	83.3% #AFCDE2	RGB 175 205 226	#AFCDE2
100.0%	100.0% #C7DCEB	RGB 199 220 235	#C7DCEB

#3C87BA #5395C2 #6AA3CA #81B1D2 #98BFDA #AFCDE2 #C7DCEB

#3C87BA - #C7DCEB

HSV Blend

#3C87BA - #C7DCEB | 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 #3C87BA as 0% and #C7DCEB as 100%.

0.0%	0.0% #3C87BA	RGB 60 135 186	#3C87BA
16.7%	16.7% #4F93C2	RGB 79 147 194	#4F93C2
33.3%	33.3% #64A0CA	RGB 100 160 202	#64A0CA
50.0%	50.0% #7BAED2	RGB 123 174 210	#7BAED2
66.7%	66.7% #92BDDA	RGB 146 189 218	#92BDDA
83.3%	83.3% #ACCCE2	RGB 172 204 226	#ACCCE2
100.0%	100.0% #C7DCEB	RGB 199 220 235	#C7DCEB

#3C87BA #4F93C2 #64A0CA #7BAED2 #92BDDA #ACCCE2 #C7DCEB

#3C87BA - #7BAED2 - #C7DCEB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3C87BA 0%, #7BAED2 50%, #C7DCEB 100%);
    background: -webkit-linear-gradient(top, #3C87BA 0%, #7BAED2 50%, #C7DCEB 100%);
    background: linear-gradient(to bottom, #3C87BA 0%, #7BAED2 50%, #C7DCEB 100%);
}
</style>