#5E80D6 - #D1DAF3 | 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 #5E80D6 to #D1DAF3

#5E80D6 #D1DAF3

Calculate the color between two colors, #5E80D6 and #D1DAF3. 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)

#5E80D6 - #D1DAF3 | 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 #5E80D6 as 0% and #D1DAF3 as 100%.

0.0%	0.0% #5E80D6	RGB 94 128 214	#5E80D6
16.7%	16.7% #718FDA	RGB 113 143 218	#718FDA
33.3%	33.3% #849EDF	RGB 132 158 223	#849EDF
50.0%	50.0% #97ADE4	RGB 151 173 228	#97ADE4
66.7%	66.7% #AABCE9	RGB 170 188 233	#AABCE9
83.3%	83.3% #BDCBEE	RGB 189 203 238	#BDCBEE
100.0%	100.0% #D1DAF3	RGB 209 218 243	#D1DAF3

#5E80D6 #718FDA #849EDF #97ADE4 #AABCE9 #BDCBEE #D1DAF3

#5E80D6 - #D1DAF3

HSV Blend

#5E80D6 - #D1DAF3 | 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 #5E80D6 as 0% and #D1DAF3 as 100%.

0.0%	0.0% #5E80D6	RGB 94 128 214	#5E80D6
16.7%	16.7% #6F8DDA	RGB 111 141 218	#6F8DDA
33.3%	33.3% #819BDF	RGB 129 155 223	#819BDF
50.0%	50.0% #94AAE4	RGB 148 170 228	#94AAE4
66.7%	66.7% #A7B9E9	RGB 167 185 233	#A7B9E9
83.3%	83.3% #BCC9EE	RGB 188 201 238	#BCC9EE
100.0%	100.0% #D1DAF3	RGB 209 218 243	#D1DAF3

#5E80D6 #6F8DDA #819BDF #94AAE4 #A7B9E9 #BCC9EE #D1DAF3

#5E80D6 - #94AAE4 - #D1DAF3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5E80D6 0%, #94AAE4 50%, #D1DAF3 100%);
    background: -webkit-linear-gradient(top, #5E80D6 0%, #94AAE4 50%, #D1DAF3 100%);
    background: linear-gradient(to bottom, #5E80D6 0%, #94AAE4 50%, #D1DAF3 100%);
}
</style>