#102A39 - #BAC2C6 | 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 #102A39 to #BAC2C6

#102A39 #BAC2C6

Calculate the color between two colors, #102A39 and #BAC2C6. 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)

#102A39 - #BAC2C6 | 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 #102A39 as 0% and #BAC2C6 as 100%.

0.0%	0.0% #102A39	RGB 16 42 57	#102A39
16.7%	16.7% #2C4350	RGB 44 67 80	#2C4350
33.3%	33.3% #485C68	RGB 72 92 104	#485C68
50.0%	50.0% #65767F	RGB 101 118 127	#65767F
66.7%	66.7% #818F97	RGB 129 143 151	#818F97
83.3%	83.3% #9DA8AE	RGB 157 168 174	#9DA8AE
100.0%	100.0% #BAC2C6	RGB 186 194 198	#BAC2C6

#102A39 #2C4350 #485C68 #65767F #818F97 #9DA8AE #BAC2C6

#102A39 - #BAC2C6

HSV Blend

#102A39 - #BAC2C6 | 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 #102A39 as 0% and #BAC2C6 as 100%.

0.0%	0.0% #102A39	RGB 16 42 57	#102A39
16.7%	16.7% #1F3E50	RGB 31 62 80	#1F3E50
33.3%	33.3% #345568	RGB 52 85 104	#345568
50.0%	50.0% #4D6E7F	RGB 77 110 127	#4D6E7F
66.7%	66.7% #6C8897	RGB 108 136 151	#6C8897
83.3%	83.3% #90A4AE	RGB 144 164 174	#90A4AE
100.0%	100.0% #BAC2C6	RGB 186 194 198	#BAC2C6

#102A39 #1F3E50 #345568 #4D6E7F #6C8897 #90A4AE #BAC2C6

#102A39 - #4D6E7F - #BAC2C6

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #102A39 0%, #4D6E7F 50%, #BAC2C6 100%);
    background: -webkit-linear-gradient(top, #102A39 0%, #4D6E7F 50%, #BAC2C6 100%);
    background: linear-gradient(to bottom, #102A39 0%, #4D6E7F 50%, #BAC2C6 100%);
}
</style>