#3C3C9C - #7686C8 | 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 #3C3C9C to #7686C8

#3C3C9C #7686C8

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

#3C3C9C - #7686C8 | 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 #3C3C9C as 0% and #7686C8 as 100%.

0.0%	0.0% #3C3C9C	RGB 60 60 156	#3C3C9C
16.7%	16.7% #4548A3	RGB 69 72 163	#4548A3
33.3%	33.3% #4F54AA	RGB 79 84 170	#4F54AA
50.0%	50.0% #5961B2	RGB 89 97 178	#5961B2
66.7%	66.7% #626DB9	RGB 98 109 185	#626DB9
83.3%	83.3% #6C79C0	RGB 108 121 192	#6C79C0
100.0%	100.0% #7686C8	RGB 118 134 200	#7686C8

#3C3C9C #4548A3 #4F54AA #5961B2 #626DB9 #6C79C0 #7686C8

#3C3C9C - #7686C8

HSV Blend

#3C3C9C - #7686C8 | 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 #3C3C9C as 0% and #7686C8 as 100%.

0.0%	0.0% #3C3C9C	RGB 60 60 156	#3C3C9C
16.7%	16.7% #4447A3	RGB 68 71 163	#4447A3
33.3%	33.3% #4D53AA	RGB 77 83 170	#4D53AA
50.0%	50.0% #565FB2	RGB 86 95 178	#565FB2
66.7%	66.7% #606CB9	RGB 96 108 185	#606CB9
83.3%	83.3% #6B78C0	RGB 107 120 192	#6B78C0
100.0%	100.0% #7686C8	RGB 118 134 200	#7686C8

#3C3C9C #4447A3 #4D53AA #565FB2 #606CB9 #6B78C0 #7686C8

#3C3C9C - #565FB2 - #7686C8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3C3C9C 0%, #565FB2 50%, #7686C8 100%);
    background: -webkit-linear-gradient(top, #3C3C9C 0%, #565FB2 50%, #7686C8 100%);
    background: linear-gradient(to bottom, #3C3C9C 0%, #565FB2 50%, #7686C8 100%);
}
</style>