#507A8C - #CDD8DE | 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 #507A8C to #CDD8DE

#507A8C #CDD8DE

Calculate the color between two colors, #507A8C and #CDD8DE. 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)

#507A8C - #CDD8DE | 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 #507A8C as 0% and #CDD8DE as 100%.

0.0%	0.0% #507A8C	RGB 80 122 140	#507A8C
16.7%	16.7% #648999	RGB 100 137 153	#648999
33.3%	33.3% #7999A7	RGB 121 153 167	#7999A7
50.0%	50.0% #8EA9B5	RGB 142 169 181	#8EA9B5
66.7%	66.7% #A3B8C2	RGB 163 184 194	#A3B8C2
83.3%	83.3% #B8C8D0	RGB 184 200 208	#B8C8D0
100.0%	100.0% #CDD8DE	RGB 205 216 222	#CDD8DE

#507A8C #648999 #7999A7 #8EA9B5 #A3B8C2 #B8C8D0 #CDD8DE

#507A8C - #CDD8DE

HSV Blend

#507A8C - #CDD8DE | 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 #507A8C as 0% and #CDD8DE as 100%.

0.0%	0.0% #507A8C	RGB 80 122 140	#507A8C
16.7%	16.7% #608899	RGB 96 136 153	#608899
33.3%	33.3% #7396A7	RGB 115 150 167	#7396A7
50.0%	50.0% #87A6B5	RGB 135 166 181	#87A6B5
66.7%	66.7% #9CB6C2	RGB 156 182 194	#9CB6C2
83.3%	83.3% #B4C6D0	RGB 180 198 208	#B4C6D0
100.0%	100.0% #CDD8DE	RGB 205 216 222	#CDD8DE

#507A8C #608899 #7396A7 #87A6B5 #9CB6C2 #B4C6D0 #CDD8DE

#507A8C - #87A6B5 - #CDD8DE

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #507A8C 0%, #87A6B5 50%, #CDD8DE 100%);
    background: -webkit-linear-gradient(top, #507A8C 0%, #87A6B5 50%, #CDD8DE 100%);
    background: linear-gradient(to bottom, #507A8C 0%, #87A6B5 50%, #CDD8DE 100%);
}
</style>