#3A8CB1 - #B7D1CB | 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 #3A8CB1 to #B7D1CB

#3A8CB1 #B7D1CB

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

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

0.0%	0.0% #3A8CB1	RGB 58 140 177	#3A8CB1
16.7%	16.7% #4E97B5	RGB 78 151 181	#4E97B5
33.3%	33.3% #63A3B9	RGB 99 163 185	#63A3B9
50.0%	50.0% #78AEBE	RGB 120 174 190	#78AEBE
66.7%	66.7% #8DBAC2	RGB 141 186 194	#8DBAC2
83.3%	83.3% #A2C5C6	RGB 162 197 198	#A2C5C6
100.0%	100.0% #B7D1CB	RGB 183 209 203	#B7D1CB

#3A8CB1 #4E97B5 #63A3B9 #78AEBE #8DBAC2 #A2C5C6 #B7D1CB

#3A8CB1 - #B7D1CB

HSV Blend

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

0.0%	0.0% #3A8CB1	RGB 58 140 177	#3A8CB1
16.7%	16.7% #4C9EB6	RGB 76 158 182	#4C9EB6
33.3%	33.3% #5FAFBB	RGB 95 175 187	#5FAFBB
50.0%	50.0% #74BDC1	RGB 116 189 193	#74BDC1
66.7%	66.7% #89C6C3	RGB 137 198 195	#89C6C3
83.3%	83.3% #9FCBC5	RGB 159 203 197	#9FCBC5
100.0%	100.0% #B7D1CB	RGB 183 209 203	#B7D1CB

#3A8CB1 #4C9EB6 #5FAFBB #74BDC1 #89C6C3 #9FCBC5 #B7D1CB

#3A8CB1 - #74BDC1 - #B7D1CB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3A8CB1 0%, #74BDC1 50%, #B7D1CB 100%);
    background: -webkit-linear-gradient(top, #3A8CB1 0%, #74BDC1 50%, #B7D1CB 100%);
    background: linear-gradient(to bottom, #3A8CB1 0%, #74BDC1 50%, #B7D1CB 100%);
}
</style>