# Degradado verde menta: códigos frescos y ligeros

[Canonical HTML page](https://gradiently.design/es/guide/mint-gradient)

La menta es el color más fresco de la rueda y el más fácil de estropear: un paso más fría y parece pasta de dientes o el pasillo de un hospital. Aquí tienes códigos ligeros y apetecibles.

## The short version

- Un degradado verde menta mezcla verdes pálidos y algo azulados, normalmente con blanco o crema en el extremo claro.
- La menta parece clínica combinada con gris frío y blanco puro, y fresca combinada con crema, melocotón o rubor.
- El menta pálido y el melocotón son opuestos, pero con fuerza pastel se mezclan limpiamente sin enturbiarse.
- La menta es demasiado clara para texto blanco; un verde bosque profundo como #064e3b se lee bien sobre ella.
- La menta va bien con cafeterías, cuidado de la piel, marcas infantiles, sostenibilidad y campañas de primavera.

Un **degradado verde menta** mezcla verdes pálidos y algo azulados, de casi blanco a una hierbabuena suave, y pocos verdes se sienten más frescos. Si lo mantienes cálido con un compañero crema o melocotón, parece una cafetería, un jardín o una mañana de primavera. Combinado con gris y blanco puro, empieza a parecer la sala de espera de un dentista. Aquí tienes códigos de menta que siguen frescos, los compañeros que los calientan y el color de texto que los mantiene legibles.

## Un degradado verde menta en una línea de CSS

Si solo necesitas uno, empieza aquí. Va de un blanco cálido y cremoso a una menta clara, así que nunca resulta frío, y deja mucho espacio tranquilo arriba para las palabras.

Menta fresca: `linear-gradient(160deg, #fbfdf7 0%, #d1fae5 45%, #a7f3d0 100%)`

De blanco crema a menta. Pon los titulares en verde bosque profundo `#064e3b` en la mitad superior.

## Degradados menta pálidos

Viven cerca del blanco. Son perfectos para fondos que cargan mucha lectura, como una carta o una lista de precios, y para fotos de producto en las que quieres que el envase sea el protagonista. Los [degradados pastel](https://gradiently.design/es/guide/pastel-gradients) aplican el mismo enfoque a cada color.

- Leche de menta: `linear-gradient(180deg, #f7fef9 0%, #d1fae5 100%)`
- Hierbabuena: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)`
- Hoja nueva: `linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%)`
- Rocío de la mañana: `radial-gradient(circle at 30% 25%, #ffffff 0%, #d1fae5 45%, #a7f3d0 100%)`
- Menta helada: `linear-gradient(135deg, #ecfeff 0%, #bdf5dc 100%)`

Cinco mentas pálidas. «Menta helada» tira al azul, más fría y limpia; «Hoja nueva» tira al amarillo, más cálida y botánica.

Decide pronto hacia dónde tira tu menta. Las mentas azuladas se sienten frías, limpias y modernas, y van bien con tecnología, trajes de baño y cuidado de la piel. Las mentas amarillentas se sienten cálidas y comestibles, y van bien con comida, plantas y todo lo infantil. Mezclar las dos en un degradado está bien, pero elige una para que domine y la marca tenga una temperatura clara.

## Menta con melocotón, crema o rubor

El opuesto de la menta en el círculo cromático es un rosa coral suave. A plena fuerza, los opuestos se mezclan en gris, pero con fuerza pastel hay tan poca saturación que se atraviesan limpiamente. Eso hace de menta y melocotón, o menta y rubor, una de las combinaciones más bonitas, y la calidez evita que la menta parezca médica. Hay más combinaciones en [combinaciones de colores para degradados](https://gradiently.design/es/guide/gradient-color-combinations).

- Menta y melocotón: `linear-gradient(135deg, #d1fae5 0%, #fde2cf 100%)`
- Menta y rubor: `linear-gradient(135deg, #ccfbf1 0%, #fce7f3 100%)`
- Crema y menta: `linear-gradient(180deg, #fef9ec 0%, #d1fae5 100%)`
- Sorbete de pistacho: `linear-gradient(135deg, #a7f3d0 0%, #fef3c7 50%, #fed7aa 100%)`

Menta con un compañero cálido. Recuerdan a helado, flores y panaderías más que a clínicas.

- Blanco crema: #fbfdf7
- Leche de menta: #d1fae5
- Hierbabuena: #a7f3d0
- Melocotón: #fde2cf
- Rubor: #fce7f3
- Tinta bosque: #064e3b

Una paleta menta cálida: crema, dos mentas, dos pasteles cálidos y un verde bosque para texto y logotipos.

## Una menta que no parezca pasta de dientes

Mucha gente asocia la menta con la pasta de dientes, las clínicas y los uniformes de hospital. Si no estás en esos sectores, aléjate de las combinaciones que los evocan.

### Se siente clínico

- Menta con blanco puro y gris frío
- Menta saturada como `#98ff98` o `#3eb489` en relleno plano
- Texto sans serif fino y gris
- Superficie digital dura y perfectamente limpia

### Se siente fresco

- Menta con crema, melocotón o rubor
- Mentas suaves de `#d1fae5` a `#a7f3d0`
- Texto verde bosque con algo de peso
- Un toque de grano, como papel impreso

El grano importa más de lo que crees. Un degradado digital pálido sin textura parece un valor por defecto; un poco de ruido lo hace parecer una carta impresa. Los [degradados con grano](https://gradiently.design/es/guide/grainy-gradients) te muestran cómo.

## Degradados menta más profundos: hacia esmeralda y bosque

Llevar la menta hacia el esmeralda o el verde bosque da un degradado con frescura y profundidad. Va bien con marcas de sostenibilidad, tiendas de plantas, matcha y alimentación saludable, y el extremo oscuro admite texto blanco. Para toda la gama de verdes, consulta los [degradados verdes](https://gradiently.design/es/guide/green-gradient).

- De menta a esmeralda: `linear-gradient(180deg, #d1fae5 0%, #34d399 50%, #047857 100%)`
- Invernadero: `linear-gradient(160deg, #a7f3d0 0%, #059669 55%, #064e3b 100%)`
- Matcha: `linear-gradient(135deg, #d9f99d 0%, #86efac 45%, #15803d 100%)`
- Luz de menta sobre bosque: `radial-gradient(circle at 80% 15%, #a7f3d0 0%, #10b981 25%, #064e3b 70%, #022c22 100%)`

Menta en el extremo claro, bosque en el oscuro. Los titulares van abajo en blanco o arriba en tinta bosque.

## Texto sobre un degradado verde menta

La menta es uno de los colores más claros que existen, así que el texto blanco desaparece sobre ella: el blanco sobre hierbabuena `#a7f3d0` mide bastante menos de 2 a 1. El verde bosque `#064e3b` sobre la misma menta mide unos 7,6 a 1 y mantiene todo el diseño en una sola familia de color. Cambia a blanco solo donde el degradado se haya profundizado hasta esmeralda `#047857` o más oscuro. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) explica los umbrales.

| Fondo | Texto blanco | Texto bosque #064e3b |
| --- | --- | --- |
| Leche de menta `#d1fae5` | Suspende | Aprueba con facilidad |
| Hierbabuena `#a7f3d0` | Menos de 2:1, suspende | Unos 7,6:1 |
| Menta `#6ee7b7` | Unos 1,5:1, suspende | Unos 6,4:1 |
| Esmeralda `#047857` | Unos 5,5:1, aprueba | Suspende |

Mediciones de color plano. En un degradado, comprueba el punto más claro detrás de cada línea.

Una publicación de producto de una cafetería con titular verde bosque sobre un degradado menta pálido y crema

Una publicación de cafetería sobre menta fresca con texto verde bosque. Se ve fría, dulce y acogedora.

El mismo diseño de cafetería como story vertical sobre el degradado menta

La misma publicación como story, con la menta renderizada para el formato vertical.

En Gradiently, Pro convierte un diseño en todos los tamaños que necesitas en un solo paso, y la tinta automática elige texto claro u oscuro para cada línea a partir de los propios colores del Mark, así que una menta pálida nunca acaba con texto blanco ilegible tras un cambio de tamaño. Las cafeterías y tiendas pequeñas encontrarán más ideas en [branding para cafeterías](https://gradiently.design/es/guide/coffee-shop-branding) y [paletas de colores de primavera](https://gradiently.design/es/guide/spring-color-palettes).

## CSS de degradado verde menta para una web

En una web, la menta funciona mejor como fondo de sección que como toda la página, para que se lea como un momento fresco entre secciones blancas. Una tenue luz cálida en una esquina evita que una gran zona menta resulte plana, y poner el texto en verde bosque en lugar de negro mantiene la página suave.

```css
.section-mint {
  background-color: #ecfdf5; /* fallback */
  background-image:
    radial-gradient(circle at 85% 20%, #fde2cf 0%, transparent 35%),
    linear-gradient(160deg, #fbfdf7 0%, #d1fae5 50%, #a7f3d0 100%);
  color: #064e3b;
}

.section-mint a { color: #065f46; }
```

Menta fresca con una suave luz melocotón en la esquina superior derecha. El texto verde bosque y los enlaces esmeralda profundo superan el contraste sobre ella.

## FAQ

### ¿Cuál es el código hex del verde menta?

No hay un estándar único. `#98ff98` es una menta brillante habitual y `#3eb489` una más profunda; para degradados, las mentas suaves como `#d1fae5` y `#a7f3d0` suelen verse mejor.

### ¿Qué colores combinan con un degradado verde menta?

Crema, melocotón, rosa rubor, amarillo mantequilla y verde bosque. Los compañeros cálidos evitan que la menta parezca clínica.

### ¿Qué color de texto queda mejor sobre verde menta?

Verde bosque profundo o carbón. El texto blanco no supera el contraste en casi ningún tono de menta.

### ¿Por qué mi degradado menta parece clínico?

Probablemente está combinado con blanco puro y gris frío. Cámbialos por crema y un acento cálido, y añade un grano ligero.

### ¿Combinan la menta y el rosa en un degradado?

Sí, con fuerza pastel. El menta pálido y el rubor se mezclan limpiamente porque hay poca saturación que se vuelva gris.