#3C788B - #C7D8DD | 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 #3C788B to #C7D8DD

#3C788B #C7D8DD

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

#3C788B - #C7D8DD | 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 #3C788B as 0% and #C7D8DD as 100%.

0.0%	0.0% #3C788B	RGB 60 120 139	#3C788B
16.7%	16.7% #538898	RGB 83 136 152	#538898
33.3%	33.3% #6A98A6	RGB 106 152 166	#6A98A6
50.0%	50.0% #81A8B4	RGB 129 168 180	#81A8B4
66.7%	66.7% #98B8C1	RGB 152 184 193	#98B8C1
83.3%	83.3% #AFC8CF	RGB 175 200 207	#AFC8CF
100.0%	100.0% #C7D8DD	RGB 199 216 221	#C7D8DD

#3C788B #538898 #6A98A6 #81A8B4 #98B8C1 #AFC8CF #C7D8DD

#3C788B - #C7D8DD

HSV Blend

#3C788B - #C7D8DD | 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 #3C788B as 0% and #C7D8DD as 100%.

0.0%	0.0% #3C788B	RGB 60 120 139	#3C788B
16.7%	16.7% #4D8698	RGB 77 134 152	#4D8698
33.3%	33.3% #6196A6	RGB 97 150 166	#6196A6
50.0%	50.0% #77A5B4	RGB 119 165 180	#77A5B4
66.7%	66.7% #90B6C1	RGB 144 182 193	#90B6C1
83.3%	83.3% #AAC6CF	RGB 170 198 207	#AAC6CF
100.0%	100.0% #C7D8DD	RGB 199 216 221	#C7D8DD

#3C788B #4D8698 #6196A6 #77A5B4 #90B6C1 #AAC6CF #C7D8DD

#3C788B - #77A5B4 - #C7D8DD

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3C788B 0%, #77A5B4 50%, #C7D8DD 100%);
    background: -webkit-linear-gradient(top, #3C788B 0%, #77A5B4 50%, #C7D8DD 100%);
    background: linear-gradient(to bottom, #3C788B 0%, #77A5B4 50%, #C7D8DD 100%);
}
</style>