#7BBCFF - #0066CD | 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 #7BBCFF to #0066CD

#7BBCFF #0066CD

Calculate the color between two colors, #7BBCFF and #0066CD. 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)

#7BBCFF - #0066CD | 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 #7BBCFF as 0% and #0066CD as 100%.

0.0%	0.0% #7BBCFF	RGB 123 188 255	#7BBCFF
16.7%	16.7% #66ADF6	RGB 102 173 246	#66ADF6
33.3%	33.3% #529FEE	RGB 82 159 238	#529FEE
50.0%	50.0% #3D91E6	RGB 61 145 230	#3D91E6
66.7%	66.7% #2982DD	RGB 41 130 221	#2982DD
83.3%	83.3% #1474D5	RGB 20 116 213	#1474D5
100.0%	100.0% #0066CD	RGB 0 102 205	#0066CD

#7BBCFF #66ADF6 #529FEE #3D91E6 #2982DD #1474D5 #0066CD

#7BBCFF - #0066CD

HSV Blend

#7BBCFF - #0066CD | 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 #7BBCFF as 0% and #0066CD as 100%.

0.0%	0.0% #7BBBFF	RGB 123 187 255	#7BBBFF
16.7%	16.7% #63ABF6	RGB 99 171 246	#63ABF6
33.3%	33.3% #4C9CEE	RGB 76 156 238	#4C9CEE
50.0%	50.0% #378DE6	RGB 55 141 230	#378DE6
66.7%	66.7% #237FDD	RGB 35 127 221	#237FDD
83.3%	83.3% #1172D5	RGB 17 114 213	#1172D5
100.0%	100.0% #0066CD	RGB 0 102 205	#0066CD

#7BBBFF #63ABF6 #4C9CEE #378DE6 #237FDD #1172D5 #0066CD

#7BBCFF - #378DE6 - #0066CD

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #7BBBFF 0%, #378DE6 50%, #0066CD 100%);
    background: -webkit-linear-gradient(top, #7BBBFF 0%, #378DE6 50%, #0066CD 100%);
    background: linear-gradient(to bottom, #7BBBFF 0%, #378DE6 50%, #0066CD 100%);
}
</style>