#4B8CFF - #CBDDFF | 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 #4B8CFF to #CBDDFF

#4B8CFF #CBDDFF

Calculate the color between two colors, #4B8CFF and #CBDDFF. 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)

#4B8CFF - #CBDDFF | 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 #4B8CFF as 0% and #CBDDFF as 100%.

0.0%	0.0% #4B8CFF	RGB 75 140 255	#4B8CFF
16.7%	16.7% #6099FF	RGB 96 153 255	#6099FF
33.3%	33.3% #75A7FF	RGB 117 167 255	#75A7FF
50.0%	50.0% #8BB4FF	RGB 139 180 255	#8BB4FF
66.7%	66.7% #A0C2FF	RGB 160 194 255	#A0C2FF
83.3%	83.3% #B5CFFF	RGB 181 207 255	#B5CFFF
100.0%	100.0% #CBDDFF	RGB 203 221 255	#CBDDFF

#4B8CFF #6099FF #75A7FF #8BB4FF #A0C2FF #B5CFFF #CBDDFF

#4B8CFF - #CBDDFF

HSV Blend

#4B8CFF - #CBDDFF | 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 #4B8CFF as 0% and #CBDDFF as 100%.

0.0%	0.0% #4B8BFF	RGB 75 139 255	#4B8BFF
16.7%	16.7% #6099FF	RGB 96 153 255	#6099FF
33.3%	33.3% #75A6FF	RGB 117 166 255	#75A6FF
50.0%	50.0% #8BB4FF	RGB 139 180 255	#8BB4FF
66.7%	66.7% #A0C1FF	RGB 160 193 255	#A0C1FF
83.3%	83.3% #B5CFFF	RGB 181 207 255	#B5CFFF
100.0%	100.0% #CBDDFF	RGB 203 221 255	#CBDDFF

#4B8BFF #6099FF #75A6FF #8BB4FF #A0C1FF #B5CFFF #CBDDFF

#4B8CFF - #8BB4FF - #CBDDFF

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4B8BFF 0%, #8BB4FF 50%, #CBDDFF 100%);
    background: -webkit-linear-gradient(top, #4B8BFF 0%, #8BB4FF 50%, #CBDDFF 100%);
    background: linear-gradient(to bottom, #4B8BFF 0%, #8BB4FF 50%, #CBDDFF 100%);
}
</style>