#0055AF - #97DAE4 | 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 #0055AF to #97DAE4

#0055AF #97DAE4

Calculate the color between two colors, #0055AF and #97DAE4. 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)

#0055AF - #97DAE4 | 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 #0055AF as 0% and #97DAE4 as 100%.

0.0%	0.0% #0055AF	RGB 0 85 175	#0055AF
16.7%	16.7% #196BB7	RGB 25 107 183	#196BB7
33.3%	33.3% #3281C0	RGB 50 129 192	#3281C0
50.0%	50.0% #4B97C9	RGB 75 151 201	#4B97C9
66.7%	66.7% #64ADD2	RGB 100 173 210	#64ADD2
83.3%	83.3% #7DC3DB	RGB 125 195 219	#7DC3DB
100.0%	100.0% #97DAE4	RGB 151 218 228	#97DAE4

#0055AF #196BB7 #3281C0 #4B97C9 #64ADD2 #7DC3DB #97DAE4

#0055AF - #97DAE4

HSV Blend

#0055AF - #97DAE4 | 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 #0055AF as 0% and #97DAE4 as 100%.

0.0%	0.0% #0055AF	RGB 0 85 175	#0055AF
16.7%	16.7% #146EB7	RGB 20 110 183	#146EB7
33.3%	33.3% #2A86C0	RGB 42 134 192	#2A86C0
50.0%	50.0% #429EC9	RGB 66 158 201	#429EC9
66.7%	66.7% #5CB4D2	RGB 92 180 210	#5CB4D2
83.3%	83.3% #78C8DB	RGB 120 200 219	#78C8DB
100.0%	100.0% #97DAE4	RGB 151 218 228	#97DAE4

#0055AF #146EB7 #2A86C0 #429EC9 #5CB4D2 #78C8DB #97DAE4

#0055AF - #429EC9 - #97DAE4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #0055AF 0%, #429EC9 50%, #97DAE4 100%);
    background: -webkit-linear-gradient(top, #0055AF 0%, #429EC9 50%, #97DAE4 100%);
    background: linear-gradient(to bottom, #0055AF 0%, #429EC9 50%, #97DAE4 100%);
}
</style>