#697BAE - #BABBC3 | 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 #697BAE to #BABBC3

#697BAE #BABBC3

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

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

0.0%	0.0% #697BAE	RGB 105 123 174	#697BAE
16.7%	16.7% #7685B1	RGB 118 133 177	#7685B1
33.3%	33.3% #8490B5	RGB 132 144 181	#8490B5
50.0%	50.0% #919BB8	RGB 145 155 184	#919BB8
66.7%	66.7% #9FA5BC	RGB 159 165 188	#9FA5BC
83.3%	83.3% #ACB0BF	RGB 172 176 191	#ACB0BF
100.0%	100.0% #BABBC3	RGB 186 187 195	#BABBC3

#697BAE #7685B1 #8490B5 #919BB8 #9FA5BC #ACB0BF #BABBC3

#697BAE - #BABBC3

HSV Blend

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

0.0%	0.0% #697BAE	RGB 105 123 174	#697BAE
16.7%	16.7% #7583B1	RGB 117 131 177	#7583B1
33.3%	33.3% #828DB5	RGB 130 141 181	#828DB5
50.0%	50.0% #8F97B8	RGB 143 151 184	#8F97B8
66.7%	66.7% #9DA2BC	RGB 157 162 188	#9DA2BC
83.3%	83.3% #ABAEBF	RGB 171 174 191	#ABAEBF
100.0%	100.0% #BABBC3	RGB 186 187 195	#BABBC3

#697BAE #7583B1 #828DB5 #8F97B8 #9DA2BC #ABAEBF #BABBC3

#697BAE - #8F97B8 - #BABBC3

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #697BAE 0%, #8F97B8 50%, #BABBC3 100%);
    background: -webkit-linear-gradient(top, #697BAE 0%, #8F97B8 50%, #BABBC3 100%);
    background: linear-gradient(to bottom, #697BAE 0%, #8F97B8 50%, #BABBC3 100%);
}
</style>