#3E8EB5 - #B8D1CD | 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 #3E8EB5 to #B8D1CD

#3E8EB5 #B8D1CD

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

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

0.0%	0.0% #3E8EB5	RGB 62 142 181	#3E8EB5
16.7%	16.7% #5299B9	RGB 82 153 185	#5299B9
33.3%	33.3% #66A4BD	RGB 102 164 189	#66A4BD
50.0%	50.0% #7BAFC1	RGB 123 175 193	#7BAFC1
66.7%	66.7% #8FBAC5	RGB 143 186 197	#8FBAC5
83.3%	83.3% #A3C5C9	RGB 163 197 201	#A3C5C9
100.0%	100.0% #B8D1CD	RGB 184 209 205	#B8D1CD

#3E8EB5 #5299B9 #66A4BD #7BAFC1 #8FBAC5 #A3C5C9 #B8D1CD

#3E8EB5 - #B8D1CD

HSV Blend

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

0.0%	0.0% #3E8EB5	RGB 62 142 181	#3E8EB5
16.7%	16.7% #509FB9	RGB 80 159 185	#509FB9
33.3%	33.3% #63AFBE	RGB 99 175 190	#63AFBE
50.0%	50.0% #77BCC3	RGB 119 188 195	#77BCC3
66.7%	66.7% #8BC7C7	RGB 139 199 199	#8BC7C7
83.3%	83.3% #A1CCC8	RGB 161 204 200	#A1CCC8
100.0%	100.0% #B8D1CD	RGB 184 209 205	#B8D1CD

#3E8EB5 #509FB9 #63AFBE #77BCC3 #8BC7C7 #A1CCC8 #B8D1CD

#3E8EB5 - #77BCC3 - #B8D1CD

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3E8EB5 0%, #77BCC3 50%, #B8D1CD 100%);
    background: -webkit-linear-gradient(top, #3E8EB5 0%, #77BCC3 50%, #B8D1CD 100%);
    background: linear-gradient(to bottom, #3E8EB5 0%, #77BCC3 50%, #B8D1CD 100%);
}
</style>