#2D9DDB - #418AFE | 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 #2D9DDB to #418AFE

#2D9DDB #418AFE

Calculate the color between two colors, #2D9DDB and #418AFE. 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)

#2D9DDB - #418AFE | 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 #2D9DDB as 0% and #418AFE as 100%.

0.0%	0.0% #2D9DDB	RGB 45 157 219	#2D9DDB
16.7%	16.7% #3099E0	RGB 48 153 224	#3099E0
33.3%	33.3% #3396E6	RGB 51 150 230	#3396E6
50.0%	50.0% #3793EC	RGB 55 147 236	#3793EC
66.7%	66.7% #3A90F2	RGB 58 144 242	#3A90F2
83.3%	83.3% #3D8DF8	RGB 61 141 248	#3D8DF8
100.0%	100.0% #418AFE	RGB 65 138 254	#418AFE

#2D9DDB #3099E0 #3396E6 #3793EC #3A90F2 #3D8DF8 #418AFE

#2D9DDB - #418AFE

HSV Blend

#2D9DDB - #418AFE | 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 #2D9DDB as 0% and #418AFE as 100%.

0.0%	0.0% #2D9DDB	RGB 45 157 219	#2D9DDB
16.7%	16.7% #309AE0	RGB 48 154 224	#309AE0
33.3%	33.3% #3397E6	RGB 51 151 230	#3397E6
50.0%	50.0% #3694EC	RGB 54 148 236	#3694EC
66.7%	66.7% #3990F2	RGB 57 144 242	#3990F2
83.3%	83.3% #3D8DF8	RGB 61 141 248	#3D8DF8
100.0%	100.0% #418AFE	RGB 65 138 254	#418AFE

#2D9DDB #309AE0 #3397E6 #3694EC #3990F2 #3D8DF8 #418AFE

#2D9DDB - #3694EC - #418AFE

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #2D9DDB 0%, #3694EC 50%, #418AFE 100%);
    background: -webkit-linear-gradient(top, #2D9DDB 0%, #3694EC 50%, #418AFE 100%);
    background: linear-gradient(to bottom, #2D9DDB 0%, #3694EC 50%, #418AFE 100%);
}
</style>