About Color Formats
Understanding Digital Color Models
Digital colors are represented using mathematical models that define how colors are created and displayed on screens and in print. The four most common formats are HEX, RGB, HSL, and CMYK. Each has its own use case and advantages depending on whether you are working with web design, graphic design, or print media.
HEX Color Format
HEX is the most widely used color format in web development. It represents colors as a six-digit hexadecimal number preceded by a hash symbol. The first two digits represent red, the middle two represent green, and the last two represent blue. Each pair ranges from 00 to FF, giving 256 possible values per channel and over 16.7 million possible colors total. For example, pure red is #FF0000 and white is #FFFFFF.
RGB Color Model
The RGB model represents colors as combinations of red, green, and blue light. Each channel ranges from 0 to 255. This additive color model is used by screens and displays. When all three channels are at maximum, the result is white. When all are at zero, the result is black. RGB values like rgb(255, 128, 0) are commonly used in CSS and design software.
HSL Color Model
HSL stands for Hue, Saturation, and Lightness. Hue is measured in degrees from 0 to 360 around the color wheel, where 0 is red, 120 is green, and 240 is blue. Saturation is a percentage from 0 to 100 representing color intensity. Lightness is a percentage from 0 which is black to 100 which is white, with 50 being the pure color. HSL is intuitive for designers because adjusting lightness or saturation is more natural than adjusting RGB channels independently.
CMYK for Print
CMYK is a subtractive color model used in printing. It stands for Cyan, Magenta, Yellow, and Key which is black. Each value is a percentage from 0 to 100. Unlike RGB which adds light, CMYK subtracts light from a white background. Converting between RGB and CMYK is not always exact because the RGB color space is larger than what can be reproduced in print, a concept known as the gamut.
Modelli di colore digitali
I principali modelli di colore: RGB (Red, Green, Blue) per schermi, valori 0-255 per canale. HEX è RGB in esadecimale: #FF0000 = rosso. HSL (Hue, Saturation, Lightness) è più intuitivo per modificare colori. CMYK (Cyan, Magenta, Yellow, Key) per stampa. La conversione RGB→HSL permette di cambiare tonalità senza alterare luminosità. Ogni modello ha il suo ambito ottimale di utilizzo nel flusso di lavoro digitale.
Il codice HEX
Il formato HEX è il più usato nel web: # seguito da 6 cifre esadecimali (0-9, A-F). Le prime due sono il rosso, le due centrali il verde, le ultime il blu. #FFFFFF = bianco, #000000 = nero, #FF0000 = rosso puro. I codici HEX a 3 cifre sono abbreviazioni: #F00 = #FF0000. I codici RGBA aggiungono il canale alpha per la trasparenza. Il formato è universale e supportato da CSS, HTML e JavaScript.
Conversione tra modelli
RGB→HEX: convertire ogni canale (0-255) in esadecimale a 2 cifre. RGB→HSL: normalizzare i valori a 0-1, trovare il massimo e minimo, calcolare H dalla differenza. CMYK→RGB: R = 255×(1-C)×(1-K). Queste conversioni sono implementate in tutte le librerie grafiche. Esistono anche spazi colore avanzati come LAB (perceptivamente uniform) e P3 (gamut allargato) usati nel design professionale e nella stampa.
Psicologia dei colori
I colori influenzano le emozioni: rosso = urgenza/passione, blu = fiducia/calm, verde = natura/salute, giallo = energia/attenzione, nero = eleganza/potere. Nel marketing, le aziende scelgono colori strategicamente: Facebook blu per fiducia, Coca-Cola rosso per energia, Starbucks verde per natura. La teoria dei colori (complementari, analoghi, triadici) guida i designer nella creazione di palette armoniose per marchi e interfacce.
Accessibilità dei colori
Nel design web, il contrasto dei colori è essenziale per l'accessibilità. Le WCAG 2.1 richiedono un rapporto di contrasto minimo di 4,5:1 per testo normale e 3:1 per testo grande. Il rapporto si calcola tra luminosità relativa dei colori. Strumenti come WebAIM Contrast Checker verificano la conformità. circa l'8% degli uomini e lo 0,5% delle donne ha daltonismo: usare colori distinguibili per tutti è non solo etico ma legalmente richiesto in molti contesti.
Colori nei diversi schermi
Lo stesso codice colore appare diverso su schermi diversi a causa del gamut e della calibrazione. Lo schermo standard sRGB copre circa il 35% dei colori visibili. Lo schermo P3 (Apple) copre circa il 45%. I monitor professionali da stampa coprono il 99% di Adobe RGB. Per un design coerente su tutti i dispositivi, usare colori entro il gamut sRGB e profili ICC. La calibrazione del monitor è essenziale per fotografi e designer professionisti.