#678DF2 - #1B38B5 | 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 #678DF2 to #1B38B5

#678DF2 #1B38B5

Calculate the color between two colors, #678DF2 and #1B38B5. 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)

#678DF2 - #1B38B5 | 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 #678DF2 as 0% and #1B38B5 as 100%.

0.0%	0.0% #678DF2	RGB 103 141 242	#678DF2
16.7%	16.7% #5A7EE7	RGB 90 126 231	#5A7EE7
33.3%	33.3% #4D70DD	RGB 77 112 221	#4D70DD
50.0%	50.0% #4162D3	RGB 65 98 211	#4162D3
66.7%	66.7% #3454C9	RGB 52 84 201	#3454C9
83.3%	83.3% #2746BF	RGB 39 70 191	#2746BF
100.0%	100.0% #1B38B5	RGB 27 56 181	#1B38B5

#678DF2 #5A7EE7 #4D70DD #4162D3 #3454C9 #2746BF #1B38B5

#678DF2 - #1B38B5

HSV Blend

#678DF2 - #1B38B5 | 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 #678DF2 as 0% and #1B38B5 as 100%.

0.0%	0.0% #678DF2	RGB 103 141 242	#678DF2
16.7%	16.7% #577DE7	RGB 87 125 231	#577DE7
33.3%	33.3% #496EDD	RGB 73 110 221	#496EDD
50.0%	50.0% #3C5FD3	RGB 60 95 211	#3C5FD3
66.7%	66.7% #3051C9	RGB 48 81 201	#3051C9
83.3%	83.3% #2544BF	RGB 37 68 191	#2544BF
100.0%	100.0% #1B38B5	RGB 27 56 181	#1B38B5

#678DF2 #577DE7 #496EDD #3C5FD3 #3051C9 #2544BF #1B38B5

#678DF2 - #3C5FD3 - #1B38B5

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #678DF2 0%, #3C5FD3 50%, #1B38B5 100%);
    background: -webkit-linear-gradient(top, #678DF2 0%, #3C5FD3 50%, #1B38B5 100%);
    background: linear-gradient(to bottom, #678DF2 0%, #3C5FD3 50%, #1B38B5 100%);
}
</style>