# Gradienti viola: palette, codici e come usarli [Canonical HTML page](https://gradiently.design/it/guide/purple-gradient) Il viola è uno dei colori per gradienti più usati sul web, e per questo è sia una scelta sicura sia una in cui è facile perdersi. Ecco palette che sembrano pensate, con i codici per usarle. ## The short version - Un gradiente viola fonde tonalità di violetto, viola, prugna o lavanda, spesso con un blu o un rosa vicini. - Il viola è comunemente associato a creatività, lusso e immaginazione, ed è diventato un colore molto diffuso nel branding tecnologico. - I viola profondi come #4c1d95 reggono bene il testo bianco, mentre i lavanda chiari hanno bisogno di testo scuro. - I viola medi come #a78bfa sono i più difficili per il testo, perché sono troppo chiari per il bianco e troppo saturi per sembrare calmi sotto il nero. - Aggiungere calore, profondità o grana è il modo più rapido per evitare che un gradiente viola sembri un preset predefinito. Un **gradiente viola** fonde tonalità di violetto, viola, prugna o lavanda, spesso con un blu o un rosa vicini. È uno dei colori per gradienti più popolari per siti, app e post social, perché il viola sembra fantasioso e un po’ lussuoso, e brilla magnificamente su uno schermo scuro. Qui sotto trovi palette di gradienti viola raggruppate per atmosfera, ciascuna con CSS da copiare, seguite da come metterci sopra il testo e da come evitare che somiglino a quelle di tutti gli altri. ## La famiglia del viola: violetto, viola, prugna e lavanda «Viola» copre una gamma ampia. Il violetto tende al blu e sembra freddo ed elettrico. Il magenta tende al rosa e sembra caldo e rumoroso. Il prugna è un viola profondo e rossastro che sembra ricco; il lavanda è un viola pallido e grigiastro che sembra morbido. Sapere quale vuoi rende più facile ogni altra scelta. - Violetto profondo: #2e1065 - Ametista: #4c1d95 - Violetto: #7c3aed - Viola magenta: #a21caf - Prugna: #5b2149 - Violetto tenue: #a78bfa - Lavanda: #c4b5fd - Nebbia lilla: #ede9fe Otto viola, dal più profondo al più pallido. Tendenti al blu a sinistra, al rosso al centro, morbidi a destra. ## Cosa comunica un gradiente viola In gran parte dell’Europa e delle Americhe il viola è associato a creatività, immaginazione e lusso. Il legame con il lusso è storico: per secoli la tintura viola è stata rara e costosa, quindi la indossavano i potenti. Negli ultimi anni è diventato anche uno dei colori più comuni nel branding di software e tecnologia, dove suggerisce qualcosa di inventivo senza la serietà del blu. Altrove le associazioni cambiano; il [significato dei colori nel mondo](https://gradiently.design/it/guide/color-meanings-around-the-world) entra nei dettagli. - **Strumenti creativi e studi:** violetto e magenta sembrano inventivi e un po’ giocosi. - **Bellezza e benessere:** lavanda e lilla sembrano morbidi e rigeneranti. - **Musica, vita notturna e gaming:** viola profondi con un bagliore vivace sanno di sera. - **Prodotti premium:** prugna e ametista quasi nero sembrano ricchi, soprattutto con una luce calda. Il rovescio della medaglia è la familiarità. Poiché moltissimi brand tech usano un gradiente viola, il tuo deve guadagnarsi la differenza con la profondità, il calore, il materiale o la costanza con cui lo usi. ## Gradienti viola scuri I gradienti viola scuri sembrano ricchi e notturni. Funzionano per musica, vita notturna, prodotti premium e tutto ciò che deve sapere di sera. Tieni il punto più scuro vicino al nero e lascia che ne emerga un solo colore illuminato. - Notte d’ametista: `linear-gradient(160deg, #0f0a1f 0%, #2e1065 55%, #6d28d9 100%)` - Bagliore violetto: `radial-gradient(circle at 70% 20%, #7c3aed 0%, #2e1065 45%, #0b0617 100%)` - Velluto prugna: `linear-gradient(180deg, #120a1c 0%, #3b1236 60%, #7a2d5c 100%)` - Dall’indaco al violetto: `linear-gradient(135deg, #0b1026 0%, #312e81 50%, #6d28d9 100%)` Quattro gradienti viola scuri. Ognuno sale da un quasi nero, così il testo bianco sta comodo su gran parte del campo. ## Gradienti viola chiari e pastello I viola pallidi sembrano calmi, delicati e un po’ sognanti. Si adattano a benessere, bellezza, cartoleria e tutto ciò che deve sembrare morbido. Hanno bisogno di testo scuro e rendono al meglio con un accenno di calore o di blu, così non si leggono come un lilla grigio e piatto. - Nebbia lilla: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 55%, #c4b5fd 100%)` - Dal lavanda al cipria: `linear-gradient(135deg, #ede9fe 0%, #fbcfe8 100%)` - Dal pervinca all’orchidea: `linear-gradient(160deg, #e0e7ff 0%, #ddd6fe 50%, #f5d0fe 100%)` - Dal lavanda al pesca: `linear-gradient(135deg, #f3e8ff 0%, #fde2c8 100%)` Gradienti viola morbidi. Le estremità calde (cipria, pesca) evitano che sembrino freddi. ## Gradienti viola vivaci I viola vivaci sono i più rumorosi e i più comuni. Usali per lanci, gaming, eventi e brand audaci, e tienili lontani dalle letture lunghe. Sfumare il viola verso il rosa o l’arancione mantiene brillante il centro; sfumarlo verso il verde lo rende grigio. - Dal violetto al rosa: `linear-gradient(135deg, #6d28d9 0%, #db2777 100%)` - Violetto elettrico: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #e879f9 100%)` - Dal violetto al tramonto: `linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #fb923c 100%)` - Magenta profondo: `linear-gradient(135deg, #3b0764 0%, #a21caf 55%, #f472b6 100%)` Gradienti viola saturi. Tutti e quattro sfumano verso vicini caldi, così nessuno si spegne al centro. ## Testo sui gradienti viola Con il viola è facile sbagliare il testo, perché i viola medi stanno in una posizione scomoda: troppo chiari per il bianco, troppo scuri e saturi perché il nero sembri calmo. Scegli l’inchiostro in base al punto in cui il testo si trova davvero. | Testo su sfondo | Contrasto | Giudizio | | --- | --- | --- | | Bianco su `#2e1065` | 15,2:1 | Eccellente per qualsiasi testo | | Bianco su `#4c1d95` | 11,0:1 | Eccellente | | Bianco su `#7c3aed` | 5,7:1 | Va bene per testo corrente e grande | | Bianco su `#a78bfa` | 2,7:1 | Non passa, nemmeno per il testo grande | | `#1e1033` su `#a78bfa` | 6,6:1 | Qui funziona l’inchiostro scuro | | `#1e1033` su `#ede9fe` | 15,0:1 | Eccellente | Rapporti di contrasto WCAG, calcolati. Il testo corrente richiede 4,5:1, il testo grande 3:1. Su un gradiente, controlla il punto più chiaro dietro il testo bianco e il punto più scuro dietro il testo scuro. Il [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) spiega il posizionamento, e il [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility) spiega i rapporti. Una copertina di podcast quadrata intitolata Turno di Notte su un gradiente profondo Scuro e ricco: una copertina adatta all’ascolto serale. Un post verticale con un consiglio in testo scuro su un gradiente tenue e pallido Morbido e chiaro: un post delicato con inchiostro scuro. ## Come evitare che un gradiente viola sembri generico Il violetto-rosa a 135 gradi è uno dei gradienti più usati in assoluto. È gradevole, e ormai non dice più nulla di chi lo usa. Quattro piccoli cambiamenti aiutano. - **Rendilo più profondo.** Parti da un viola quasi nero invece che da un violetto medio. La profondità si legge come premium. - **Scaldalo.** Aggiungi una luce pesca, albicocca o oro a un’estremità. Il viola con una luce calda sa di crepuscolo più che di software. - **Cambia la forma.** Un bagliore radiale basso o una caduta verticale sembrano più luce di un riempimento in diagonale. Leggi [gradienti radiali](https://gradiently.design/it/guide/radial-gradient). - **Aggiungi un materiale.** Una grana fine o una lucentezza morbida trasformano una sfumatura piatta in una superficie. Leggi [gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients). ```css .hero { background-color: #1a0b2e; background-image: radial-gradient(circle at 75% 110%, #fdba74 0%, transparent 35%), linear-gradient(in oklch 170deg, #0f0a1f 0%, #3b1a6e 55%, #7c3aed 100%); } ``` Un campo violetto profondo con un bagliore caldo che sale dal basso. Il colore pieno è un’alternativa per i browser più vecchi. Se il viola è il colore del tuo brand, la costanza conta più della sfumatura esatta. Il [branding con i gradienti](https://gradiently.design/it/guide/gradient-branding) spiega come fare tuo un viola. Puoi anche cercare «violetto profondo» o «lavanda» nel Mercato di Gradiently per vedere Mark viola vivi. ## FAQ ### Quali colori stanno bene con il viola in un gradiente? Blu, rosa, magenta e luci calde come pesca o oro si fondono bene con il viola. Verde e giallo gli stanno di fronte e tendono a diventare grigi al centro di un gradiente. ### Qual è il codice CSS per un gradiente viola? Per esempio, linear-gradient(160deg, #0f0a1f 0%, #2e1065 55%, #6d28d9 100%) crea un gradiente ametista profondo. Ogni esempio di questa pagina si può copiare direttamente. ### Quale colore del testo funziona su un gradiente viola? Il bianco funziona sui viola profondi e medio-scuri, e un inchiostro viola quasi nero funziona sui viola chiari e medi. Controlla il contrasto dove il gradiente è più chiaro dietro il testo bianco. ### Cosa comunica un gradiente viola? Il viola è comunemente associato a creatività, immaginazione e lusso. È anche molto diffuso nel branding tecnologico, il che lo rende familiare ma più difficile per distinguersi.