# Palette di colori vivaci che restano leggibili

[Canonical HTML page](https://gradiently.design/it/guide/bright-color-palettes)

I colori vivaci sono facili da amare e facili da rendere illeggibili. Il trucco è sapere quali vogliono il testo nero, quali il bianco, e dare a tutta la palette un punto dove riposare.

## The short version

- Una palette di colori vivaci usa tinte molto sature come rosa shocking, mandarino, limone, blu elettrico e verde brillante.
- Gialli, verdi, ciano, verde acqua e arancioni vivaci sono colori chiari, quindi vogliono il testo scuro e non il bianco.
- Rossi e rosa vivaci misurano circa 3,5:1 contro il bianco, quindi non superano il livello AA delle WCAG per il testo corrente: usa il nero per il testo piccolo e tieni il bianco per i titoli grandi.
- Due colori vivaci di luminosità simile accostati sul bordo sembrano vibrare, quindi separali con un neutro o con una chiara differenza di luminosità.
- Ogni palette vivace ha bisogno di un’ancora calma, di solito un quasi nero o un bianco caldo, che regga il testo e lasci spazio al colore.

Una **palette di colori vivaci** resta leggibile quando tratti ogni tinta per la sua luminosità e non per quanto è rumorosa. Il limone `#FFD60A`, il verde brillante `#34C759`, l’acqua `#00C2FF` e il mandarino `#FF7A00` sono tutti abbastanza chiari da volere un testo quasi nero. Il rosa shocking `#FF2D87` e il rosso papavero `#FF3B30` stanno in una zona scomoda: il testo nero passa, ma il bianco funziona solo per i titoli grandi. Aggiungi un colore ancora calmo, dai a ogni tinta il suo spazio, e una palette da pasticceria diventa una su cui puoi davvero scrivere.

## Quali colori vivaci vogliono il testo nero

La saturazione rende forte un colore, ma la leggibilità dipende dalla luminosità. Molte tinte vivaci sono molto più chiare di quanto sembrino, ed è per questo che il testo bianco su verde brillante o su giallo appare squillante ma resta difficile da leggere. La tabella qui sotto misura undici colori vivaci contro il bianco e contro il quasi nero `#111111`.

| Colore | Hex | Con testo bianco | Con testo nero |
| --- | --- | --- | --- |
| Limone | `#FFD60A` | 1,41:1 | 13,38:1, usa il nero |
| Acqua | `#00C2FF` | 2,07:1 | 9,14:1, usa il nero |
| Verde acqua menta | `#00D1B2` | 1,95:1 | 9,68:1, usa il nero |
| Verde brillante | `#34C759` | 2,22:1 | 8,51:1, usa il nero |
| Mandarino | `#FF7A00` | 2,61:1 | 7,23:1, usa il nero |
| Rosso papavero | `#FF3B30` | 3,55:1 | 5,32:1, usa il nero |
| Rosa shocking | `#FF2D87` | 3,51:1 | 5,37:1, usa il nero |
| Lampone | `#E0115F` | 4,76:1, usa il bianco | 3,97:1 |
| Viola elettrico | `#8B3DFF` | 4,99:1, usa il bianco | 3,78:1 |
| Cobalto | `#1D4ED8` | 6,70:1, usa il bianco | 2,82:1 |
| Rosso segnale | `#C81D11` | 5,77:1, usa il bianco | 3,27:1 |

Le WCAG AA chiedono 4,5:1 per il testo corrente e 3:1 per il testo grande. Lampone e viola elettrico sono casi al limite: il bianco passa, ma per un soffio.

Una regola pratica: il lato chiaro della ruota, dall’arancione al giallo e al verde fino al ciano, vuole il nero, e così i rosa e i rossi più accesi; il lato profondo, dal blu al viola fino al cremisi, vuole il bianco. Se progetti per un pubblico ampio, leggi anche le [palette adatte ai daltonici](https://gradiently.design/it/guide/color-blindness-design), perché colori vivaci che differiscono solo per tinta possono sembrare uguali ad alcuni lettori.

## Sei palette di colori vivaci con codici hex

- Bianco caldo: #fff8ec
- Rosa shocking: #ff2d87
- Mandarino: #ff7a00
- Limone: #ffd60a
- Inchiostro: #111111

Banco della frutta. Tre colori vivaci caldi tra un bianco caldo e un inchiostro. L’inchiostro regge tutto il testo; i colori vivaci reggono forme e parole grandi.

- Viola notte: #1a1033
- Verde acqua menta: #00d1b2
- Limone: #ffd60a
- Rosa shocking: #ff2d87
- Bianco lilla: #f4f1ff

Sala giochi. Un fondo scuro fa brillare i colori vivaci, e tutti e tre superano l’AA su di esso: limone a 12,76:1, verde acqua menta a 9,23:1, rosa shocking a 5,13:1.

- **Festa in piscina:** acqua `#00C2FF`, verde brillante `#34C759`, limone `#FFD60A`, bianco `#FFFFFF`, blu notte profondo `#0B1F3A` per il testo.
- **Scuola elementare:** cobalto `#1D4ED8`, rosso segnale `#C81D11`, limone `#FFD60A`, carta `#FAF7F0`, inchiostro `#111111`.
- **Stampa riso:** rosa fluorescente `#FF48B0`, blu `#0078BF`, giallo `#FFE800`, carta da giornale `#F2EFE6`, nero `#1A1A1A`.
- **Tropicale:** lampone `#E0115F`, mango `#FFA51F`, palma `#00A86B`, sabbia `#F6EBD9`, cacao `#2B1B14`.

## Come mantenere leggibile una palette vivace

1. **Scegli prima un’ancora** Prendi un quasi nero o un bianco caldo e lascia che copra gran parte della superficie. Il bianco caldo `#FFF8EC` con l’inchiostro `#111111` misura 17,89:1, quindi ogni parola scritta in inchiostro si legge.
2. **Scrivi il testo nell’ancora, non in un colore vivace** Il testo corrente va nel colore ancora. I colori vivaci possono portare un titolo o un solo numero grande, dove vale la soglia di 3:1 per il testo grande.
3. **Separa i colori vivaci di pari luminosità** Il rosa shocking accanto a un blu elettrico come `#2F6BFF` misura 1,28:1, e il bordo sembra tremolare. Metti tra loro bianco, nero o spazio, oppure abbina un colore vivace chiaro a uno profondo.
4. **Limita i colori vivaci che toccano le parole** Tre colori vivaci in una palette bastano, e solo uno dovrebbe stare dietro a un blocco di testo. La [regola 60 30 10](https://gradiently.design/it/guide/60-30-10-rule) aiuta: ancora 60, colore vivace principale 30, accenti 10.
5. **Controlla su un telefono all’aperto** I colori vivaci sbiadiscono al sole e sugli schermi a bassa luminosità. Se le parole si leggono ancora su un telefono attenuato, la palette funziona.

Un post di saldi estivi vivace in cui il testo piccolo di supporto si perde contro lo sfondo intenso

Uno sfondo squillante con le parole direttamente sopra: il titolo sopravvive, la riga di dettaglio scompare.

Lo stesso post di saldi estivi vivace con ogni riga di testo nitida contro una zona più calma dietro di essa

Gli stessi colori, con lo sfondo che si calma dietro il testo. Sempre vivace, e ogni riga si legge.

La versione a destra è ciò che Gradiently fa per impostazione predefinita. Un Mark sa dove stanno le tue parole, allontana da esse il suo colore più affollato e sceglie il testo chiaro o scuro riga per riga, così puoi tenere una palette squillante senza un riquadro o un’ombra dietro il testo.

## Gradienti vivaci senza un centro grigio

Se fondi due colori vivaci da lati opposti della ruota in semplice sRGB, il punto medio diventa grigio o marrone. Scegli due colori vicini, oppure chiedi al browser di interpolare in oklch, che mantiene saturo il centro. L’[interpolazione dei gradienti](https://gradiently.design/it/guide/gradient-interpolation) spiega la differenza.

- Dal rosa al limone: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)`
- Dall’acqua al verde: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)`
- Dal rosa all’acqua in oklch: `linear-gradient(in oklch 135deg, #ff2d87 0%, #00c2ff 100%)`
- Bagliore rosa sulla notte: `radial-gradient(circle at 30% 30%, #ff2d87 0%, #8b3dff 45%, #1a1033 90%)`

I colori vivaci vicini si fondono bene. Gli opposti restano intensi se interpolati in oklch.

Per altre combinazioni, guarda i [gradienti vibranti](https://gradiently.design/it/guide/vibrant-gradients) e i [gradienti neon](https://gradiently.design/it/guide/neon-gradients). Per tutte le indicazioni sul contrasto, leggi il [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility).

Un avvertimento se la palette finirà in stampa: i colori da schermo più elettrici, in particolare acqua, rosa shocking e verde brillante, stanno fuori da ciò che gli inchiostri CMYK standard riescono a riprodurre, e tornano dalla tipografia visibilmente più spenti. Chiedi una prova colore, oppure prevedi inchiostri speciali o fluorescenti. [RGB e CMYK](https://gradiently.design/it/guide/rgb-vs-cmyk) spiega cosa aspettarti.

## FAQ

### Che cos’è una palette di colori vivaci?

Un insieme di colori molto saturi come rosa shocking, mandarino, limone, acqua e verde brillante, di solito bilanciato da un’ancora neutra per il testo.

### Sui colori vivaci devo usare testo bianco o nero?

Usa il nero sui colori vivaci chiari come giallo, arancione, verde, acqua e verde acqua, e anche su rosa shocking e rosso papavero. Usa il bianco sui colori vivaci profondi come cobalto, viola, lampone e rosso segnale.

### Perché alcuni colori vivaci sembrano vibrare?

Due colori saturi di luminosità simile affiancati, come rosa shocking e blu elettrico, fanno tremolare il bordo tra loro. Separali con un neutro o cambia la luminosità di uno dei due.

### Quanti colori vivaci dovrebbe avere una palette?

Due o tre colori vivaci più uno o due neutri bastano. Solo un colore vivace dovrebbe stare dietro a un blocco di testo.

### I colori vivaci sono un problema per l’accessibilità?

Non di per sé. I problemi nascono dal testo su colori vivaci con contrasto troppo basso, quindi controlla ogni coppia di testo con le WCAG e tieni il testo corrente in un’ancora scura o chiara.