#5A8CC7 - #B6CAD6 | 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 #5A8CC7 to #B6CAD6

#5A8CC7 #B6CAD6

Calculate the color between two colors, #5A8CC7 and #B6CAD6. 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)

#5A8CC7 - #B6CAD6 | 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 #5A8CC7 as 0% and #B6CAD6 as 100%.

0.0%	0.0% #5A8CC7	RGB 90 140 199	#5A8CC7
16.7%	16.7% #6996C9	RGB 105 150 201	#6996C9
33.3%	33.3% #78A0CC	RGB 120 160 204	#78A0CC
50.0%	50.0% #88ABCE	RGB 136 171 206	#88ABCE
66.7%	66.7% #97B5D1	RGB 151 181 209	#97B5D1
83.3%	83.3% #A6BFD3	RGB 166 191 211	#A6BFD3
100.0%	100.0% #B6CAD6	RGB 182 202 214	#B6CAD6

#5A8CC7 #6996C9 #78A0CC #88ABCE #97B5D1 #A6BFD3 #B6CAD6

#5A8CC7 - #B6CAD6

HSV Blend

#5A8CC7 - #B6CAD6 | 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 #5A8CC7 as 0% and #B6CAD6 as 100%.

0.0%	0.0% #5A8CC7	RGB 90 140 199	#5A8CC7
16.7%	16.7% #6897C9	RGB 104 151 201	#6897C9
33.3%	33.3% #77A2CC	RGB 119 162 204	#77A2CC
50.0%	50.0% #86ADCE	RGB 134 173 206	#86ADCE
66.7%	66.7% #96B7D1	RGB 150 183 209	#96B7D1
83.3%	83.3% #A5C1D3	RGB 165 193 211	#A5C1D3
100.0%	100.0% #B6CAD6	RGB 182 202 214	#B6CAD6

#5A8CC7 #6897C9 #77A2CC #86ADCE #96B7D1 #A5C1D3 #B6CAD6

#5A8CC7 - #86ADCE - #B6CAD6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5A8CC7 0%, #86ADCE 50%, #B6CAD6 100%);
    background: -webkit-linear-gradient(top, #5A8CC7 0%, #86ADCE 50%, #B6CAD6 100%);
    background: linear-gradient(to bottom, #5A8CC7 0%, #86ADCE 50%, #B6CAD6 100%);
}
</style>