#277FA6 - #ABE6B7 | colorate

colorate es una herramienta de esquema de color para diseñadores y desarrolladores. Esta ayudará a inspirarse y servirá de recurso para su trabajo de color. Haz que este sitio sea mejor

Mezcla #277FA6 a #ABE6B7

#277FA6 #ABE6B7

Calcule el color entre dos colores, #277FA6 y #ABE6B7. En el cálculo de los valores RGB, la saturación entre los colores diferentes es baja. Al calcular los valores de HSV, la saturación entre los diferentes colores no es baja.

Mezcla RGB (Linear)

#277FA6 - #ABE6B7 | colorate

Cálculo del color entre dos colores según el valor RGB. Para colores que están distantes entre sí, la saturación entre los dos colores disminuye. Expande el color entre dos colores con #277FA6 como 0% y #ABE6B7 como 100%.

0.0%	0.0% #277FA6	RGB 39 127 166	#277FA6
16.7%	16.7% #3D90A8	RGB 61 144 168	#3D90A8
33.3%	33.3% #53A1AB	RGB 83 161 171	#53A1AB
50.0%	50.0% #69B2AE	RGB 105 178 174	#69B2AE
66.7%	66.7% #7FC3B1	RGB 127 195 177	#7FC3B1
83.3%	83.3% #95D4B4	RGB 149 212 180	#95D4B4
100.0%	100.0% #ABE6B7	RGB 171 230 183	#ABE6B7

#277FA6 #3D90A8 #53A1AB #69B2AE #7FC3B1 #95D4B4 #ABE6B7

#277FA6 - #ABE6B7

Mezcla HSV

#277FA6 - #ABE6B7 | colorate

Cálculo del color entre dos colores según el valor de HSV. Incluso entre distintos colores de color, la saturación entre los dos colores no disminuye. Expande el color entre dos colores con #277FA6 como 0% y #ABE6B7 como 100%.

0.0%	0.0% #277FA6	RGB 39 127 166	#277FA6
16.7%	16.7% #38A1B0	RGB 56 161 176	#38A1B0
33.3%	33.3% #4BBBB4	RGB 75 187 180	#4BBBB4
50.0%	50.0% #60C6AD	RGB 96 198 173	#60C6AD
66.7%	66.7% #77D0AA	RGB 119 208 170	#77D0AA
83.3%	83.3% #90DBAD	RGB 144 219 173	#90DBAD
100.0%	100.0% #ABE6B7	RGB 171 230 183	#ABE6B7

#277FA6 #38A1B0 #4BBBB4 #60C6AD #77D0AA #90DBAD #ABE6B7

#277FA6 - #60C6AD - #ABE6B7

Códigos CSS

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #277FA6 0%, #60C6AD 50%, #ABE6B7 100%);
    background: -webkit-linear-gradient(top, #277FA6 0%, #60C6AD 50%, #ABE6B7 100%);
    background: linear-gradient(to bottom, #277FA6 0%, #60C6AD 50%, #ABE6B7 100%);
}
</style>