Spazio colore sRGB 2.2 display

Guarda un colore, una palette, un gradiente o un’immagine in ogni spazio colore. Dagli schermi alla stampa, dai selettori di colore alla ricerca, dal 1860 al 2026.

Utilizzo

JavaScript

L’intera libreria: 221 spazi, 71 kB con gzip – da qualsiasi spazio a qualsiasi altro, in entrambe le direzioni.

npm install color-space
import space from 'color-space'

space.rgb.oklch(255, 128, 0)      // → [0.732, 0.186, 53]
space.oklch.rgb(0.65, 0.1, 180)   // → [56.14, 162.97, 145.41]
space.oklch.range                 // [[0,1], [0,0.4], [0,360]]

Oppure un solo spazio: il bundle non contiene altro.

import oklch from 'color-space/oklch.js'

oklch.rgb(0.65, 0.1, 180)   // → [56.14, 162.97, 145.41]

Tipizzato: le dichiarazioni TypeScript sono incluse nel pacchetto, per l’intera libreria e per ogni spazio da solo.

Che cos’è uno spazio colore?

Un sistema di coordinate per il colore: assi, intervalli e una regola che collega i numeri alla luce misurabile. La visione umana è tricromatica, con tre tipi di coni (S, M, L), quindi tre coordinate sono il minimo per descrivere qualsiasi colore visibile all’occhio. Lo stesso arancione è rgb(255 128 0), oklch(0.732 0.186 53) e XYZ [49, 36.7, 4.5]. Una tavolozza è una selezione di colori; uno spazio permette di descrivere qualsiasi colore.

Modello di colore o spazio colore: qual è la differenza?

Un modello di colore definisce le componenti con cui descrivere un colore: tre primari in RGB, tinta, saturazione e chiarezza in HSL, quattro inchiostri in CMYK. Uno spazio colore specifica inoltre i primari, il punto di bianco e la curva di codifica, così che ogni insieme di valori corrisponda a un colore misurabile. Per questo rgb(255 0 0) indica rossi diversi in sRGB, Display P3 e Adobe RGB: un modello, tre spazi.

Nell’uso comune si chiamano entrambi spazi, anche in color-mix(in hsl, …) di CSS e in questo catalogo. Un modello può basarsi su uno spazio già definito: qui HSL e HSV usano sRGB come riferimento, come in CSS.

Quale spazio dovrei usare davvero?

Dipende dal compito:

  • archiviare e condividere immagini – sRGB, lo standard del web;
  • progettare palette e gradienti – OKLCH, percettivamente uniforme;
  • calcoli sulla luce (fusione, sfocatura, 3D) – RGB in luce lineare;
  • riprendere video e fare il color grading – lo spazio log della tua camera, con consegna in Rec. 709 o Rec. 2100;
  • misurare quanto due colori appaiono diversi – CIELAB o DIN99o.

Per vedere tutti gli spazi ordinati per compito, raggruppa il catalogo per uso.

Cosa usare al posto di HSL?

OKLCH. Mantiene gli stessi tre parametri – tinta, croma, chiarezza – ma la sua chiarezza è affidabile: in HSL il giallo a L=50 emette circa 13 volte la luce del blu a L=50, quindi L uguale non significa luminosità uguale. In OKLCH sì. CSS supporta oklch() nativamente.

Come converto hex in OKLCH?

Digitalo o incollalo nel campo colore in alto, per esempio #ff8000. Ogni spazio della pagina mostra subito quel colore; in OKLCH vale 0.732, 0.186, 53, che CSS scrive oklch(0.732 0.186 53). La scheda css di ogni spazio dà la forma da copiare, e nel codice è space.rgb.oklch(255, 128, 0).

Perché i colori della sfumatura sono spenti al centro?

Perché sono calcolati in sRGB codificato con gamma, dove la media dei numeri di due colori produce una luce più scura e spenta di quella che darebbe mescolare davvero le loro luci. Interpolare in OKLab lo evita; in CSS si scrive linear-gradient(in oklab, red, blue). La riga interpola verso della scheda di ogni spazio disegna la stessa sfumatura attraverso due spazi affiancati, così vedi la differenza prima di scegliere.

Come converto S-Log3 o un altro log di camera in Rec. 709?

Apri lo spazio log della tua camera, come S-Log3, LogC4 o Apple Log. Nel suo blocco LUT scegli Rec. 709 e il tuo programma: DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg e altri. Il file .cube viene generato direttamente nel browser. È una conversione tecnica senza tone mapping: le alte luci oltre il bianco diffuso vengono tagliate, e il look lo aggiungi tu.

Che cosa significa «fuori gamut»?

Un colore che uno spazio può descrivere ma un altro – o il tuo schermo – non può mostrare. Un verde Display P3 acceso non esiste in sRGB: convertilo e i numeri escono dall’intervallo valido. L’atlante lo rende sempre visibile: un ⚠ accanto al colore corrente segnala che è fuori dal Limite scelto, tenendo premuto Alt su un piano o una striscia si vede quale gamut più ampio serve a un colore in quel punto (P3, Rec. 2020), e i tratti fuori intervallo compaiono in trasparenza su una scacchiera.

Perché la stampa sembra più spenta dello schermo?

