# Mapas de degradado: recolorea cualquier cosa en segundos [Canonical HTML page](https://gradiently.design/es/guide/gradient-map) Un mapa de degradado toma cualquier imagen, foto, textura o ilustración y la repinta con los colores que elijas conservando toda su luz y su sombra. Es la herramienta de recoloreado más rápida que existe. ## The short version - Un mapa de degradado sustituye cada tono de una imagen, del más oscuro al más claro, por el color del punto equivalente de un degradado. - El extremo izquierdo del degradado colorea las sombras, el derecho colorea las luces y todo lo que hay entre medias colorea los tonos medios. - Una buena rampa de mapa de degradado se aclara de forma constante de izquierda a derecha; si la luminosidad salta de un lado a otro, la imagen parece solarizada. - Los mapas de degradado son ideales para dar coherencia a series de fotos, recolorear texturas e ilustraciones con los colores de la marca y para el etalonaje. - Un duotono es simplemente un mapa de degradado de dos colores; tres o más paradas dan un control mucho más fino de los tonos medios. Un **mapa de degradado** recolorea una imagen sustituyendo cada uno de sus tonos por un color de un degradado. Primero se lee la imagen solo como brillo, del negro al blanco, y después cada brillo se cambia por el color que ocupa el mismo punto del degradado: el extremo izquierdo pinta las sombras y el derecho, las luces. Las formas, la luz y el detalle de la imagen quedan exactamente igual. Solo cambian los colores, y los eliges todos tú. ## Cómo funciona un mapa de degradado Piensa en el degradado como en una tabla de consulta. Un píxel con un 0 % de brillo toma el color del extremo izquierdo; uno con un 50 % de brillo toma el color del centro; uno con un 100 % toma el del extremo derecho. Como la consulta depende solo del brillo, dos colores originales muy distintos con el mismo brillo, como un jersey rojo y un seto verde, acaban del mismo color. Eso es lo que hace tan buenos a los mapas de degradado para unificar imágenes. | Tono en la imagen | Posición en la rampa | Color en Violeta de marca | | --- | --- | --- | | Sombra más profunda | 0 % | Tinta `#120b1f` | | Tonos oscuros | 25 % | Amatista `#3b1d6e` | | Tonos medios | 50 % | Violeta `#7c3aed` | | Tonos claros | 75 % | Orquídea `#f0abfc` | | Luz más brillante | 100 % | Blanco lila `#fdf4ff` | Cómo repinta una imagen la rampa Violeta de marca de abajo. La mayoría de las fotos tienen casi todos sus píxeles en las tres filas centrales. ## Rampas de mapa de degradado que funcionan La regla más importante: la rampa debe aclararse de forma constante de izquierda a derecha. Así lo oscuro sigue oscuro y lo claro sigue claro, y la imagen conserva su sensación de profundidad. Por el camino puedes cambiar de tono cuanto quieras. Los estilos fotográficos clásicos, como el sepia y la cianotipia, son simplemente rampas así. - Violeta de marca: `linear-gradient(90deg, #120b1f 0%, #3b1d6e 25%, #7c3aed 50%, #f0abfc 75%, #fdf4ff 100%)` - Sepia: `linear-gradient(90deg, #1a120b 0%, #5c3d24 35%, #a67c52 65%, #f3e3c7 100%)` - Cianotipia: `linear-gradient(90deg, #0a1f3c 0%, #1f4e8c 40%, #6fa3d6 70%, #eef5fb 100%)` - Calor: `linear-gradient(90deg, #000004 0%, #3b0f70 25%, #b63679 50%, #fb8761 75%, #fcfdbf 100%)` - Película dorada: `linear-gradient(90deg, #0d0d1a 0%, #2b2a4c 30%, #b3746a 60%, #f2c38b 85%, #fff4e0 100%)` - Verde azulado profundo: `linear-gradient(90deg, #04151a 0%, #0f4c5c 35%, #2a9d8f 65%, #e9f5db 100%)` Seis rampas que se aclaran de izquierda a derecha. Cada una recolorearía una foto de forma convincente; el tono puede vagar, la luminosidad no. ### Rampa que rompe la imagen - Luminosidad que sube y baja a lo largo de la rampa - Un color pálido en el extremo izquierdo, así que las sombras se vuelven claras - Tonos opuestos uno al lado del otro, así que los tonos medios se vuelven grises - Solo dos paradas muy alejadas en tono ### Rampa que sostiene la imagen - Luminosidad que sube de forma constante de izquierda a derecha - Un casi negro a la izquierda, un casi blanco o un tinte pálido a la derecha - Tonos vecinos, o un puente brillante entre tonos lejanos - De tres a cinco paradas para controlar los tonos medios Romper a propósito la regla de la luminosidad da un aspecto solarizado y psicodélico, que puede ser divertido para carteles. Para todo lo que deba seguir pareciendo una foto, mantén la rampa constante. Si un tono medio se vuelve gris, la solución es la misma que en cualquier degradado: mira los [degradados turbios](https://gradiently.design/es/guide/muddy-gradients). ## Para qué usar los mapas de degradado - **Series de fotos coherentes:** las fotos de archivo, las del móvil y las imágenes antiguas salen todas en una sola paleta; mira la [coherencia de marca](https://gradiently.design/es/guide/brand-consistency) - **Texturas de marca:** convierte cualquier textura en escala de grises, como nubes, hormigón, tela o ruido, en un fondo con los colores de tu marca; mira la [textura de fondo](https://gradiently.design/es/guide/background-texture) - **Ilustraciones e iconos:** recolorea un conjunto entero de una vez mapeando sus grises - **Etalonaje:** pon una capa de mapa de degradado en Luz suave o Color con poca opacidad para un aspecto de película sutil sobre los colores originales - **Datos y ciencia:** los mapas de calor y las imágenes en falso color son mapas de degradado de mediciones - **Duotono y tritono:** dos o tres paradas para tratamientos de cartel contundentes; mira [el efecto duotono](https://gradiently.design/es/guide/duotone-effect) ## Cómo aplicar un mapa de degradado en un editor de imágenes 1. **Añade un ajuste de mapa de degradado** Photoshop, Affinity Photo y GIMP tienen uno. Usa una capa de ajuste siempre que puedas, para que el original quede intacto. 2. **Fija primero los extremos** Pon una versión casi negra de tu color de marca más oscuro a la izquierda y un tinte pálido a la derecha. Comprueba que la imagen sigue leyéndose. 3. **Añade paradas de tono medio** Coloca tu color de marca principal hacia el 50 % y ajusta su posición hasta que la piel, los cielos o los objetos clave se vean bien. 4. **Mézclalo de vuelta si hace falta** Para etalonar en vez de recolorear del todo, cambia el modo de fusión de la capa a Luz suave o Color y baja la opacidad. 5. **Guarda la rampa** Guarda el degradado como preajuste y úsalo en todas las imágenes de la serie, para que combinen. ## Un mapa de degradado en CSS Los navegadores pueden aplicar un mapa de degradado con un filtro SVG. `feColorMatrix` pasa la imagen a escala de grises y `feComponentTransfer` la mapea con una tabla de valores para cada canal. Cada lista de abajo es la rampa Violeta de marca: los valores de rojo, verde y azul de los cinco colores de parada divididos entre 255, en posiciones equidistantes. ```html ``` Un mapa de degradado de cinco paradas como filtro SVG. Cambia los valores de la tabla para cambiar la rampa. Los mapas de degradado son la forma de pasar de cualquier imagen a una paleta que es tuya. Si prefieres partir de la imagen, [Igualar una imagen](https://gradiently.design/es/guide/match-a-picture) encuentra su paleta y los Marks más cercanos. En Gradiently también puedes teñir cualquier foto en el Studio con los colores del Mark que estés usando, en monocromo, en duotono o como un lavado más suave, que es un mapa de degradado hecho por ti. ## FAQ ### ¿Qué es un mapa de degradado? Un mapa de degradado recolorea una imagen sustituyendo cada tono, del más oscuro al más claro, por el color del punto equivalente de un degradado. ### ¿Cuál es la diferencia entre un mapa de degradado y un duotono? Un duotono es un mapa de degradado de solo dos colores. Los mapas de degradado pueden tener tres o más paradas para controlar mejor los tonos medios. ### ¿Por qué mi mapa de degradado se ve raro? Probablemente la luminosidad de la rampa sube y baja. Haz que se aclare de forma constante de izquierda a derecha para que las sombras sigan oscuras y las luces, claras. ### ¿Cómo uso un mapa de degradado para etalonar? Añade el mapa de degradado como capa de ajuste, cambia su modo de fusión a Luz suave o Color y baja la opacidad. ### ¿Puedo usar un mapa de degradado en CSS? Sí, con un filtro SVG que pase a escala de grises y luego mapee cada canal con los valores de tabla de `feComponentTransfer`.