> convertire | anteprima | scegliere <
// Converti tra i formati di colore HEX, RGB, HSL, HSV e CMYK
Anteprima colore
Anteprima dal vivo si aggiorna istantaneamente.
Input in qualsiasi formato
Tutti i formati si aggiornano automaticamente.
5 formati colore
Converti tra HEX, RGB, HSL, HSV/HSB e CMYK.
// SUI FORMATI COLORE
Modelli di colore:
I colori possono essere rappresentati con diversi modelli: RGB additivo per schermi, CMYK sottrattivo per la stampa, HEX come RGB compatto, e HSL/HSV.
Esempio:
#FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
Casi d uso comuni:
- >Sviluppo web: colori CSS in HEX, RGB o HSL
- >Design per stampa: conversione da RGB a CMYK
- >Design UI: HSL per regolazioni intuitive
- >Linee guida del brand: colori coerenti
- >Accessibilita: verifica rapporti di contrasto
>> domande frequenti
Q: HEX vs RGB?
HEX and RGB represent the same color model in different notations. HEX uses hexadecimal (#FF5733) while RGB uses decimal (rgb(255, 87, 51)).
Q: HSL?
HSL = Hue, Saturation, Lightness. More intuitive for humans. CSS supports hsl() natively.
Q: CMYK?
CMYK is for print. Not all RGB colors can be reproduced in CMYK.
Q: CSS color formats?
Modern browsers support HEX, RGB, HSL, named colors, hwb(), lab(), lch(), oklch().
Q: Accessibility?
Color format does not directly affect accessibility. WCAG 2.1 requires 4.5:1 minimum contrast for normal text.
// Colori comuni in HEX, RGB e HSL
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
// Notazioni di colore CSS e conversione
color: #ff8000; color: #f80; /* shorthand for #ff8800 */ color: #ff800080; /* 8 digits: last two = alpha */ color: rgb(255 128 0); color: rgb(255 128 0 / 50%); color: hsl(30 100% 50%); #FF8000 -> FF=255 80=128 00=0 -> rgb(255, 128, 0)
>> Altre domande
D: Come converto HEX in RGB a mano?
R: Dividi il codice in coppie e converti ogni coppia da esadecimale a decimale: #FF8000 → FF = 255, 80 = 128, 00 = 0, cioè rgb(255, 128, 0).
D: Cosa significano la forma breve (#F80) e l’HEX a 8 cifre?
R: #F80 è l’abbreviazione di #FF8800 (ogni cifra viene raddoppiata). Con 8 cifre (#RRGGBBAA) le ultime due sono il canale alfa, cioè l’opacità.
D: Perché i colori in stampa sono diversi da quelli a schermo?
R: Gli schermi mescolano luce in modo additivo (RGB) e coprono una gamma più ampia; la stampa mescola inchiostri in modo sottrattivo (CMYK). Verdi, blu e neon vivaci spesso si stampano solo in modo approssimato: verifica con una prova colore.