#3C3CC5 - #688DF3 | 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 #3C3CC5 to #688DF3

#3C3CC5 #688DF3

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

#3C3CC5 - #688DF3 | 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 #3C3CC5 as 0% and #688DF3 as 100%.

0.0%	0.0% #3C3CC5	RGB 60 60 197	#3C3CC5
16.7%	16.7% #4349CC	RGB 67 73 204	#4349CC
33.3%	33.3% #4A57D4	RGB 74 87 212	#4A57D4
50.0%	50.0% #5264DC	RGB 82 100 220	#5264DC
66.7%	66.7% #5972E3	RGB 89 114 227	#5972E3
83.3%	83.3% #607FEB	RGB 96 127 235	#607FEB
100.0%	100.0% #688DF3	RGB 104 141 243	#688DF3

#3C3CC5 #4349CC #4A57D4 #5264DC #5972E3 #607FEB #688DF3

#3C3CC5 - #688DF3

HSV Blend

#3C3CC5 - #688DF3 | 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 #3C3CC5 as 0% and #688DF3 as 100%.

0.0%	0.0% #3C3CC5	RGB 60 60 197	#3C3CC5
16.7%	16.7% #4248CC	RGB 66 72 204	#4248CC
33.3%	33.3% #4955D4	RGB 73 85 212	#4955D4
50.0%	50.0% #5063DC	RGB 80 99 220	#5063DC
66.7%	66.7% #5870E3	RGB 88 112 227	#5870E3
83.3%	83.3% #5F7EEB	RGB 95 126 235	#5F7EEB
100.0%	100.0% #688DF3	RGB 104 141 243	#688DF3

#3C3CC5 #4248CC #4955D4 #5063DC #5870E3 #5F7EEB #688DF3

#3C3CC5 - #5063DC - #688DF3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3C3CC5 0%, #5063DC 50%, #688DF3 100%);
    background: -webkit-linear-gradient(top, #3C3CC5 0%, #5063DC 50%, #688DF3 100%);
    background: linear-gradient(to bottom, #3C3CC5 0%, #5063DC 50%, #688DF3 100%);
}
</style>