#84D5E6 - #318CB5 | 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 #84D5E6 to #318CB5

#84D5E6 #318CB5

Calculate the color between two colors, #84D5E6 and #318CB5. 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)

#84D5E6 - #318CB5 | 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 #84D5E6 as 0% and #318CB5 as 100%.

0.0%	0.0% #84D5E6	RGB 132 213 230	#84D5E6
16.7%	16.7% #76C8DD	RGB 118 200 221	#76C8DD
33.3%	33.3% #68BCD5	RGB 104 188 213	#68BCD5
50.0%	50.0% #5AB0CD	RGB 90 176 205	#5AB0CD
66.7%	66.7% #4CA4C5	RGB 76 164 197	#4CA4C5
83.3%	83.3% #3E98BD	RGB 62 152 189	#3E98BD
100.0%	100.0% #318CB5	RGB 49 140 181	#318CB5

#84D5E6 #76C8DD #68BCD5 #5AB0CD #4CA4C5 #3E98BD #318CB5

#84D5E6 - #318CB5

HSV Blend

#84D5E6 - #318CB5 | 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 #84D5E6 as 0% and #318CB5 as 100%.

0.0%	0.0% #84D5E6	RGB 132 213 230	#84D5E6
16.7%	16.7% #74C9DD	RGB 116 201 221	#74C9DD
33.3%	33.3% #65BCD5	RGB 101 188 213	#65BCD5
50.0%	50.0% #56B0CD	RGB 86 176 205	#56B0CD
66.7%	66.7% #49A4C5	RGB 73 164 197	#49A4C5
83.3%	83.3% #3C98BD	RGB 60 152 189	#3C98BD
100.0%	100.0% #318CB5	RGB 49 140 181	#318CB5

#84D5E6 #74C9DD #65BCD5 #56B0CD #49A4C5 #3C98BD #318CB5

#84D5E6 - #56B0CD - #318CB5

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #84D5E6 0%, #56B0CD 50%, #318CB5 100%);
    background: -webkit-linear-gradient(top, #84D5E6 0%, #56B0CD 50%, #318CB5 100%);
    background: linear-gradient(to bottom, #84D5E6 0%, #56B0CD 50%, #318CB5 100%);
}
</style>