#5A8AAB - #C4C9C3 | 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 #5A8AAB to #C4C9C3

#5A8AAB #C4C9C3

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

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

0.0%	0.0% #5A8AAB	RGB 90 138 171	#5A8AAB
16.7%	16.7% #6B94AF	RGB 107 148 175	#6B94AF
33.3%	33.3% #7D9FB3	RGB 125 159 179	#7D9FB3
50.0%	50.0% #8FA9B7	RGB 143 169 183	#8FA9B7
66.7%	66.7% #A0B4BB	RGB 160 180 187	#A0B4BB
83.3%	83.3% #B2BEBF	RGB 178 190 191	#B2BEBF
100.0%	100.0% #C4C9C3	RGB 196 201 195	#C4C9C3

#5A8AAB #6B94AF #7D9FB3 #8FA9B7 #A0B4BB #B2BEBF #C4C9C3

#5A8AAB - #C4C9C3

HSV Blend

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

0.0%	0.0% #5A89AB	RGB 90 137 171	#5A89AB
16.7%	16.7% #69A5B0	RGB 105 165 176	#69A5B0
33.3%	33.3% #7AB5AE	RGB 122 181 174	#7AB5AE
50.0%	50.0% #8BBAA8	RGB 139 186 168	#8BBAA8
66.7%	66.7% #9DBFA9	RGB 157 191 169	#9DBFA9
83.3%	83.3% #AFC4B1	RGB 175 196 177	#AFC4B1
100.0%	100.0% #C4C9C3	RGB 196 201 195	#C4C9C3

#5A89AB #69A5B0 #7AB5AE #8BBAA8 #9DBFA9 #AFC4B1 #C4C9C3

#5A8AAB - #8BBAA8 - #C4C9C3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5A89AB 0%, #8BBAA8 50%, #C4C9C3 100%);
    background: -webkit-linear-gradient(top, #5A89AB 0%, #8BBAA8 50%, #C4C9C3 100%);
    background: linear-gradient(to bottom, #5A89AB 0%, #8BBAA8 50%, #C4C9C3 100%);
}
</style>