#396A8C - #888AE7 | 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 #396A8C to #888AE7

#396A8C #888AE7

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

#396A8C - #888AE7 | 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 #396A8C as 0% and #888AE7 as 100%.

0.0%	0.0% #396A8C	RGB 57 106 140	#396A8C
16.7%	16.7% #466F9B	RGB 70 111 155	#466F9B
33.3%	33.3% #5374AA	RGB 83 116 170	#5374AA
50.0%	50.0% #607AB9	RGB 96 122 185	#607AB9
66.7%	66.7% #6D7FC8	RGB 109 127 200	#6D7FC8
83.3%	83.3% #7A84D7	RGB 122 132 215	#7A84D7
100.0%	100.0% #888AE7	RGB 136 138 231	#888AE7

#396A8C #466F9B #5374AA #607AB9 #6D7FC8 #7A84D7 #888AE7

#396A8C - #888AE7

HSV Blend

#396A8C - #888AE7 | 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 #396A8C as 0% and #888AE7 as 100%.

0.0%	0.0% #396A8C	RGB 57 106 140	#396A8C
16.7%	16.7% #436F9B	RGB 67 111 155	#436F9B
33.3%	33.3% #4F73AA	RGB 79 115 170	#4F73AA
50.0%	50.0% #5C78B9	RGB 92 120 185	#5C78B9
66.7%	66.7% #697DC8	RGB 105 125 200	#697DC8
83.3%	83.3% #7883D7	RGB 120 131 215	#7883D7
100.0%	100.0% #888AE7	RGB 136 138 231	#888AE7

#396A8C #436F9B #4F73AA #5C78B9 #697DC8 #7883D7 #888AE7

#396A8C - #5C78B9 - #888AE7

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #396A8C 0%, #5C78B9 50%, #888AE7 100%);
    background: -webkit-linear-gradient(top, #396A8C 0%, #5C78B9 50%, #888AE7 100%);
    background: linear-gradient(to bottom, #396A8C 0%, #5C78B9 50%, #888AE7 100%);
}
</style>