#8FA5E4 - #3451A8 | 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 #8FA5E4 to #3451A8

#8FA5E4 #3451A8

Calculate the color between two colors, #8FA5E4 and #3451A8. 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)

#8FA5E4 - #3451A8 | 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 #8FA5E4 as 0% and #3451A8 as 100%.

0.0%	0.0% #8FA5E4	RGB 143 165 228	#8FA5E4
16.7%	16.7% #7F97DA	RGB 127 151 218	#7F97DA
33.3%	33.3% #7089D0	RGB 112 137 208	#7089D0
50.0%	50.0% #617BC6	RGB 97 123 198	#617BC6
66.7%	66.7% #526DBC	RGB 82 109 188	#526DBC
83.3%	83.3% #435FB2	RGB 67 95 178	#435FB2
100.0%	100.0% #3451A8	RGB 52 81 168	#3451A8

#8FA5E4 #7F97DA #7089D0 #617BC6 #526DBC #435FB2 #3451A8

#8FA5E4 - #3451A8

HSV Blend

#8FA5E4 - #3451A8 | 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 #8FA5E4 as 0% and #3451A8 as 100%.

0.0%	0.0% #8FA5E4	RGB 143 165 228	#8FA5E4
16.7%	16.7% #7D95DA	RGB 125 149 218	#7D95DA
33.3%	33.3% #6C85D0	RGB 108 133 208	#6C85D0
50.0%	50.0% #5C77C6	RGB 92 119 198	#5C77C6
66.7%	66.7% #4E69BC	RGB 78 105 188	#4E69BC
83.3%	83.3% #405DB2	RGB 64 93 178	#405DB2
100.0%	100.0% #3451A8	RGB 52 81 168	#3451A8

#8FA5E4 #7D95DA #6C85D0 #5C77C6 #4E69BC #405DB2 #3451A8

#8FA5E4 - #5C77C6 - #3451A8

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #8FA5E4 0%, #5C77C6 50%, #3451A8 100%);
    background: -webkit-linear-gradient(top, #8FA5E4 0%, #5C77C6 50%, #3451A8 100%);
    background: linear-gradient(to bottom, #8FA5E4 0%, #5C77C6 50%, #3451A8 100%);
}
</style>