#3BC9FF - #007EDB | 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 #3BC9FF to #007EDB

#3BC9FF #007EDB

Calculate the color between two colors, #3BC9FF and #007EDB. 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)

#3BC9FF - #007EDB | 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 #3BC9FF as 0% and #007EDB as 100%.

0.0%	0.0% #3BC9FF	RGB 59 201 255	#3BC9FF
16.7%	16.7% #31BCF9	RGB 49 188 249	#31BCF9
33.3%	33.3% #27B0F3	RGB 39 176 243	#27B0F3
50.0%	50.0% #1DA3ED	RGB 29 163 237	#1DA3ED
66.7%	66.7% #1397E7	RGB 19 151 231	#1397E7
83.3%	83.3% #098AE1	RGB 9 138 225	#098AE1
100.0%	100.0% #007EDB	RGB 0 126 219	#007EDB

#3BC9FF #31BCF9 #27B0F3 #1DA3ED #1397E7 #098AE1 #007EDB

#3BC9FF - #007EDB

HSV Blend

#3BC9FF - #007EDB | 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 #3BC9FF as 0% and #007EDB as 100%.

0.0%	0.0% #3BC9FF	RGB 59 201 255	#3BC9FF
16.7%	16.7% #30BCF9	RGB 48 188 249	#30BCF9
33.3%	33.3% #25B0F3	RGB 37 176 243	#25B0F3
50.0%	50.0% #1BA3ED	RGB 27 163 237	#1BA3ED
66.7%	66.7% #1197E7	RGB 17 151 231	#1197E7
83.3%	83.3% #088AE1	RGB 8 138 225	#088AE1
100.0%	100.0% #007EDB	RGB 0 126 219	#007EDB

#3BC9FF #30BCF9 #25B0F3 #1BA3ED #1197E7 #088AE1 #007EDB

#3BC9FF - #1BA3ED - #007EDB

CSS codes

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #3BC9FF 0%, #1BA3ED 50%, #007EDB 100%);
    background: -webkit-linear-gradient(top, #3BC9FF 0%, #1BA3ED 50%, #007EDB 100%);
    background: linear-gradient(to bottom, #3BC9FF 0%, #1BA3ED 50%, #007EDB 100%);
}
</style>