#5A6AA1 - #CFD3E4 | 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 #5A6AA1 to #CFD3E4

#5A6AA1 #CFD3E4

Calculate the color between two colors, #5A6AA1 and #CFD3E4. 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)

#5A6AA1 - #CFD3E4 | 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 #5A6AA1 as 0% and #CFD3E4 as 100%.

0.0%	0.0% #5A6AA1	RGB 90 106 161	#5A6AA1
16.7%	16.7% #6D7BAC	RGB 109 123 172	#6D7BAC
33.3%	33.3% #818DB7	RGB 129 141 183	#818DB7
50.0%	50.0% #949EC2	RGB 148 158 194	#949EC2
66.7%	66.7% #A8B0CD	RGB 168 176 205	#A8B0CD
83.3%	83.3% #BBC1D8	RGB 187 193 216	#BBC1D8
100.0%	100.0% #CFD3E4	RGB 207 211 228	#CFD3E4

#5A6AA1 #6D7BAC #818DB7 #949EC2 #A8B0CD #BBC1D8 #CFD3E4

#5A6AA1 - #CFD3E4

HSV Blend

#5A6AA1 - #CFD3E4 | 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 #5A6AA1 as 0% and #CFD3E4 as 100%.

0.0%	0.0% #5A6AA1	RGB 90 106 161	#5A6AA1
16.7%	16.7% #6A78AC	RGB 106 120 172	#6A78AC
33.3%	33.3% #7B88B7	RGB 123 136 183	#7B88B7
50.0%	50.0% #8E99C2	RGB 142 153 194	#8E99C2
66.7%	66.7% #A2ABCD	RGB 162 171 205	#A2ABCD
83.3%	83.3% #B8BED8	RGB 184 190 216	#B8BED8
100.0%	100.0% #CFD3E4	RGB 207 211 228	#CFD3E4

#5A6AA1 #6A78AC #7B88B7 #8E99C2 #A2ABCD #B8BED8 #CFD3E4

#5A6AA1 - #8E99C2 - #CFD3E4

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #5A6AA1 0%, #8E99C2 50%, #CFD3E4 100%);
    background: -webkit-linear-gradient(top, #5A6AA1 0%, #8E99C2 50%, #CFD3E4 100%);
    background: linear-gradient(to bottom, #5A6AA1 0%, #8E99C2 50%, #CFD3E4 100%);
}
</style>