HEX: #FF5733 (usato in CSS/HTML) |
RGB: rgb(255, 87, 51) (display) |
CMYK: per la stampa |
HSL: hsl(11, 100%, 60%) (CSS moderno)
Il colore opposto sulla ruota cromatica (H+180). Massimo contrasto, ottimo per call-to-action e accenti.
Colori adiacenti sulla ruota cromatica (H +/-30, +/-60). Armonia visiva, ottima per sfondi e layout.
Tre colori a 120 gradi di distanza. Varieta equilibrata, ottima per interfacce vivaci.
Dal piu chiaro al piu scuro: variazioni di luminosita per creare una scala di toni coerente.
| Colore | Nome | HEX | RGB | HSL |
|---|---|---|---|---|
| Rosso puro | #FF0000 | 255, 0, 0 | 0, 100%, 50% | |
| Verde lime | #00FF00 | 0, 255, 0 | 120, 100%, 50% | |
| Blu puro | #0000FF | 0, 0, 255 | 240, 100%, 50% | |
| Giallo puro | #FFFF00 | 255, 255, 0 | 60, 100%, 50% | |
| Arancione scuro | #FF8C00 | 255, 140, 0 | 33, 100%, 50% | |
| Viola | #800080 | 128, 0, 128 | 300, 100%, 25% | |
| Rosa | #FFC0CB | 255, 192, 203 | 351, 100%, 86% | |
| Grigio medio | #808080 | 128, 128, 128 | 0, 0%, 50% | |
| Blu navy scuro | #1a3a5c | 26, 58, 92 | 210, 56%, 23% | |
| Blu corporate | #3586ff | 53, 134, 255 | 214, 100%, 60% |
Ogni modello di colore e pensato per un contesto specifico. Capire le differenze aiuta a scegliere il formato giusto per il proprio lavoro.
RGB (Red, Green, Blue) e il modello additivo usato da tutti i display digitali. Ogni canale va da 0 a 255. RGB(0,0,0) e nero, RGB(255,255,255) e bianco. Si usa in CSS, Photoshop, Figma e qualsiasi contesto digitale.
HEX e la rappresentazione esadecimale di RGB. #FF5733 corrisponde a RGB(255, 87, 51): i primi 2 caratteri sono R, i secondi G, gli ultimi B. E il formato piu usato in CSS/HTML per i colori.
CMYK (Cyan, Magenta, Yellow, Black) e il modello sottrattivo usato nelle stampanti. I valori vanno da 0 a 100%. Attenzione: un colore RGB brillante su schermo potrebbe non essere riproducibile esattamente in stampa CMYK (gamut diverso).
HSL (Hue, Saturation, Lightness) e HSV (Hue, Saturation, Value) sono piu intuitivi di RGB per creare varianti di un colore. Cambiando solo la luminosita in HSL si ottengono versioni chiare e scure dello stesso tono. CSS moderno supporta hsl() direttamente.
Ogni canale RGB (0-255) viene convertito in esadecimale (base 16) e concatenato con il simbolo #.
Esempio: RGB(255, 87, 51). 255 = FF, 87 = 57, 51 = 33. Risultato: #FF5733.
In JavaScript: '#' + r.toString(16).padStart(2,'0') + g.toString(16).padStart(2,'0') + b.toString(16).padStart(2,'0')
CMYK (Cyan, Magenta, Yellow, Key/Black) e il modello usato nella stampa professionale. E sottrattivo: mischia inchiostri invece di luci. I valori vanno da 0 a 100%.
Si usa quando si prepara un file per la stampa (brochure, biglietti da visita, manifesti). Se lavori solo per web usa RGB/HEX. Attenzione: alcuni colori RGB vividi (es. il verde brillante #00FF00) non sono riproducibili esattamente in CMYK.
Entrambi usano Hue (0-360) e Saturation (0-100%), ma il terzo parametro e diverso:
HSL e piu usato in CSS (supportato nativamente con hsl()). HSV e piu comune nei software di grafica come Photoshop e Figma.
color: #FF5733; o background-color: #1a3a5c;
Con 3 cifre quando ogni coppia e uguale: #FFF = #FFFFFF. Con 8 cifre aggiungi trasparenza: #FF573380 = rosso al 50% di opacita (gli ultimi 2 caratteri = alpha channel in esadecimale, 80 hex = 128 = 50%).
CSS moderno supporta anche hsl(11, 100%, 60%) e rgb(255, 87, 51) direttamente.
I colori complementari sono opposti sulla ruota cromatica (angolo HSL +180 gradi). Creano il massimo contrasto visivo. Esempi: rosso/verde, blu/arancione, viola/giallo.
Usi pratici: pulsanti call-to-action (background blu + testo/icona arancione), highlight di elementi importanti, link evidenziati. Non usare complementari puri in grandi quantita su testo: l'alto contrasto affatica la lettura.
Analoghi: colori adiacenti sulla ruota (H +/-30 e +/-60). Creano armonia naturale. Usali per sfondi, gradienti e design coerenti. Esempio: blu, azzurro, ciano.
Triadici: 3 colori a 120 gradi di distanza. Offrono varieta mantenendo equilibrio. Usali per palette vivaci con 3 elementi distinti. Esempio: rosso, giallo, blu (colori primari).