#5A8DA1 - #CCCBBC | 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 #5A8DA1 to #CCCBBC

#5A8DA1 #CCCBBC

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

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

0.0%	0.0% #5A8DA1	RGB 90 141 161	#5A8DA1
16.7%	16.7% #6D97A5	RGB 109 151 165	#6D97A5
33.3%	33.3% #80A1AA	RGB 128 161 170	#80A1AA
50.0%	50.0% #93ACAE	RGB 147 172 174	#93ACAE
66.7%	66.7% #A6B6B3	RGB 166 182 179	#A6B6B3
83.3%	83.3% #B9C0B7	RGB 185 192 183	#B9C0B7
100.0%	100.0% #CCCBBC	RGB 204 203 188	#CCCBBC

#5A8DA1 #6D97A5 #80A1AA #93ACAE #A6B6B3 #B9C0B7 #CCCBBC

#5A8DA1 - #CCCBBC

HSV Blend

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

0.0%	0.0% #5A8CA1	RGB 90 140 161	#5A8CA1
16.7%	16.7% #68A8A1	RGB 104 168 161	#68A8A1
33.3%	33.3% #77AF93	RGB 119 175 147	#77AF93
50.0%	50.0% #87B68C	RGB 135 182 140	#87B68C
66.7%	66.7% #A2BD97	RGB 162 189 151	#A2BD97
83.3%	83.3% #BBC4A9	RGB 187 196 169	#BBC4A9
100.0%	100.0% #CCCBBC	RGB 204 203 188	#CCCBBC

#5A8CA1 #68A8A1 #77AF93 #87B68C #A2BD97 #BBC4A9 #CCCBBC

#5A8DA1 - #87B68C - #CCCBBC

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5A8CA1 0%, #87B68C 50%, #CCCBBC 100%);
    background: -webkit-linear-gradient(top, #5A8CA1 0%, #87B68C 50%, #CCCBBC 100%);
    background: linear-gradient(to bottom, #5A8CA1 0%, #87B68C 50%, #CCCBBC 100%);
}
</style>