Uno schermo emette luce; la carta riflette ciò che i suoi inchiostri non assorbono. Con l’inchiostro su carta si ottengono meno colori vividi – i blu, i verdi e i rossi RGB saturi non rientrano nel suo gamut – e quindi in stampa risultano più spenti. In prestampa si converte con un profilo ICC specifico per la macchina da stampa e la carta, come FOGRA39 per la carta patinata europea o GRACoL negli Stati Uniti. Il CMYK di questo catalogo è la formula semplice che CSS usa per device-cmyk() senza profilo: corretta nei valori, ma non è una prova colore.

In quale spazio colore devo esportare le foto?

Per il web e la condivisione, sRGB: browser e telefoni lo danno per scontato quando un file non contiene un profilo. Display P3 conserva più colori di una scena vivace sugli schermi Apple e su molti Android, purché il profilo resti incorporato. Usa Adobe RGB se te lo chiede il laboratorio di stampa. Riserva ProPhoto RGB al ritocco a 16 bit: il suo gamut è così ampio che nei file a 8 bit compare la posterizzazione (banding).

Le conversioni sono esatte? Una conversione di andata e ritorno fa perdere dati?

Le conversioni sono formule chiuse, non approssimazioni tabellari, e una conversione di andata e ritorno restituisce il valore di partenza a meno degli errori di arrotondamento in virgola mobile. Le poche eccezioni sono documentate dove si presentano: OSA-UCS non ha un’inversa in forma chiusa, e i sistemi ad atlante come Munsell interpolano tra i gradi pubblicati. L’output in rgb non viene mai limitato: un colore fuori da sRGB risulta sotto 0 o sopra 255, quindi limitalo solo al momento di visualizzarlo.

E sono verificate: ogni spazio rimanda all’articolo o alla specifica che implementa, i valori sono confrontati con colorjs.io ovunque le due librerie si sovrappongano, e i log delle camere con le trasformazioni ACES ufficiali dell’Academy. formula-verification.md documenta che cosa è stato confrontato con che cosa, compresi alcuni punti in cui erano gli stessi articoli pubblicati a contenere errori.

Se i numeri differiscono da quelli di un’altra libreria, confronta gli intervalli: questa mantiene gli intervalli convenzionali di ogni spazio – RGB 0–255, chiarezza Lab 0–100, tinta 0–360 – mentre molte normalizzano tutto su 0–1. Ogni scheda mostra i suoi intervalli; nel codice sono space.oklch.range.

Quali di questi spazi si possono scrivere in CSS?

Nativamente rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), più color() per Display P3, Adobe RGB, ProPhoto, sRGB lineare e XYZ (D65 e D50). Il rec2020 di CSS è una gamma pura di 2.4, non la curva BT.2020 del Rec. 2020 di questo catalogo: gli stessi numeri indicherebbero un colore diverso. La scheda css di ogni spazio riporta il colore corrente in una forma pronta da copiare; per gli spazi che CSS non supporta ci sono invece profili ICC o LUT.

Come vedono i colori le persone daltoniche?

Apri Vista e scegli un’opzione in Visione: cecità al rosso (protanopia), cecità al verde (deuteranopia) o cecità al blu (tritanopia). Il catalogo viene ridisegnato come lo vede quell’occhio, così puoi controllare che i colori di una palette restino distinguibili. Circa 1 uomo su 12 ha un deficit della visione dei colori, secondo i dati del NEI.

Dove sono Pantone, NCS, RAL?

Sono prodotti su licenza: i loro colori sono definiti da dati che i proprietari vendono, non da formule pubblicate, quindi non c’è una matematica aperta da implementare, e ridistribuirne le tabelle non sarebbe legale. Qui trovi sistemi affini con una matematica pubblica: Munsell (i dati della rinotazione del 1943 sono pubblici) e RAL Design (definito direttamente in CIELAB). Ogni sistema la cui matematica sia mai stata pubblicata ha posto qui; suggeriscine uno che manca.

Alternative

Confronto tra librerie per la conversione del colore.
StrumentoSpaziLog di cameraLuma–cromasRGBUtilitàDimensioneVelocitàTarget
color-space20531160–255
parse mix ΔE contrast CVD
62 kBJS, WASM, GL, LUT, ICC, OCIO, MCP, Figma, VS Code, CLI, web
culori30–10–1
parse mix gamut ΔE contrast CVD
23 kBJS
colorjs.io51––0–1
parse mix gamut ΔE contrast
34 kBJS, web
chroma-js11––0–255
parse mix ΔE contrast palettes
17 kBJS
@texel/color16––0–1
parse gamut ΔE
9 kBJS
colour-science1282460–1
ΔE CVD
––Python, LUT
ColorAide77––0–1
parse mix gamut ΔE contrast CVD palettes
––Python
colorspace (R)9––0–1
mix contrast CVD palettes
––R, web
OpenColorIO5711–0–1
gamut
––C++, Python, GL, LUT, ICC
Bruce Lindbloom22––0–1, 0–255
ΔE
––web
oklch.com9––0–255
parse gamut
––web

Dal codice sorgente, dal pacchetto o dalla pagina di ciascun progetto, al 2026-10-18.

Copiato