168 spazi

Dal alla , dai alla , dal al .
Supporto per CSS, shader, WASM e tabelle di conversione del colore (LUT).

Utilizzo

Un solo pacchetto JavaScript. Le stesse conversioni elaborano immagini intere con WASM, funzionano negli shader GLSL e WGSL e si esportano come tabelle LUT e profili ICC.

  • Verificato con valori di riferimentotest per ogni spazio
  • In entrambe le direzionida qualsiasi spazio a qualsiasi altro
  • Minuscolo0.4–1.5 kB per spazio
  • Pubblico dominioCC0
import space from 'color-space'

space.rgb.oklch(255, 128, 0)      // → [0.732, 0.186, 53]
space.oklch.rgb(0.65, 0.25, 180)  // any of 168 × 167 pairs

space.oklch.name    // 'oklch'
space.oklch.range   // [[0,1], [0,0.4], [0,360]]

// one space only – tree-shaken, 0.4-1.5 kB
import oklch from 'color-space/oklch.js'
oklch.rgb(0.65, 0.25, 180)
Che cos’è uno spazio colore?

Un sistema di coordinate per il colore: assi, intervalli e una regola che lega i numeri a una luce misurabile. Lo stesso arancione è rgb(255 128 0), oklch(0.732 0.186 53) e XYZ [49, 36.7, 4.5]. Una palette è una manciata di colori scelti; uno spazio è un modo per scrivere 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, dove passi uguali appaiono uguali;
  • calcoli sulla luce (fusione, sfocatura, 3D) – RGB in luce lineare;
  • riprendere e fare il color grading di video – lo spazio log della tua camera, consegnato 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 scopo.

Cosa usare al posto di HSL?

OKLCH. Mantiene gli stessi tre controlli – 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 dossier dà la forma da copiare, e nel codice è space.rgb.oklch(255, 128, 0).

Perché i miei gradienti diventano fangosi 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 interpolate di ogni dossier 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 di conversione scegli Rec. 709 e il tuo programma: DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg e altri. Il browser scrive il file .cube. È 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 tiene in vista: la pillola accanto al colore corrente indica il gamut standard più stretto che lo contiene, e i tratti fuori intervallo sfumano 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. L’inchiostro su carta raggiunge meno colori accesi – i blu, i verdi e i rossi RGB saturi ne restano fuori – e quindi in stampa risultano più spenti. La prestampa converte attraverso un profilo ICC fatto per quella macchina e quella 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: giusto per i numeri, non una prova di stampa.

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. Invia Adobe RGB quando un laboratorio di stampa lo chiede. Riserva ProPhoto RGB al ritocco a 16 bit: il suo gamut è così ampio che i file a 8 bit mostrano bande.

Le conversioni sono esatte? Andata e ritorno perdono dati?

Le conversioni sono formule chiuse, non approssimazioni per tabella, e i viaggi di andata e ritorno tornano al punto di partenza entro il rumore della virgola mobile. Le poche eccezioni sono documentate dove si presentano: OSA-UCS non ha un’inversa in forma chiusa, i sistemi ad atlante come Munsell interpolano tra i gradi pubblicati e l’output rgb viene limitato al gamut sRGB: passa per XYZ o per l’RGB lineare quando ti servono valori fuori da esso.

E sono verificate: ogni spazio rimanda all’articolo o alla specifica che implementa, i valori sono testati contro colorjs.io ovunque i due si sovrappongano e i log delle camere contro le trasformazioni ACES ufficiali dell’Academy. formula-verification.md registra cosa è stato verificato contro 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 – dove molte appiattiscono tutto a 0–1. Ogni scheda mostra i suoi intervalli; nel codice sono space.oklch.range.

Quali di questi può scrivere 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 dossier scrive il colore corrente in forma copiabile; gli spazi che CSS non ha si distribuiscono invece come 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 il conteggio 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 parenti stretti la cui matematica è pubblica: Munsell (la sua rinotazione del 1943 è di pubblico dominio) e RAL Design (definito direttamente in CIELAB). Ogni sistema la cui matematica sia mai stata pubblicata ha posto qui; suggeriscine uno che manca.

Copiato