#697B5E - #DEF378 | 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 #697B5E to #DEF378

#697B5E #DEF378

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

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

0.0%	0.0% #697B5E	RGB 105 123 94	#697B5E
16.7%	16.7% #7C8F62	RGB 124 143 98	#7C8F62
33.3%	33.3% #90A366	RGB 144 163 102	#90A366
50.0%	50.0% #A3B76B	RGB 163 183 107	#A3B76B
66.7%	66.7% #B7CB6F	RGB 183 203 111	#B7CB6F
83.3%	83.3% #CADF73	RGB 202 223 115	#CADF73
100.0%	100.0% #DEF378	RGB 222 243 120	#DEF378

#697B5E #7C8F62 #90A366 #A3B76B #B7CB6F #CADF73 #DEF378

#697B5E - #DEF378

HSV Blend

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

0.0%	0.0% #697B5E	RGB 105 123 94	#697B5E
16.7%	16.7% #798F66	RGB 121 143 102	#798F66
33.3%	33.3% #89A36D	RGB 137 163 109	#89A36D
50.0%	50.0% #9CB773	RGB 156 183 115	#9CB773
66.7%	66.7% #AFCB76	RGB 175 203 118	#AFCB76
83.3%	83.3% #C5DF78	RGB 197 223 120	#C5DF78
100.0%	100.0% #DEF378	RGB 222 243 120	#DEF378

#697B5E #798F66 #89A36D #9CB773 #AFCB76 #C5DF78 #DEF378

#697B5E - #9CB773 - #DEF378

CSS codes

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

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