168 spazi

Spazi colore

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

Usalo

Un pacchetto JavaScript per convertire i colori. Importa un singolo spazio da meno di 1.5 kB, oppure tutti per le conversioni tra qualsiasi coppia di spazi. Le stesse conversioni elaborano immagini intere con WASM, funzionano negli shader GLSL o WGSL e si possono esportare come tabelle LUT o profili ICC. Gli agenti possono richiamarle tramite il server MCP.

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)

// values in the notations CSS already speaks – straight from the library
color: oklch(0.732 0.186 53);            // space.rgb.oklch(255, 128, 0)
color: color(display-p3 0.936 0.529 0.199);  // space.rgb.p3(255, 128, 0)
color: color(xyz-d65 0.49 0.367 0.045);      // space.rgb.xyz(…) / 100 – exact interchange

// spaces CSS lacks ship as ICC profiles or LUTs – see those tabs;
// every dossier's css tab writes the current color in copyable forms

// per-space metadata – sourced, ships as data.json
import data from 'color-space/data.json' with { type: 'json' }

const m = data.spaces.oklch
m.channels   // [{symbol, min, max, name}, …]
m.refs       // defining spec / paper links
m.year, m.by // 2020, 'Björn Ottosson'

// scalar or whole-buffer, zero-copy – a true WASM kernel
import space, { alloc } from 'color-space/wasm'

space.oklch.rgb(0.72, 0.16, 41)   // → [246, 125, 79]

const buf = alloc(n)              // n×3 Float64Array
space.rgb.oklch(buf)              // in place – 27 spaces

// every pair as a GLSL shader chunk
import { glsl } from 'color-space/gl'
import oklch from 'color-space/gl/oklch'

const src = glsl(oklch, 'rgb')
// → self-contained: vec3 oklch_rgb(vec3 c)
//   paste into any fragment shader, no uniforms

// an MCP server – convert · gamut · css · space · spaces · cube –
// so an agent calls verified conversions instead of guessing them
npx -y color-space mcp

// Claude Code
claude mcp add color-space -- npx -y color-space mcp
// VS Code
code --add-mcp '{"name":"color-space","command":"npx","args":["-y","color-space","mcp"]}'
// Claude Desktop · Cursor · .mcp.json
{ "mcpServers": { "color-space": { "command": "npx", "args": ["-y", "color-space", "mcp"] } } }

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]: lo stesso colore, scritto in tre modi. 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.

Raggruppare il catalogo per scopo lo ordina allo stesso modo.

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.

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. La riga interpolate di ogni dossier disegna la stessa sfumatura attraverso due spazi affiancati, così vedi la differenza prima di scegliere.

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 semplicemente 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.

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.

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). La regola pratica: se la matematica è stata pubblicata, appartiene alla collezione.