Gradiente rosa e viola: codici dalla caramella al crepuscolo

Un gradiente rosa e viola fonde due vicini del cerchio cromatico, un rosa come #ec4899 e un violetto come #9333ea, con magenta e orchidea in mezzo. Poiché le tonalità sono adiacenti, la fusione resta vivida da un capo all’altro. Ciò che cambia tutto è la luminosità: tienila pallida e ottieni lo zucchero filato, spingi la saturazione e ottieni glamour, scurisci e ottieni il crepuscolo. I codici qui sotto vanno dal chiaro allo scuro, così scegli prima l’umore e poi i valori esadecimali.

Gli umori dei gradienti rosa e viola a colpo d’occhio

Gradienti rosa e viola caramella

Rosa e lilla pallidi insieme sono la cosa più morbida che il colore possa dare. Vanno bene per tutto ciò che è dolce o gentile, ma possono scivolare presto nell’infantile. La soluzione è un fondo leggermente caldo, una pesca o un crema a un’estremità, e un testo scuro molto sicuro di sé.

Per altra morbidezza di questo tipo, i gradienti pastello coprono l’intera famiglia, e i gradienti lavanda vanno più verso il viola.

Gradienti orchidea e magenta

Alza la saturazione e la coppia diventa glamour. È il territorio di smalti, braccialetti da festival e copertine di album. Usa un angolo leggero o un alone radiale invece di una diagonale piatta e lascia una zona più calma per le parole.

Crepuscolo: gradienti rosa e viola scuri

Scurisci la coppia e diventa subito adulta. Un fondo nero prugna con luce di lampone e violetto sembra il cielo venti minuti dopo il tramonto, o un cocktail bar con luci basse. Sono i più versatili del gruppo e reggono facilmente testo bianco o rosa pallido.

Sono vicini ai gradienti tramonto e ai gradienti galassia, e puoi prendere liberamente da entrambi.

Aggiungere un terzo colore senza sporcare

La classica diagonale da rosa acceso a violetto è ovunque, quindi un colore in più è il modo più rapido per renderla tua. Scegli un colore vicino al rosa o al viola: arancione e corallo stanno accanto al rosa, blu e indaco accanto al viola. Il verde sta di fronte al magenta, ed è per questo che il rosa verso il verde diventa grigio al centro.

Come scegliere un gradiente rosa e viola per il tuo brand

1. 1

   Decidi prima chiaro o scuro

   Gran parte dell’umore viene dalla luminosità. Una fusione pallida dice gentilezza; un fondo prugna dice sera. Scegline uno e mantienilo per ogni post.

2. 2

   Scegli quale colore guida

   Con il rosa che guida sembra più caldo e giocoso. Con il viola che guida sembra più fresco e misterioso. Dai al colore guida circa due terzi della superficie.

3. 3

   Pianifica dove stanno le parole

   Metti il titolo sull’estremità più scura e calma e il rosa più luminoso in un angolo, così non devi mai lottare con lo sfondo per l’attenzione.

4. 4

   Provalo a ogni formato

   Una fusione che funziona su un post quadrato può mettere la zona più luminosa dietro il testo in una storia. Controlla post, storia e banner prima di decidere.

Se pubblichi spesso, scrivi il risultato come una breve ricetta: fondo, colore guida, accento, dove sta la luce. Quella riga mantiene coerente un intero feed, e conta più di qualsiasi singolo bel gradiente. La coerenza del brand approfondisce.

Colori del testo su rosa e viola

Il rosa acceso è più chiaro di quanto sembri, quindi i titoli bianchi sul rosa acceso sono più deboli di quanto si pensi. Violetto e magenta reggono bene il bianco. All’estremità chiara, un prugna intenso è l’inchiostro che tiene il design in un’unica famiglia. I rapporti sono contrasti WCAG; punta a 4,5:1 per il testo piccolo e a 3:1 come minimo per i titoli grandi. Contrasto del colore e accessibilità spiega le soglie.

CSS per un gradiente rosa e viola

.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;
}

Il testo con gradiente è d’effetto ma usalo solo per brevi parole di display, mai per il testo corrente. Testo con gradiente in CSS tratta le alternative. Se vuoi un look rosa e viola che nessun altro può pubblicare, il Mercato di Gradiently ti lascia cercare i Mark con parole di colore come «orchidea». Ogni Mark è unico e, una volta riservato, solo tu puoi esportare con esso; inoltre mantiene leggibile il testo su entrambe le estremità della fusione da solo.