Selettore di colori e convertitore

Modelli di colore

Un modello di colore è un sistema per descrivere i colori come numeri. Diversi modelli vengono utilizzati in diversi contesti a seconda che l'output sia uno schermo, una stampante o una specifica di design.

RGB / RGBA

Formato

RGB definisce i colori mescolando luce rossa, verde e blu. Ogni canale va da 0 a 255. rgb(255, 0, 0) è rosso puro. rgb(255, 255, 255) è bianco. Il canale A (alfa) aggiunge la trasparenza, da 0 (completamente trasparente) a 1 (completamente opaco). Ad esempio, rgba(255, 0, 0, 0.5) è rosso semi-trasparente. RGB è il modello di colore nativo per schermi e display digitali.

Storia

Il modello RGB ha le sue radici nella teoria della visione tricromatica di Young-Helmholtz del XIX secolo. James Clerk Maxwell condusse i primi esperimenti di fotografia a colori RGB nel 1861. RGB divenne lo standard per i display elettronici con lo sviluppo dei televisori CRT a colori negli anni '30 e '40, e fu successivamente adottato per i monitor dei computer. Lo spazio colore sRGB fu formalmente adottato come standard web in HTML 3.2 nel gennaio 1997.

HEX / HEXA

Formato

HEX è una notazione compatta per i valori RGB usando l'esadecimale. #FF0000 è uguale a rgb(255, 0, 0). Ogni coppia di cifre esadecimali rappresenta un canale: #RRGGBB. La forma a 8 cifre #RRGGBBAA aggiunge un canale alfa, dove 00 è completamente trasparente e FF è completamente opaco. Ad esempio, #FF000080 è rosso al 50% di opacità. Le forme abbreviate come #F00 si espandono in #FF0000.

Storia

La notazione dei colori esadecimali ha avuto origine nei primi browser web a metà degli anni '90. Le prime versioni di Mosaic e Netscape Navigator ereditarono il sistema di nomi dei colori X11. CSS Level 1, pubblicato nel dicembre 1996 da Hakon Wium Lie e Bert Bos, standardizzò formalmente i tripletti esadecimali come modo principale per specificare i colori sul web.

HSL / HSLA

Formato

HSL descrive il colore come tonalità, saturazione e luminosità. La tonalità è un grado sulla ruota dei colori (0-360): 0 è rosso, 120 è verde, 240 è blu. La saturazione (0-100%) controlla l'intensità del colore. La luminosità (0-100%) controlla la brillantezza, dove 0% è nero e 100% è bianco. HSL è spesso più intuitivo di RGB per selezionare i colori perché è possibile regolare luminosità e saturazione indipendentemente.

Storia

HSL fu descritto per la prima volta da George H. Joblove e Donald Greenberg in un articolo del 1978 su Computer Graphics. Fu creato per risolvere un problema fondamentale con RGB: mescolare valori rosso, verde e blu è poco intuitivo per gli esseri umani. HSL riorganizza lo spazio colore RGB in modo che artisti e designer possano pensare in termini di colore (tonalità), vivacità (saturazione) e brillantezza (luminosità), che si avvicina maggiormente al modo in cui le persone descrivono naturalmente i colori.

HSV / HSB

Formato

HSV (tonalità, saturazione, valore) è simile a HSL ma utilizza il "valore" (luminosità) al posto della luminosità. Al 100% di valore, i colori completamente saturi sono puri e brillanti. HSV si mappa più naturalmente al funzionamento dei selettori di colore: il pannello saturazione/luminosità regola S e V mentre il cursore della tonalità regola H.

Storia

HSV fu descritto da Alvy Ray Smith nell'agosto 1978 mentre lavorava al Computer Graphics Lab del New York Institute of Technology. Fu pubblicato nello stesso numero di Computer Graphics di HSL. Smith progettò HSV per l'uso in un primo programma di pittura digitale, dove gli artisti avevano bisogno di un modo intuitivo per selezionare i colori sullo schermo. Il modello cilindrico di HSV lo rese naturale da implementare come selettore di colore con un cursore di tonalità e un pannello saturazione/luminosità.

CMYK

Formato

CMYK (ciano, magenta, giallo, nero/key) è utilizzato nella stampa. Mentre RGB è additivo (luce), CMYK è sottrattivo (inchiostro). Ogni valore rappresenta la percentuale di quell'inchiostro applicato. cmyk(0, 100, 100, 0) produce rosso. La conversione tra RGB e CMYK è approssimativa perché coprono gamme di colori (gamut) diverse.

Storia

Le basi del CMYK risalgono a Jacob Christoph Le Blon, che inventò la stampa a colori in mezzitoni usando lastre di rame separate intorno al 1710. Inizialmente usò lastre rosso, giallo e blu, e successivamente aggiunse una lastra nera per contorni e testo più nitidi. Il moderno processo di stampa a quattro colori CMYK fu implementato per la prima volta negli anni 1890 per le illustrazioni a colori dei giornali. La lastra nera è chiamata lastra "chiave" (key) perché contiene i dettagli fini a cui le altre lastre sono allineate.

Formati colore CSS

Il CSS moderno supporta diverse notazioni di colore:

• #FF5733 o #ff5733 (HEX)
• rgb(255, 87, 51) o rgba(255, 87, 51, 0.5)
• hsl(14, 100%, 60%) o hsla(14, 100%, 60%, 0.5)
• Colori nominali: red, cornflowerblue, rebeccapurple (148 colori nominali in totale)