#6B99D4 - #244A8F | 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 #6B99D4 to #244A8F

#6B99D4 #244A8F

Calculate the color between two colors, #6B99D4 and #244A8F. 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)

#6B99D4 - #244A8F | 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 #6B99D4 as 0% and #244A8F as 100%.

0.0%	0.0% #6B99D4	RGB 107 153 212	#6B99D4
16.7%	16.7% #5F8BC8	RGB 95 139 200	#5F8BC8
33.3%	33.3% #537EBD	RGB 83 126 189	#537EBD
50.0%	50.0% #4771B1	RGB 71 113 177	#4771B1
66.7%	66.7% #3B64A6	RGB 59 100 166	#3B64A6
83.3%	83.3% #2F579A	RGB 47 87 154	#2F579A
100.0%	100.0% #244A8F	RGB 36 74 143	#244A8F

#6B99D4 #5F8BC8 #537EBD #4771B1 #3B64A6 #2F579A #244A8F

#6B99D4 - #244A8F

HSV Blend

#6B99D4 - #244A8F | 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 #6B99D4 as 0% and #244A8F as 100%.

0.0%	0.0% #6B99D4	RGB 107 153 212	#6B99D4
16.7%	16.7% #5C8AC8	RGB 92 138 200	#5C8AC8
33.3%	33.3% #4F7CBD	RGB 79 124 189	#4F7CBD
50.0%	50.0% #436EB1	RGB 67 110 177	#436EB1
66.7%	66.7% #3761A6	RGB 55 97 166	#3761A6
83.3%	83.3% #2D559A	RGB 45 85 154	#2D559A
100.0%	100.0% #244A8F	RGB 36 74 143	#244A8F

#6B99D4 #5C8AC8 #4F7CBD #436EB1 #3761A6 #2D559A #244A8F

#6B99D4 - #436EB1 - #244A8F

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #6B99D4 0%, #436EB1 50%, #244A8F 100%);
    background: -webkit-linear-gradient(top, #6B99D4 0%, #436EB1 50%, #244A8F 100%);
    background: linear-gradient(to bottom, #6B99D4 0%, #436EB1 50%, #244A8F 100%);
}
</style>