#5E658C - #80CCE9 | 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 #5E658C to #80CCE9

#5E658C #80CCE9

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

#5E658C - #80CCE9 | 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 #5E658C as 0% and #80CCE9 as 100%.

0.0%	0.0% #5E658C	RGB 94 101 140	#5E658C
16.7%	16.7% #63769B	RGB 99 118 155	#63769B
33.3%	33.3% #6987AB	RGB 105 135 171	#6987AB
50.0%	50.0% #6F98BA	RGB 111 152 186	#6F98BA
66.7%	66.7% #74A9CA	RGB 116 169 202	#74A9CA
83.3%	83.3% #7ABAD9	RGB 122 186 217	#7ABAD9
100.0%	100.0% #80CCE9	RGB 128 204 233	#80CCE9

#5E658C #63769B #6987AB #6F98BA #74A9CA #7ABAD9 #80CCE9

#5E658C - #80CCE9

HSV Blend

#5E658C - #80CCE9 | 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 #5E658C as 0% and #80CCE9 as 100%.

0.0%	0.0% #5E658C	RGB 94 101 140	#5E658C
16.7%	16.7% #65729B	RGB 101 114 155	#65729B
33.3%	33.3% #6B81AB	RGB 107 129 171	#6B81AB
50.0%	50.0% #7191BA	RGB 113 145 186	#7191BA
66.7%	66.7% #77A3CA	RGB 119 163 202	#77A3CA
83.3%	83.3% #7BB6D9	RGB 123 182 217	#7BB6D9
100.0%	100.0% #80CCE9	RGB 128 204 233	#80CCE9

#5E658C #65729B #6B81AB #7191BA #77A3CA #7BB6D9 #80CCE9

#5E658C - #7191BA - #80CCE9

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5E658C 0%, #7191BA 50%, #80CCE9 100%);
    background: -webkit-linear-gradient(top, #5E658C 0%, #7191BA 50%, #80CCE9 100%);
    background: linear-gradient(to bottom, #5E658C 0%, #7191BA 50%, #80CCE9 100%);
}
</style>