
Du web à l’impression, des sélecteurs de couleur à la recherche, 1860 à 2026. Prise en charge de CSS, des shaders, de WASM et des tables de conversion des couleurs (LUT).
Un seul paquet JavaScript. Les mêmes conversions traitent des images entières avec WASM, s’exécutent dans des shaders GLSL et WGSL, et s’exportent en tables LUT et en profils 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
N’importe quelle paire en LUT .cube : chargez-la dans Resolve, Premiere, Final Cut, OBS ou ffmpeg. Les logs de caméra sont vérifiés contre les transformations ACES officielles des fabricants.
N’importe quel espace en profil .icc v2 : matrice + courbe tonale pour les espaces de travail RGB (Photoshop, gestion des couleurs du système), réseau CLUT pour tout le reste (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 : remplissages et contours de la sélection dans n’importe lequel des 205 espaces – // un plan et une barre par canal, découpés au gamut du fichier ; copiez la couleur en CSS figma.com/community/plugin/1691970922817908383/color-space git clone https://github.com/colorjs/color-space // Figma pour ordinateur : clic droit › Plugins › Development › Import plugin from manifest… color-space/plugins/figma/manifest.json // ce qu’il lit, écrit et conserve – plugins/figma
Un système de coordonnées pour la couleur : des axes, des plages et une règle qui relie les nombres à une lumière mesurable. Le même orange s’écrit rgb(255 128 0), oklch(0.732 0.186 53) et XYZ [49, 36.7, 4.5]. Une palette est une poignée de couleurs choisies ; un espace est une manière d’écrire n’importe quelle couleur.
Un modèle de couleur définit les composantes utilisées pour décrire une couleur : trois primaires pour RGB, teinte, saturation et clarté pour HSL, quatre encres pour CMYK. Un espace colorimétrique précise les primaires, le point blanc et la courbe de codage. Chaque ensemble de valeurs correspond alors à une couleur mesurable. Ainsi, rgb(255 0 0) désigne des rouges différents en sRGB, Display P3 et Adobe RGB : un modèle, trois espaces.
Dans l’usage courant, les deux sont appelés espaces, y compris dans color-mix(in hsl, …) en CSS et dans ce catalogue. Un modèle peut prendre un espace existant comme référence : ici, HSL et HSV sont définis à partir de sRGB, comme en CSS.
Tout dépend de la tâche :
Pour voir tous les espaces classés par tâche, regroupez le catalogue par usage.
OKLCH. Il garde les trois mêmes réglages – teinte, chroma, clarté –, mais sa clarté est fiable : en HSL, le jaune à L=50 émet environ 13 fois plus de lumière que le bleu à L=50 ; un même L ne veut donc pas dire une même luminosité. En OKLCH, si. CSS prend en charge oklch() en natif.
Saisissez-la ou collez-la dans le champ de couleur en haut, par exemple #ff8000. Chaque espace de la page affiche aussitôt cette couleur ; en OKLCH, elle vaut 0.732, 0.186, 53, ce que CSS écrit oklch(0.732 0.186 53). L’onglet css de chaque fiche donne la forme à copier, et en code c’est space.rgb.oklch(255, 128, 0).
Parce qu’ils sont calculés en sRGB encodé en gamma, où moyenner les nombres de deux couleurs donne une lumière plus sombre et plus terne que le mélange réel de leurs lumières. Interpoler en OKLab l’évite ; en CSS, cela s’écrit linear-gradient(in oklab, red, blue). La ligne interpoler de chaque fiche trace le même dégradé dans deux espaces côte à côte : vous voyez la différence avant de choisir.
Ouvrez l’espace log de votre caméra, comme S-Log3, LogC4 ou Apple Log. Dans son bloc LUT de conversion, choisissez Rec. 709 et votre logiciel : DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg et d’autres. Votre navigateur génère le fichier .cube. C’est une conversion technique, sans mappage tonal : les hautes lumières au-dessus du blanc diffus sont écrêtées, et c’est à vous d’ajouter le look.
Une couleur qu’un espace peut décrire mais qu’un autre – ou votre écran – ne peut pas afficher. Un vert vif de Display P3 n’existe pas en sRGB : convertissez-le, et les nombres sortent de la plage valide. L’atlas le rend visible : la pastille à côté de la couleur courante nomme le plus petit gamut standard qui la contient, et les tronçons hors plage apparaissent en transparence sur un damier.
Un écran émet de la lumière ; le papier réfléchit ce que ses encres n’absorbent pas. L’encre sur papier atteint moins de couleurs vives – les bleus, verts et rouges RGB saturés lui échappent –, d’où une impression plus terne. Le prépresse convertit via un profil ICC établi pour la presse et le papier, comme FOGRA39 pour le couché européen ou GRACoL aux États-Unis. Le CMYK de ce catalogue est la formule simple qu’utilise CSS pour device-cmyk() sans profil : juste pour les nombres, pas une épreuve de l’impression.
Pour le web et le partage, sRGB : navigateurs et téléphones l’appliquent par défaut quand un fichier n’embarque aucun profil. Display P3 préserve davantage d’une scène vive sur les écrans Apple et sur de nombreux écrans Android, tant que le profil reste incorporé. Envoyez vos fichiers en Adobe RGB quand un laboratoire d’impression le demande. Réservez ProPhoto RGB à l’édition en 16 bits : son gamut est si large que les fichiers 8 bits présentent des bandes.
Les conversions sont des formules fermées, pas des approximations par table, et les allers-retours reviennent au point de départ au bruit du calcul flottant près. Les rares exceptions sont documentées là où elles surviennent : OSA-UCS n’a pas d’inverse analytique, les systèmes d’atlas comme Munsell interpolent entre les échelons publiés, et la sortie rgb est bornée au gamut sRGB : passez par XYZ ou par RGB linéaire s’il vous faut des valeurs au-delà.
Elles sont aussi vérifiées : chaque espace renvoie à l’article ou à la spécification qu’il implémente, les valeurs sont testées contre colorjs.io partout où les deux se recoupent, et les logs de caméra contre les transformations ACES officielles de l’Academy. formula-verification.md consigne ce qui a été vérifié contre quoi, y compris quelques endroits où les articles publiés comportaient eux-mêmes des erreurs.
Si les nombres diffèrent de ceux d’une autre bibliothèque, comparez les plages : celle-ci garde les plages usuelles de chaque espace – RGB 0–255, clarté Lab 0–100, teinte 0–360 – là où beaucoup ramènent tout à 0–1. Chaque carte affiche ses plages ; dans le code, c’est space.oklch.range.
En natif : rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), plus color() pour Display P3, Adobe RGB, ProPhoto, sRGB linéaire et XYZ (D65 et D50). Le rec2020 de CSS est un gamma 2.4 pur, pas la courbe BT.2020 du Rec. 2020 de ce catalogue : les mêmes nombres y désigneraient une autre couleur. L’onglet css de chaque fiche écrit la couleur courante sous une forme copiable ; les espaces absents de CSS sont fournis à la place en profils ICC ou en LUT.
Ouvrez Vue et choisissez une option sous Vision : aveugle au rouge (protanopie), aveugle au vert (deutéranopie) ou aveugle au bleu (tritanopie). Le catalogue se redessine tel que cet œil le voit, ce qui permet de vérifier que les couleurs d’une palette restent distinctes. Environ 1 homme sur 12 présente un trouble de la vision des couleurs, selon le décompte du NEI.
Ce sont des produits sous licence : leurs couleurs sont définies par des données que leurs propriétaires vendent, non par des formules publiées. Il n’y a donc pas de mathématiques ouvertes à implémenter, et redistribuer leurs tables serait illégal. Des proches parents aux mathématiques publiques figurent ici : Munsell (sa renotation de 1943 est du domaine public) et RAL Design (défini directement en CIELAB). Tout système dont les mathématiques ont un jour été publiées a sa place ici ; proposez-en un qui manque.
@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 espace d’édition 8 bits sûr, entre l’écrêtage des cyans de ColorMatch RGB et l’excès non imprimable d’Adobe RGB (1998).
Espace de travail RGB à gamut modéré pour les images 8 bits fortement retouchées ; hérité.
Écrête les jaunes pleinement saturés à peu près autant qu’Adobe RGB (1998).
composantesréféré à l’affichageSDRgammaD65
1998, Bruce Fraser
nommé d’après son auteur, Bruce Fraser
// one space, tree-shaken (0.4-1.5 kB) — its own edge: import brucergb from 'color-space/brucergb.js' brucergb.xyz(0.5, 0.5, 0.5) // → [20.5166, 21.5861, 23.5085] // any-to-any, both ways — the wired hub: import space from 'color-space' space.brucergb.rgb(0.5, 0.5, 0.5) // → [128, 128, 128] space.rgb.brucergb(128, 128, 128) // → [0.5, 0.5, 0.5] // route: brucergb → xyz → rgb