Degradado rosa y morado: códigos del dulce al ocaso

Un degradado rosa y morado mezcla dos vecinos del círculo cromático, un rosa como #ec4899 y un violeta como #9333ea, con magenta y orquídea entre medias. Como los tonos son contiguos, la mezcla se mantiene viva de lado a lado. Lo que lo cambia todo es la luminosidad: si lo dejas pálido, sale algodón de azúcar; si subes la saturación, glamour; si lo oscureces, ocaso. Los códigos de abajo van de claro a oscuro, para que elijas primero el ambiente y después los valores hex.

Ambientes del degradado rosa y morado de un vistazo

Degradados rosa y morado caramelo

Los rosas y lilas pálidos juntos son lo más suave que puede ser un color. Van con todo lo dulce o delicado, pero pueden caer enseguida en lo infantil. La solución es un fondo ligeramente cálido, un melocotón o un crema en un extremo, y una tipografía oscura muy segura.

Para más de esta suavidad, degradados pastel cubre toda la familia, y degradados lavanda se inclina más hacia el morado.

Degradados orquídea y magenta

Sube la saturación y la pareja se vuelve glamurosa. Es el territorio del esmalte de uñas, las pulseras de festival y las portadas de discos. Usa una ligera inclinación o un resplandor radial en lugar de una diagonal plana, y deja una zona más calmada para las palabras.

Ocaso: degradados rosa y morado oscuros

Oscurece la pareja y madura al instante. Un fondo negro ciruela con luz frambuesa y violeta recuerda al cielo veinte minutos después de la puesta de sol, o a una coctelería de luz tenue. Son los más versátiles del conjunto y admiten sin problema texto blanco o rosa pálido.

Estos se parecen a los degradados de atardecer y a los degradados galaxia, y puedes tomar prestado libremente de ambos.

Añadir un tercer color sin ensuciar

La diagonal estándar de rosa intenso a violeta está en todas partes, así que un color extra es la forma más rápida de hacerla tuya. Elige un color vecino del rosa o del morado: el naranja y el coral están junto al rosa, el azul y el índigo junto al morado. El verde está frente al magenta, por eso el rosa hacia el verde se vuelve gris en el medio.

Cómo elegir un degradado rosa y morado para tu marca

1. 1

   Decide primero si claro u oscuro

   Casi todo el ambiente viene de la luminosidad. Una mezcla pálida dice delicadeza; un fondo ciruela dice noche. Elige uno y mantenlo en todas las publicaciones.

2. 2

   Elige qué color manda

   Si manda el rosa, se siente más cálido y juguetón. Si manda el morado, más frío y misterioso. Dale al protagonista más o menos dos tercios de la superficie.

3. 3

   Planea dónde va el texto

   Pon el titular sobre el extremo más oscuro y calmado y el rosa más brillante en una esquina, para no competir con el fondo por la atención.

4. 4

   Pruébalo en todos los tamaños

   Una mezcla que funciona en una publicación cuadrada puede dejar su zona más brillante detrás del texto en una historia. Revisa publicación, historia y banner antes de decidirte.

Si publicas a menudo, apunta el resultado como una receta corta: fondo, color principal, acento, dónde está la luz. Esa sola línea mantiene coherente todo un feed, que importa más que cualquier degradado bonito suelto. Coherencia de marca va más allá.

Colores de texto sobre rosa y morado

El rosa intenso es más claro de lo que parece, así que los titulares blancos sobre rosa intenso son más débiles de lo que se espera. El violeta y el magenta sostienen bien el blanco. En el extremo pálido, un ciruela profundo es la tinta que mantiene el diseño en una sola familia. Los ratios son contraste WCAG; busca 4,5:1 para texto pequeño y 3:1 como mínimo para titulares grandes. Contraste de color y accesibilidad explica los umbrales.

CSS del degradado rosa y morado

.dusk {
  background-color: #1e0b2e;
  background-image:
    radial-gradient(circle at 80% 85%, #db2777 0%, transparent 45%),
    linear-gradient(180deg in oklch, #1e0b2e 0%, #581c87 100%);
  color: #fce7f3;
}

.headline-gradient {
  background: linear-gradient(90deg, #ec4899, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

El texto con degradado llama la atención, pero úsalo solo en palabras cortas de exhibición, nunca en el cuerpo del texto. Texto con degradado en CSS cubre las alternativas. Si quieres un look rosa y morado que nadie más pueda publicar, el Mercado de Gradiently te deja buscar Marks por palabras de color como «orquídea». Cada Mark es único y, una vez que lo reservas, solo tú puedes exportar con él; además mantiene legible el texto en los dos extremos de la mezcla por sí solo.