#3C686D - #5DC7DB | 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 #3C686D to #5DC7DB

#3C686D #5DC7DB

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

#3C686D - #5DC7DB | 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 #3C686D as 0% and #5DC7DB as 100%.

0.0%	0.0% #3C686D	RGB 60 104 109	#3C686D
16.7%	16.7% #41777F	RGB 65 119 127	#41777F
33.3%	33.3% #478791	RGB 71 135 145	#478791
50.0%	50.0% #4C97A4	RGB 76 151 164	#4C97A4
66.7%	66.7% #52A7B6	RGB 82 167 182	#52A7B6
83.3%	83.3% #57B7C8	RGB 87 183 200	#57B7C8
100.0%	100.0% #5DC7DB	RGB 93 199 219	#5DC7DB

#3C686D #41777F #478791 #4C97A4 #52A7B6 #57B7C8 #5DC7DB

#3C686D - #5DC7DB

HSV Blend

#3C686D - #5DC7DB | 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 #3C686D as 0% and #5DC7DB as 100%.

0.0%	0.0% #3C686D	RGB 60 104 109	#3C686D
16.7%	16.7% #43787F	RGB 67 120 127	#43787F
33.3%	33.3% #4A8991	RGB 74 137 145	#4A8991
50.0%	50.0% #4F99A4	RGB 79 153 164	#4F99A4
66.7%	66.7% #55A8B6	RGB 85 168 182	#55A8B6
83.3%	83.3% #59B8C8	RGB 89 184 200	#59B8C8
100.0%	100.0% #5DC7DB	RGB 93 199 219	#5DC7DB

#3C686D #43787F #4A8991 #4F99A4 #55A8B6 #59B8C8 #5DC7DB

#3C686D - #4F99A4 - #5DC7DB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3C686D 0%, #4F99A4 50%, #5DC7DB 100%);
    background: -webkit-linear-gradient(top, #3C686D 0%, #4F99A4 50%, #5DC7DB 100%);
    background: linear-gradient(to bottom, #3C686D 0%, #4F99A4 50%, #5DC7DB 100%);
}
</style>