Generatore di palette di colori
Inserisci il colore di base in HEX, RGB o HSL oppure scegli con il selettore, poi seleziona l’armonia cromatica. Il generatore ruota la tonalità sulla ruota dei colori HSL e mostra ogni colore come campione con i valori HEX, RGB e HSL pronti da copiare.
Come si calcola
Come nascono le armonie cromatiche
Il generatore converte il colore di base nel modello HSL (tonalità H in gradi, saturazione S e luminosità L in percentuale, secondo CSS Color Module Level 4). Per ogni armonia viene ruotata solo la tonalità; saturazione e luminosità restano invariate. Ogni colore viene poi riconvertito in sRGB e arrotondato a valori interi da 0 a 255.
| Armonia | Rotazione della tonalità | Colori |
|---|---|---|
| Complementare | 0°, 180° | 2 |
| Analoga | −30°, 0°, +30° | 3 |
| Triadica | 0°, 120°, 240° | 3 |
| Complementare divisa | 0°, 150°, 210° | 3 |
| Tetradica (rettangolo) | 0°, 60°, 180°, 240° | 4 |
| Quadrato | 0°, 90°, 180°, 270° | 4 |
| Monocromatica | nessuna rotazione; luminosità in 5 livelli | 5 |
Esempio: il rosso puro #FF0000 ha H = 0°, S = 100%, L = 50%. Ruotato di 180° dà H = 180°, cioè il ciano #00FFFF, il suo complementare. Nella triadica si aggiungono 120° (verde #00FF00) e 240° (blu #0000FF).
Palette monocromatica
Con «Monocromatica» la tonalità resta invariata. La luminosità si sposta in due passi uguali verso il nero e in due passi verso il bianco. Con il colore predefinito #3B82F6 (L ≈ 60%), i livelli si trovano intorno al 20%, 40%, 60%, 73% e 87%.
Testo leggibile sui campioni
L’etichetta di ogni campione è nera o bianca, a seconda di quale offre più contrasto secondo la formula della luminanza relativa del WCAG. Il testo raggiunge così sempre almeno 4,58:1. Per sapere se due colori della tua palette funzionano come testo e sfondo, usa il verificatore di contrasto.
Limiti
HSL è un modello geometrico semplice, non percettivamente uniforme: a parità di L, il giallo appare molto più chiaro del blu. Le armonie calcolate sono quindi un punto di partenza, da rifinire a occhio. I grigi non hanno tonalità: ruotarli dà sempre lo stesso colore.
Domande frequenti
Qual è il colore complementare del blu?
Sulla ruota dei colori HSL si trova a 180° dalla parte opposta. Per il blu #0000FF (H = 240°) è il giallo #FFFF00 (H = 60°); per #3B82F6 (H ≈ 217°), un arancione vicino a #F6AF3B.
Quali formati di colore accetta il generatore?
HEX a 3, 4, 6 o 8 cifre (con o senza #), rgb() e rgba(), hsl() e hsla(), hsv()/hsb(), hwb() e anche tre numeri semplici come «59, 130, 246» (letti come RGB). Funzionano sia la sintassi con virgole sia quella con spazi di CSS Color 4.
Come uso i colori in CSS o in un programma grafico?
Ogni campione ha un pulsante per copiare il valore HEX. «Copia come variabili CSS» mette negli appunti un blocco :root con --farbe-1, --farbe-2… I valori RGB e HSL sono nella tabella sottostante.
Perché alcune armonie sembrano sbilanciate?
HSL misura la luminosità in modo puramente matematico. A parità di L, giallo e ciano appaiono molto più chiari di blu o viola. Se serve, regola la luminosità dei singoli colori oppure parti da un colore di base meno saturo.
Come scelgo colori che stanno bene insieme?
Le palette analoghe e monocromatiche sono le più sicure: i colori sono vicini sulla ruota. Complementare e triadica danno un contrasto più forte; in quel caso di solito un colore domina e gli altri restano accenti.
Fonti e riferimenti normativi
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
Aggiornato al:
Strumenti correlati
- Convertitore di colori: HEX, RGB, HSL, HSV, CMYKConverti i colori: da HEX a RGB, da RGB a HEX, HSL, HSV, HWB e CMYK. Digita in qualsiasi formato o usa il selettore e copia il risultato, nel browser.
- Verifica del contrasto dei colori (WCAG 2.2)Verifica il contrasto tra colore del testo e dello sfondo: rapporto di contrasto WCAG 2.2 con esito AA/AAA per testo normale, testo grande e componenti UI.
- Trova il colore da un’immagine (contagocce)Estrai il codice colore da un’immagine: apri una foto, clicca un punto e copia HEX, RGB o HSL, più i colori principali. Nessun upload, tutto nel browser.
- Calcolatore dei cicli del sonnoCalcolatore del sonno: a che ora andare a dormire se ti svegli alle 7, o quando suonare la sveglia. 4-6 cicli di sonno di circa 90 minuti, regola pratica.
- Calcolatore età del cane in anni umaniQuanti anni ha il tuo cane in anni umani? Formula 16·ln(età)+31 (Wang et al. 2020) e tabella AVMA per taglia, a confronto, con l’età senior.
- Calcolatore massa grassa (metodo US Navy)Stima la percentuale di massa grassa da altezza, collo, vita e fianchi con le equazioni US Navy di Hodgdon e Beckett (1984). In centimetri o pollici.