#697DFF - #D4D9FF | 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 #697DFF to #D4D9FF

#697DFF #D4D9FF

Calculate the color between two colors, #697DFF and #D4D9FF. 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)

#697DFF - #D4D9FF | 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 #697DFF as 0% and #D4D9FF as 100%.

0.0%	0.0% #697DFF	RGB 105 125 255	#697DFF
16.7%	16.7% #7A8CFF	RGB 122 140 255	#7A8CFF
33.3%	33.3% #8C9BFF	RGB 140 155 255	#8C9BFF
50.0%	50.0% #9EABFF	RGB 158 171 255	#9EABFF
66.7%	66.7% #B0BAFF	RGB 176 186 255	#B0BAFF
83.3%	83.3% #C2C9FF	RGB 194 201 255	#C2C9FF
100.0%	100.0% #D4D9FF	RGB 212 217 255	#D4D9FF

#697DFF #7A8CFF #8C9BFF #9EABFF #B0BAFF #C2C9FF #D4D9FF

#697DFF - #D4D9FF

HSV Blend

#697DFF - #D4D9FF | 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 #697DFF as 0% and #D4D9FF as 100%.

0.0%	0.0% #697CFF	RGB 105 124 255	#697CFF
16.7%	16.7% #7A8CFF	RGB 122 140 255	#7A8CFF
33.3%	33.3% #8C9BFF	RGB 140 155 255	#8C9BFF
50.0%	50.0% #9EAAFF	RGB 158 170 255	#9EAAFF
66.7%	66.7% #B0B9FF	RGB 176 185 255	#B0B9FF
83.3%	83.3% #C2C9FF	RGB 194 201 255	#C2C9FF
100.0%	100.0% #D4D9FF	RGB 212 217 255	#D4D9FF

#697CFF #7A8CFF #8C9BFF #9EAAFF #B0B9FF #C2C9FF #D4D9FF

#697DFF - #9EAAFF - #D4D9FF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #697CFF 0%, #9EAAFF 50%, #D4D9FF 100%);
    background: -webkit-linear-gradient(top, #697CFF 0%, #9EAAFF 50%, #D4D9FF 100%);
    background: linear-gradient(to bottom, #697CFF 0%, #9EAAFF 50%, #D4D9FF 100%);
}
</style>