#2D6CA1 - #74B4D0 | 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 #2D6CA1 to #74B4D0

#2D6CA1 #74B4D0

Calculate the color between two colors, #2D6CA1 and #74B4D0. 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)

#2D6CA1 - #74B4D0 | 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 #2D6CA1 as 0% and #74B4D0 as 100%.

0.0%	0.0% #2D6CA1	RGB 45 108 161	#2D6CA1
16.7%	16.7% #3878A8	RGB 56 120 168	#3878A8
33.3%	33.3% #4484B0	RGB 68 132 176	#4484B0
50.0%	50.0% #5090B8	RGB 80 144 184	#5090B8
66.7%	66.7% #5C9CC0	RGB 92 156 192	#5C9CC0
83.3%	83.3% #68A8C8	RGB 104 168 200	#68A8C8
100.0%	100.0% #74B4D0	RGB 116 180 208	#74B4D0

#2D6CA1 #3878A8 #4484B0 #5090B8 #5C9CC0 #68A8C8 #74B4D0

#2D6CA1 - #74B4D0

HSV Blend

#2D6CA1 - #74B4D0 | 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 #2D6CA1 as 0% and #74B4D0 as 100%.

0.0%	0.0% #2D6CA1	RGB 45 108 161	#2D6CA1
16.7%	16.7% #3777A8	RGB 55 119 168	#3777A8
33.3%	33.3% #4183B0	RGB 65 131 176	#4183B0
50.0%	50.0% #4D8FB8	RGB 77 143 184	#4D8FB8
66.7%	66.7% #599BC0	RGB 89 155 192	#599BC0
83.3%	83.3% #66A7C8	RGB 102 167 200	#66A7C8
100.0%	100.0% #74B4D0	RGB 116 180 208	#74B4D0

#2D6CA1 #3777A8 #4183B0 #4D8FB8 #599BC0 #66A7C8 #74B4D0

#2D6CA1 - #4D8FB8 - #74B4D0

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #2D6CA1 0%, #4D8FB8 50%, #74B4D0 100%);
    background: -webkit-linear-gradient(top, #2D6CA1 0%, #4D8FB8 50%, #74B4D0 100%);
    background: linear-gradient(to bottom, #2D6CA1 0%, #4D8FB8 50%, #74B4D0 100%);
}
</style>