# Degradados rosa que se ven modernos, no empalagosos

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

El rosa puede parecer una tienda de chucherías o una revista de moda. La diferencia rara vez está en el rosa en sí; está en lo que pones a su lado. Aquí tienes paletas, combinaciones y códigos para un rosa actual.

## The short version

- Un degradado rosa mezcla tonos de rosa, del rosa empolvado pálido y el rosa palo al coral y el fucsia, a menudo con un melocotón, un rojo o un violeta vecinos.
- El rosa se ve empalagoso cuando es pálido, saturado y solo se combina con otros pasteles, y moderno cuando se combina con un tono profundo.
- Compañeros profundos como el sangre de buey, el azul marino, el verde bosque y el casi negro dan contraste al rosa y lo hacen sentir editorial.
- El texto blanco funciona sobre rosas profundos como #be185d, pero queda por debajo del contraste necesario para texto de lectura sobre rosas más vivos como #ec4899.
- Los rosas apagados y algo agrisados se sienten más adultos que los rosas caramelo puros, y encajan en marcas de moda, belleza y cultura.

Un **degradado rosa** mezcla tonos de rosa, del rosa empolvado pálido y el rosa palo al coral, el fucsia y el frambuesa, a menudo con un melocotón, un rojo o un violeta vecinos. El rosa vive un largo buen momento en moda, belleza, gastronomía y cultura, pero tiene un fallo muy conocido: demasiado pálido, demasiado dulce, demasiado azucarado. La solución casi siempre es el contraste. Combina el rosa con algo profundo y se vuelve nítido y editorial. Aquí tienes paletas, combinaciones y códigos CSS para degradados rosa que se sienten modernos.

## La gama de rosas

El rosa es un rojo más claro, pero la familia es amplia. El rosa empolvado y el rosa palo son suaves y algo agrisados, lo que los hace sentir serenos y adultos. El coral y el salmón tiran hacia el naranja y se sienten cálidos y soleados. El rosa intenso y el fucsia tiran hacia el violeta y se sienten ruidosos y juguetones. El frambuesa y el baya son lo bastante profundos para llevar texto blanco.

- Rosa empolvado: #fbe4e4
- Rosa palo: #e8b4b8
- Salmón: #f9a28b
- Rosa coral: #fb7185
- Rosa intenso: #ec4899
- Fucsia: #c026d3
- Frambuesa: #be185d
- Baya: #831843

Ocho rosas del más pálido al más profundo. Suaves y agrisados a la izquierda, ruidosos en el centro, profundos a la derecha.

El rosa que eliges marca el tono antes que cualquier otra cosa:

- **Belleza y cuidado de la piel:** rosa empolvado y rosa palo, a menudo con crema y un marrón cálido.
- **Moda y editoriales:** rosa palo o intenso frente a negro, azul marino o sangre de buey.
- **Comida y bebida:** coral, salmón y frambuesa, los colores de la fruta y el sorbete.
- **Música y ocio nocturno:** rosa intenso y fucsia brillando sobre casi negro.
- **Bodas y papelería:** rosa empolvado y rosa sobre papel cálido, con detalles en verde profundo o burdeos.

