#3886A0 - #B9CEC2 | 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 #3886A0 to #B9CEC2

#3886A0 #B9CEC2

Calculate the color between two colors, #3886A0 and #B9CEC2. 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)

#3886A0 - #B9CEC2 | 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 #3886A0 as 0% and #B9CEC2 as 100%.

0.0%	0.0% #3886A0	RGB 56 134 160	#3886A0
16.7%	16.7% #4D92A5	RGB 77 146 165	#4D92A5
33.3%	33.3% #639EAB	RGB 99 158 171	#639EAB
50.0%	50.0% #78AAB1	RGB 120 170 177	#78AAB1
66.7%	66.7% #8EB6B6	RGB 142 182 182	#8EB6B6
83.3%	83.3% #A3C2BC	RGB 163 194 188	#A3C2BC
100.0%	100.0% #B9CEC2	RGB 185 206 194	#B9CEC2

#3886A0 #4D92A5 #639EAB #78AAB1 #8EB6B6 #A3C2BC #B9CEC2

#3886A0 - #B9CEC2

HSV Blend

#3886A0 - #B9CEC2 | 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 #3886A0 as 0% and #B9CEC2 as 100%.

0.0%	0.0% #3885A0	RGB 56 133 160	#3885A0
16.7%	16.7% #499DA7	RGB 73 157 167	#499DA7
33.3%	33.3% #5DAFAD	RGB 93 175 173	#5DAFAD
50.0%	50.0% #72B7AB	RGB 114 183 171	#72B7AB
66.7%	66.7% #88BEAE	RGB 136 190 174	#88BEAE
83.3%	83.3% #9FC6B5	RGB 159 198 181	#9FC6B5
100.0%	100.0% #B9CEC2	RGB 185 206 194	#B9CEC2

#3885A0 #499DA7 #5DAFAD #72B7AB #88BEAE #9FC6B5 #B9CEC2

#3886A0 - #72B7AB - #B9CEC2

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3885A0 0%, #72B7AB 50%, #B9CEC2 100%);
    background: -webkit-linear-gradient(top, #3885A0 0%, #72B7AB 50%, #B9CEC2 100%);
    background: linear-gradient(to bottom, #3885A0 0%, #72B7AB 50%, #B9CEC2 100%);
}
</style>