#2F5E5B - #5EAB72 | 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 #2F5E5B a #5EAB72

#2F5E5B #5EAB72

Calcule el color entre dos colores, #2F5E5B y #5EAB72. 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)

#2F5E5B - #5EAB72 | 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 #2F5E5B como 0% y #5EAB72 como 100%.

0.0%	0.0% #2F5E5B	RGB 47 94 91	#2F5E5B
16.7%	16.7% #366A5E	RGB 54 106 94	#366A5E
33.3%	33.3% #3E7762	RGB 62 119 98	#3E7762
50.0%	50.0% #468466	RGB 70 132 102	#468466
66.7%	66.7% #4E916A	RGB 78 145 106	#4E916A
83.3%	83.3% #569E6E	RGB 86 158 110	#569E6E
100.0%	100.0% #5EAB72	RGB 94 171 114	#5EAB72

#2F5E5B #366A5E #3E7762 #468466 #4E916A #569E6E #5EAB72

#2F5E5B - #5EAB72

Mezcla HSV

#2F5E5B - #5EAB72 | 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 #2F5E5B como 0% y #5EAB72 como 100%.

0.0%	0.0% #2F5E5B	RGB 47 94 91	#2F5E5B
16.7%	16.7% #366A61	RGB 54 106 97	#366A61
33.3%	33.3% #3D7766	RGB 61 119 102	#3D7766
50.0%	50.0% #45846B	RGB 69 132 107	#45846B
66.7%	66.7% #4D916E	RGB 77 145 110	#4D916E
83.3%	83.3% #559E70	RGB 85 158 112	#559E70
100.0%	100.0% #5EAB72	RGB 94 171 114	#5EAB72

#2F5E5B #366A61 #3D7766 #45846B #4D916E #559E70 #5EAB72

#2F5E5B - #45846B - #5EAB72

Códigos CSS

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #2F5E5B 0%, #45846B 50%, #5EAB72 100%);
    background: -webkit-linear-gradient(top, #2F5E5B 0%, #45846B 50%, #5EAB72 100%);
    background: linear-gradient(to bottom, #2F5E5B 0%, #45846B 50%, #5EAB72 100%);
}
</style>