
Dal web alla stampa, dai selettori di colore alla ricerca, dal 1860 al 2026. Supporto per CSS, shader, WASM e tabelle di conversione del colore (LUT).
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.
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 205 × 204 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
Qualsiasi coppia come LUT .cube: caricala in Resolve, Premiere, Final Cut, OBS o ffmpeg. I log delle camere sono verificati rispetto alle trasformazioni ACES ufficiali dei produttori.
Qualsiasi spazio come profilo .icc v2: matrice + curva tonale per gli spazi di lavoro RGB (Photoshop, gestione del colore del sistema operativo), un reticolo CLUT per tutto il resto (lcms, ArgyllCMS, ImageMagick).
// 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"] } } }
// un plugin Figma: riempimenti e tratti della selezione in uno qualsiasi dei 205 spazi – // un piano e una barra per canale, ritagliati sul gamut del file; copia il colore come CSS figma.com/community/plugin/1691970922817908383/color-space git clone https://github.com/colorjs/color-space // Figma desktop: clic destro › Plugins › Development › Import plugin from manifest… color-space/plugins/figma/manifest.json // cosa legge, scrive e conserva – plugins/figma
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.
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.
Dipende dal compito:
Per vedere tutti gli spazi ordinati per compito, raggruppa il catalogo per scopo.
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.
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é 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.
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.
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.
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.
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 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.
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.
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.
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.
@software{Ivanov_color-space_2026,
author = {Ivanov, Dmitry},
license = {CC0-1.0},
month = oct,
title = {{color-space}},
url = {https://github.com/colorjs/color-space},
version = {3.3.0},
year = {2026}
}Ivanov, D. (2026). color-space (Version 3.3.0) [Computer software]. https://github.com/colorjs/color-space
Un sostituto euclideo di CIE94: la semplice distanza nello spazio segue ΔE94, senza funzioni di ponderazione.
Misura delle tolleranze di colore industriali (vernici, plastiche); legacy, superato da DIN99o in DIN 6176:2018.
Le ellissi di tolleranza nei blu restano allungate: il difetto che le revisioni b/c/d del 2002 si proponevano di correggere.
opponenteriferito al displaySDRpercettivoD65
2001, DIN (FNF/FNL 2 committee)
DIN99 → CIELAB D65 → CIE XYZ → sRGB
// one space, tree-shaken (0.4-1.5 kB) — its own edge: import din99 from 'color-space/din99.js' din99['lab-d65'](64.7, 0, 0) // → [53.585, 0, 0] // any-to-any, both ways — the wired hub: import space from 'color-space' space.din99.rgb(64.7, 0, 0) // → [128, 128, 128] space.rgb.din99(128, 128, 128) // → [64.7, 0, 0] // route: din99 → lab-d65 → xyz → rgb