#3C8FAA - #BFD3C6 | 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 #3C8FAA to #BFD3C6

#3C8FAA #BFD3C6

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

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

0.0%	0.0% #3C8FAA	RGB 60 143 170	#3C8FAA
16.7%	16.7% #519AAE	RGB 81 154 174	#519AAE
33.3%	33.3% #67A5B3	RGB 103 165 179	#67A5B3
50.0%	50.0% #7DB1B8	RGB 125 177 184	#7DB1B8
66.7%	66.7% #93BCBC	RGB 147 188 188	#93BCBC
83.3%	83.3% #A9C7C1	RGB 169 199 193	#A9C7C1
100.0%	100.0% #BFD3C6	RGB 191 211 198	#BFD3C6

#3C8FAA #519AAE #67A5B3 #7DB1B8 #93BCBC #A9C7C1 #BFD3C6

#3C8FAA - #BFD3C6

HSV Blend

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

0.0%	0.0% #3C8EAA	RGB 60 142 170	#3C8EAA
16.7%	16.7% #4EA7B0	RGB 78 167 176	#4EA7B0
33.3%	33.3% #62B7B3	RGB 98 183 179	#62B7B3
50.0%	50.0% #77BEB0	RGB 119 190 176	#77BEB0
66.7%	66.7% #8EC5B1	RGB 142 197 177	#8EC5B1
83.3%	83.3% #A6CCB9	RGB 166 204 185	#A6CCB9
100.0%	100.0% #BFD3C6	RGB 191 211 198	#BFD3C6

#3C8EAA #4EA7B0 #62B7B3 #77BEB0 #8EC5B1 #A6CCB9 #BFD3C6

#3C8FAA - #77BEB0 - #BFD3C6

CSS codes

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

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