#B5DAE3 - #508CB4 | 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 #B5DAE3 to #508CB4

#B5DAE3 #508CB4

Calculate the color between two colors, #B5DAE3 and #508CB4. 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)

#B5DAE3 - #508CB4 | 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 #B5DAE3 as 0% and #508CB4 as 100%.

0.0%	0.0% #B5DAE3	RGB 181 218 227	#B5DAE3
16.7%	16.7% #A4CDDB	RGB 164 205 219	#A4CDDB
33.3%	33.3% #93C0D3	RGB 147 192 211	#93C0D3
50.0%	50.0% #82B3CB	RGB 130 179 203	#82B3CB
66.7%	66.7% #71A6C3	RGB 113 166 195	#71A6C3
83.3%	83.3% #6099BB	RGB 96 153 187	#6099BB
100.0%	100.0% #508CB4	RGB 80 140 180	#508CB4

#B5DAE3 #A4CDDB #93C0D3 #82B3CB #71A6C3 #6099BB #508CB4

#B5DAE3 - #508CB4

HSV Blend

#B5DAE3 - #508CB4 | 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 #B5DAE3 as 0% and #508CB4 as 100%.

0.0%	0.0% #B5DAE3	RGB 181 218 227	#B5DAE3
16.7%	16.7% #A1CEDB	RGB 161 206 219	#A1CEDB
33.3%	33.3% #8FC1D3	RGB 143 193 211	#8FC1D3
50.0%	50.0% #7EB4CB	RGB 126 180 203	#7EB4CB
66.7%	66.7% #6DA7C3	RGB 109 167 195	#6DA7C3
83.3%	83.3% #5E99BB	RGB 94 153 187	#5E99BB
100.0%	100.0% #508CB4	RGB 80 140 180	#508CB4

#B5DAE3 #A1CEDB #8FC1D3 #7EB4CB #6DA7C3 #5E99BB #508CB4

#B5DAE3 - #7EB4CB - #508CB4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #B5DAE3 0%, #7EB4CB 50%, #508CB4 100%);
    background: -webkit-linear-gradient(top, #B5DAE3 0%, #7EB4CB 50%, #508CB4 100%);
    background: linear-gradient(to bottom, #B5DAE3 0%, #7EB4CB 50%, #508CB4 100%);
}
</style>