Skip to content

Methodology

Metodologia dei colori

sRGB ovunque. HEX, RGB, HSL, HSV sono etichette diverse per lo stesso colore.

By Published

Il cluster Colorigestisce le conversioni tra quattro rappresentazioni dello stesso colore sottostante: HEX (#FF6B35), RGB (255, 107, 53), HSL (16°, 100%, 60%) e HSV (16°, 79%, 100%). Tutti e quattro descrivono un colore nello stesso spazio colore — sRGB— quindi le conversioni sono rietichettature algebriche, non rimappature percettive.

sRGB come ancoraggio universale

sRGB (Standard RGB) è lo spazio colore predefinito del web, definito dallo standard IEC 61966-2-1 nel 1999. Specifica i primari rosso, verde e blu esatti che si combinano per produrre qualsiasi colore visualizzabile, più una curva gamma non lineare che approssima la risposta di un tipico monitor CRT. I moderni LCD e OLED emulano questa curva.

Ogni colore HEX, ogni valore rgb(…), ogni hsl(…) CSS predefinito assume sRGB a meno che non sia diversamente specificato. I formati a gamut ampio più recenti (Display P3, Rec.2020) esistono ma richiedono opt-in esplicito tramite color(display-p3 …)o simili — fuori dall’ambito di questo cluster.

La matematica della conversione

HEX ↔ RGB

Conversione diretta di base: ogni coppia di cifre esadecimali è un byte (0-255). #FF6B35↔ rgb(255, 107, 53) esattamente, nessuna perdita di precisione. L’hex a tre cifre (#F63) è la scorciatoia per #FF6633.

RGB → HSL

Converti R, G, B nell’intervallo [0, 1]. Trova i canali massimo e minimo. Luminosità L = (max + min) / 2. La saturazione dipende dal fatto che L < 0,5 o no. La tonalità viene calcolata da quale canale è il massimo e le differenze relative tra i canali.

La formula completa è standard ed è implementata esattamente nella nostra libreria. La tonalità è riportata in gradi [0, 360); saturazione e luminosità in percentuale [0, 100].

RGB → HSV

Logica simile. Valore V = max. Saturazione S = (max − min) / max quando max ≠ 0. La tonalità è identica alla tonalità HSL.

HSL e HSV divergono sull’asse di saturazione. Un colore al 100% di saturazione HSV è completamente saturo; al 100% di saturazione HSL è completamente saturo solo a L = 0,5. I designer preferiscono HSL per regolare tinte e tonalità; gli editor di immagini spesso espongono HSV (Photoshop lo chiama “HSB” per “luminosità”).

Precisione del round-trip

HEX ↔ RGB è esatto a livello di bit. Entrambe le direzioni fanno round-trip senza perdite.

RGB ↔ HSL / RGB ↔ HSV coinvolgono l’aritmetica in virgola mobile. La precisione del round-trip è limitata dall’output RGB a 8 bit — il caso peggiore arrotonda un canale di ±1 su 255 (circa 0,4%). Visivamente è invisibile; per lavori critici con il colore evita il round-trip se puoi.

Dettagli dell’algoritmo: HSL e HSV completi

La libreria di conversione include queste formule letteralmente; vengono riprodotte qui così che l’algebra sia visibile. Input normalizzati R, G, B ∈ [0, 1] con M = max(R, G, B), m = min(R, G, B), croma C = M − m:

L = (M + m) / 2
S_HSL = C / (1 − |2L − 1|) se C ≠ 0, altrimenti 0
V = M
S_HSV = C / M se M ≠ 0, altrimenti 0

La tonalità è lo stesso asse in entrambi i modelli:

H = 60° × ((G − B) / C mod 6) se M = R
H = 60° × ((B − R) / C + 2) se M = G
H = 60° × ((R − G) / C + 4) se M = B

La linearizzazione sRGB, applicata quando si calcola la luminanza per il contrasto o si interpola percettivamente, è il trasferimento a tratti di IEC 61966-2-1: linear = c/12,92 se c ≤ 0,04045, altrimenti ((c + 0,055)/1,055)^2,4. Il round-trip attraverso il lineare e ritorno è esatto a livello di bit per la griglia sRGB a 8 bit perché l’inversa a tratti è ben definita.

Fonti e riferimenti

Ogni formula in questa pagina proviene da una specifica primaria o da una pubblicazione peer-reviewed: i primari e la gamma sRGB da IEC 61966-2-1, la sintassi CSS hex/rgb/hsl da W3C CSS Color Module Level 4, la conversione RGB↔HSV dall’articolo di Smith del 1978, la formula del contrasto da WCAG 2.2. Il blocco Fonti nella parte inferiore di questa pagina elenca le versioni disponibili al pubblico usate come verità di base durante i test della libreria.

Presupposti e limitazioni

  • sRGB ovunque. Gli input senza un tag di spazio colore esplicito sono assunti sRGB. Gli input P3 / Rec.2020 / Adobe RGB non vengono rilevati automaticamente e sarebbero interpretati male se passati come RGB grezzo.
  • RGB intero a 8 bit.L’input esadecimale si fissa a [0, 255] per canale. Le pipeline HDR a 10 o 12 bit richiedono un formato più ampio di #RRGGBB.
  • HSL/HSV sono reparametrizzazioni di convenienza, non spazi percettivi.Variazioni numeriche uguali in H, S o L non mappano a variazioni percettive uguali — usa OKLCH o CIELAB per il lavoro perceptualmente uniforme.
  • Nessun adattamento cromatico. La conversione tra spazi con diversi punti di bianco (D65 ↔ D50) richiede una trasformazione Bradford o CAT02 che non applichiamo.
  • CMYK richiede profili ICC. Le approssimazioni algebriche CMYK ≈ RGB sul web sono uniformemente errate per la stampa; non emettiamo affatto un valore CMYK.
  • L’alfa è passthrough, non premoltiplicato.Il round-trip attraverso HSL/HSV preserva il canale alfa ma non applica l’alfa ai componenti del colore.

Cosa non gestiamo

  • Spazi a gamut più ampio (P3, Rec.2020) — fuori ambito.
  • Spazi perceptualmente uniformi (Lab, LCH, Oklab) — a volte richiesti; l’algebra è più complessa. Potrebbe essere rilasciato come strumento separato in seguito.
  • CMYK — spazio colore specifico per la stampa; le conversioni richiedono profili ICC, non solo algebra. Vedi il nostro confronto RGB vs CMYK.
  • Alfa — RGB→HSL/HSV preservano l’alfa come passthrough. HEX con alfa (#RRGGBBAA) è supportato.

Frequently asked questions

Quale spazio colore usa Convertitive?
Tutte le conversioni usano sRGB (IEC 61966-2-1:1999) come spazio colore canonico. HEX, RGB, HSL e HSV sono tutte diverse rappresentazioni di coordinate dello stesso gamut sRGB — la conversione tra di loro è senza perdite. Gli spazi a gamut ampio (Display P3, Rec. 2020) non sono attualmente supportati; i valori sono sempre assunti essere sRGB.
Quale formula usa Convertitive per la conversione RGB ↔ HSL?
L'algoritmo standard di Foley & van Dam (Computer Graphics: Principles and Practice, 1990). Dati RGB normalizzati (r, g, b ∈ [0,1]): L = (max + min) / 2; S = (max − min) / (1 − |2L − 1|) quando L ≠ 0 o 1; H viene calcolato da quale canale è il massimo e le distanze relative tra i canali. L'inversa usa lo stesso termine di croma c = (1 − |2L − 1|) × S e la mappatura hue-to-RGB a sei settori.
Quanto è accurata la conversione HEX ↔ RGB?
Esatta e senza perdite. Un codice HEX come #FF6B35 mappa a rgb(255, 107, 53) con semplice decodifica base-16 di ogni coppia di byte — nessun floating-point coinvolto. La perdita di precisione avviene solo quando si converte in HSL o HSV, che usano la divisione in virgola mobile e ritornano a interi a 8 bit con un errore di arrotondamento di ±1 unità in casi estremi.
Quali sono le limitazioni del convertitore di colori?
Tre limitazioni principali: (1) solo sRGB — i valori Display P3 o OKLCH a gamut ampio non sono supportati; (2) 8 bit per canale — le rappresentazioni di colore HDR o a 10 bit sono fuori scala; (3) HSL/HSV sono acromatici (tonalità non definita) quando S = 0, quindi il convertitore visualizza H = 0 per i grigi, coerente con CSS Color Level 4 §4.2.
Da dove viene la formula della luminanza relativa?
La formula della luminanza relativa L = 0.2126 R + 0.7152 G + 0.0722 B (con linearizzazione tramite la funzione di trasferimento sRGB) è definita in WCAG 2.2 §1.4.3 (e nel suo riferimento normativo ICC.1:2010). Viene usata a valle per calcolare i rapporti di contrasto WCAG. I coefficienti riflettono la sensibilità del sistema visivo umano ai primari sRGB come definiti in ICC.1:2010.

Related

Published May 14, 2026