#BBC2DD - #5C74A2 | 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 #BBC2DD to #5C74A2

#BBC2DD #5C74A2

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

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

0.0%	0.0% #BBC2DD	RGB 187 194 221	#BBC2DD
16.7%	16.7% #ABB5D3	RGB 171 181 211	#ABB5D3
33.3%	33.3% #9BA8C9	RGB 155 168 201	#9BA8C9
50.0%	50.0% #8B9BBF	RGB 139 155 191	#8B9BBF
66.7%	66.7% #7B8EB5	RGB 123 142 181	#7B8EB5
83.3%	83.3% #6B81AB	RGB 107 129 171	#6B81AB
100.0%	100.0% #5C74A2	RGB 92 116 162	#5C74A2

#BBC2DD #ABB5D3 #9BA8C9 #8B9BBF #7B8EB5 #6B81AB #5C74A2

#BBC2DD - #5C74A2

HSV Blend

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

0.0%	0.0% #BBC2DD	RGB 187 194 221	#BBC2DD
16.7%	16.7% #A8B2D3	RGB 168 178 211	#A8B2D3
33.3%	33.3% #97A4C9	RGB 151 164 201	#97A4C9
50.0%	50.0% #8796BF	RGB 135 150 191	#8796BF
66.7%	66.7% #788AB5	RGB 120 138 181	#788AB5
83.3%	83.3% #697EAB	RGB 105 126 171	#697EAB
100.0%	100.0% #5C74A2	RGB 92 116 162	#5C74A2

#BBC2DD #A8B2D3 #97A4C9 #8796BF #788AB5 #697EAB #5C74A2

#BBC2DD - #8796BF - #5C74A2

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #BBC2DD 0%, #8796BF 50%, #5C74A2 100%);
    background: -webkit-linear-gradient(top, #BBC2DD 0%, #8796BF 50%, #5C74A2 100%);
    background: linear-gradient(to bottom, #BBC2DD 0%, #8796BF 50%, #5C74A2 100%);
}
</style>