Los rosas pálidos se solapan con la familia pastel en general; [los degradados pastel](https://gradiently.design/es/guide/pastel-gradients) explican cómo mantenerlos frescos con varios tonos.

## Por qué el rosa se vuelve empalagoso

### Empalagoso

- Rosa pálido mezclado con azul bebé o lila
- Todos los colores pastel, nada oscuro
- Rosa caramelo puro y brillante, sin nada de gris
- Tipografía redondeada y burbujeante en el mismo rosa

### Moderno

- Rosa frente a un tono profundo
- Un oscuro fuerte para el texto y el peso
- Rosas apagados, algo atenuados
- Tipografía nítida en casi negro o crema

Ninguna de las opciones empalagosas es un error por sí sola; las marcas infantiles y la confitería las usan a propósito. Pero si quieres que el rosa se lea como seguro y no como mono, necesitas peso en algún punto del diseño, y un color compañero profundo es la forma más rápida de conseguirlo.

## Degradados rosa suaves

Los rosas suaves se sienten serenos, cálidos y táctiles. Encajan en cuidado de la piel, papelería, bodas y bienestar. Mantenlos algo apagados en lugar de brillantes y usa una tinta oscura para el texto.

- Papel rosado: `linear-gradient(135deg, #fdf2f0 0%, #f6cfd2 100%)`
- Rosa palo: `linear-gradient(160deg, #f5e1dc 0%, #e8b4b8 55%, #c98b95 100%)`
- De rosa a albaricoque: `linear-gradient(135deg, #fde2e4 0%, #fed7aa 100%)`
- Brillo de pétalo: `radial-gradient(circle at 30% 30%, #fff1f2 0%, #fbcfe8 45%, #e9a6c0 100%)`

Degradados rosa suaves. El albaricoque y el rosa atenuado los mantienen cálidos sin azúcar.

## Rosa con tonos profundos

Aquí es donde el rosa se vuelve editorial. Un compañero profundo da al rosa algo contra lo que brillar y al texto un sitio sólido donde asentarse. Las combinaciones de abajo son habituales en moda, edición y hostelería por buenas razones.

- De sangre de buey a rosa: `linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%)`
- De marino a rosa: `linear-gradient(160deg, #0f1a33 0%, #3a2a5c 50%, #f9a8c2 100%)`
- Bosque y rosa, partido: `linear-gradient(90deg, #14352a 0% 50%, #f7b6c2 50% 100%)`
- De cacao a rosa: `linear-gradient(160deg, #1c1210 0%, #4a2c25 50%, #e9a8a0 100%)`
- Luz rosa sobre negro: `radial-gradient(circle at 70% 80%, #ff7ab8 0%, #7a1f4b 40%, #0d0508 80%)`
- De ciruela a frambuesa: `linear-gradient(135deg, #3b0764 0%, #9d174d 55%, #fda4af 100%)`

Rosa con compañeros profundos. La combinación con verde bosque usa un corte seco porque el rosa y el verde son casi opuestos y se mezclarían en gris.

El verde y el rosa están casi enfrente en el círculo cromático, así que forman una pareja llamativa y una mezcla pobre. Mantenlos en zonas separadas, como en el corte de arriba. [Los colores complementarios](https://gradiently.design/es/guide/complementary-colors) explican por qué los opuestos se vuelven grises al mezclarse.

## Degradados rosa intensos y atrevidos

Los rosas intensos son los colores más ruidosos de la familia. Encajan en música, ocio nocturno, rebajas y marcas que quieren verse desde la otra punta de una sala. Mézclalos hacia el naranja o el violeta, nunca hacia el verde o el verde azulado.

- De rosa a mandarina: `linear-gradient(135deg, #db2777 0%, #f97316 100%)`
- Frambuesa ascendente: `linear-gradient(135deg, #be185d 0%, #ec4899 50%, #f9a8d4 100%)`
- De violeta a rosa: `linear-gradient(135deg, #7c3aed 0%, #ec4899 100%)`
- Atardecer rosa: `linear-gradient(180deg, #ff4d8d 0%, #ff8a5c 60%, #ffd29d 100%)`

Degradados rosa vivos. Cada uno se mezcla hacia un vecino cálido o violeta, así que el centro sigue brillante.

El de violeta a rosa es uno de los degradados más vistos de internet. Si lo usas, hazlo tuyo con un fondo profundo, un reflejo cálido o grano. La guía de [degradados morados](https://gradiently.design/es/guide/purple-gradient) cuenta más sobre ello.

## El rosa en el diseño editorial

Una portada editorial vertical titulada El número de la suavidad sobre un degradado de tonos rosa

El rosa como portada de revista: campo sereno, tipografía segura.

Una publicación cuadrada de frase con texto oscuro sobre un degradado suave

Una publicación de frase en la que el texto oscuro da peso al rosa.

El rosa editorial funciona porque trata el color como fondo, no como adorno. Un solo campo grande, espacio generoso, una serifa nítida o una grotesca en casi negro o crema, y un detalle en un color compañero profundo. [El diseño editorial para redes](https://gradiently.design/es/guide/editorial-design-for-social) explica estos recursos en detalle.

## Texto sobre degradados rosa

| Texto sobre fondo | Contraste | Veredicto |
| --- | --- | --- |
| Blanco sobre `#831843` | 9,7:1 | Excelente |
| Blanco sobre `#be185d` | 6,0:1 | Bien para texto de lectura |
| Blanco sobre `#db2777` | 4,6:1 | Aprueba justo para texto de lectura |
| Blanco sobre `#ec4899` | 3,5:1 | Solo texto grande |
| `#3b0a1e` sobre `#f472b6` | 6,4:1 | Aquí funciona una tinta oscura |
| `#1f2a44` sobre `#f9c6d0` | 9,5:1 | Marino sobre rosa: excelente |

Proporciones de contraste WCAG, calculadas. El texto de lectura necesita 4,5:1 y el texto grande, 3:1.

```css
.cover {
  background-color: #2a0a12;
  background-image: linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%);
  color: #fdf2f0;
}
```

De sangre de buey a rosa, con texto crema. Coloca las palabras en la parte superior, más oscura, del campo.

En un degradado, comprueba siempre el contraste allí donde el rosa es más claro detrás del texto. [Texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) muestra cómo encontrar la zona tranquila.

## FAQ

### ¿Qué colores van con el rosa en un degradado?

El melocotón, el coral, el rojo y el violeta se mezclan limpiamente con el rosa. Para dar contraste, combina el rosa con tonos profundos como sangre de buey, azul marino, cacao o casi negro. Mantén el verde en una zona aparte, porque rosa y verde se mezclan en gris.

### ¿Cómo hago que el rosa parezca menos infantil?

Usa rosas apagados o profundos en lugar de rosa caramelo brillante, añade un color compañero profundo y pon el texto en casi negro o crema en lugar de en otro rosa.

### ¿Qué color de texto funciona sobre un degradado rosa?

El blanco funciona sobre rosas profundos como el frambuesa y el baya. Sobre rosas más claros, usa una tinta oscura como un burdeos profundo o un azul marino.

### ¿Cuál es el CSS de un degradado rosa?

Por ejemplo, linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%) da un degradado de sangre de buey a rosa. Todas las paletas de esta página se pueden copiar como CSS.