#3C5A6D - #5DA2DB | 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 #3C5A6D to #5DA2DB

#3C5A6D #5DA2DB

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

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

0.0%	0.0% #3C5A6D	RGB 60 90 109	#3C5A6D
16.7%	16.7% #41667F	RGB 65 102 127	#41667F
33.3%	33.3% #477291	RGB 71 114 145	#477291
50.0%	50.0% #4C7EA4	RGB 76 126 164	#4C7EA4
66.7%	66.7% #528AB6	RGB 82 138 182	#528AB6
83.3%	83.3% #5796C8	RGB 87 150 200	#5796C8
100.0%	100.0% #5DA2DB	RGB 93 162 219	#5DA2DB

#3C5A6D #41667F #477291 #4C7EA4 #528AB6 #5796C8 #5DA2DB

#3C5A6D - #5DA2DB

HSV Blend

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

0.0%	0.0% #3C5A6D	RGB 60 90 109	#3C5A6D
16.7%	16.7% #43677F	RGB 67 103 127	#43677F
33.3%	33.3% #4A7491	RGB 74 116 145	#4A7491
50.0%	50.0% #4F80A4	RGB 79 128 164	#4F80A4
66.7%	66.7% #558CB6	RGB 85 140 182	#558CB6
83.3%	83.3% #5997C8	RGB 89 151 200	#5997C8
100.0%	100.0% #5DA2DB	RGB 93 162 219	#5DA2DB

#3C5A6D #43677F #4A7491 #4F80A4 #558CB6 #5997C8 #5DA2DB

#3C5A6D - #4F80A4 - #5DA2DB

CSS codes

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

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