
Vom Web bis zum Druck, vom Farbwähler bis zur Forschung, 1860 bis 2026. Bereit für CSS, Shader, WASM und LUTs.
Ein einziges JavaScript-Paket. Dieselben Umrechnungen verarbeiten mit WASM ganze Bilder, laufen in GLSL- und WGSL-Shadern und lassen sich als LUTs und ICC-Profile exportieren.
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
Jedes Paar als .cube-LUT – laden Sie sie in Resolve, Premiere, Final Cut, OBS oder ffmpeg. Kamera-Logs sind gegen die offiziellen ACES-Herstellertransformationen geprüft.
Jeder Farbraum als .icc-Profil v2 – Matrix + Tonwertkurve für RGB-Arbeitsfarbräume (Photoshop, Farbmanagement des Betriebssystems), ein CLUT-Gitter für alles andere (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"] } } }
// ein Figma-Plugin: Füllungen und Konturen der Auswahl in jedem der 205 Farbräume – // eine Ebene und ein Balken je Kanal, auf den Farbumfang der Datei beschnitten; die Farbe als CSS kopieren figma.com/community/plugin/1691970922817908383/color-space git clone https://github.com/colorjs/color-space // Figma-Desktop-App: Rechtsklick › Plugins › Development › Import plugin from manifest… color-space/plugins/figma/manifest.json // was es liest, schreibt und speichert – plugins/figma
Ein Koordinatensystem für Farbe: Achsen, Wertebereiche und eine Regel, die die Zahlen an messbares Licht bindet. Dasselbe Orange ist rgb(255 128 0), oklch(0.732 0.186 53) und XYZ [49, 36.7, 4.5]. Eine Palette ist eine Handvoll ausgewählter Farben; ein Farbraum ist eine Art, überhaupt jede Farbe aufzuschreiben.
Ein Farbmodell legt fest, mit welchen Komponenten eine Farbe beschrieben wird: drei Primärfarben bei RGB, Buntton, Sättigung und Helligkeit bei HSL, vier Druckfarben bei CMYK. Ein Farbraum bestimmt zusätzlich die Primärvalenzen, den Weißpunkt und die Übertragungskurve. Damit entspricht jeder Satz von Zahlen einer eindeutig messbaren Farbe. Deshalb bezeichnet rgb(255 0 0) in sRGB, Display P3 und Adobe RGB jeweils ein anderes Rot: ein Modell, drei Farbräume.
Im Alltag werden beide als Farbräume bezeichnet, auch in CSS mit color-mix(in hsl, …) und in diesem Katalog. Ein Modell kann einen bestehenden Farbraum als Grundlage verwenden: HSL und HSV basieren hier auf sRGB, wie in CSS.
Das hängt von der Aufgabe ab:
Um alle Farbräume nach Aufgabe sortiert zu sehen, gruppieren Sie den Katalog nach Zweck.
OKLCH. Es behält dieselben drei Regler – Buntton, Buntheit, Helligkeit –, aber seine Helligkeit ist verlässlich: In HSL strahlt Gelb bei L=50 etwa 13-mal so viel Licht ab wie Blau bei L=50, gleiches L heißt also nicht gleiche Helligkeit. In OKLCH schon. CSS unterstützt oklch() nativ.
Tippen oder fügen Sie den Hex-Wert oben in das Farbfeld ein, etwa #ff8000. Jeder Farbraum auf der Seite zeigt diese Farbe sofort; in OKLCH sind es 0.732, 0.186, 53, in CSS geschrieben oklch(0.732 0.186 53). Der Tab css jedes Dossiers liefert die kopierfertige Form, im Code heißt es space.rgb.oklch(255, 128, 0).
Weil sie im gammakodierten sRGB berechnet werden, wo das Mitteln der Zahlen zweier Farben dunkleres, stumpferes Licht ergibt, als es das Mischen ihres Lichts täte. Interpolation in OKLab vermeidet das; in CSS schreibt man linear-gradient(in oklab, red, blue). Die Zeile interpolate jedes Dossiers zeichnet dieselbe Mischung durch zwei Farbräume nebeneinander, sodass der Unterschied vor der Wahl sichtbar ist.
Öffnen Sie den Log-Farbraum Ihrer Kamera, etwa S-Log3, LogC4 oder Apple Log. Wählen Sie in seinem Block Umrechnungs-LUT das Ziel Rec. 709 und Ihre Software: DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg und weitere. Ihr Browser erzeugt die .cube-Datei. Es ist eine technische Umrechnung ohne Tone Mapping: Lichter über dem diffusen Weiß werden abgeschnitten, und der Look bleibt Ihnen überlassen.
Eine Farbe, die ein Farbraum beschreiben, ein anderer – oder Ihr Bildschirm – aber nicht zeigen kann. Ein leuchtendes Grün aus Display P3 gibt es in sRGB nicht: Umgerechnet fallen die Zahlen aus dem gültigen Bereich. Der Atlas macht das sichtbar: Die Plakette neben der aktuellen Farbe nennt den engsten Standard-Farbumfang, der sie enthält, und Strecken außerhalb des Bereichs liegen blass über einem Schachbrett.
Ein Bildschirm strahlt Licht ab; Papier reflektiert, was seine Druckfarben nicht absorbieren. Druckfarbe auf Papier erreicht weniger leuchtende Farben – gesättigte RGB-Blau-, -Grün- und -Rottöne liegen außerhalb –, also werden sie stumpfer gedruckt. Die Druckvorstufe wandelt über ein ICC-Profil für Druckmaschine und Papier um, etwa FOGRA39 für europäisches gestrichenes Papier oder GRACoL in den USA. Das CMYK dieses Katalogs ist die einfache Formel, die CSS für device-cmyk() ohne Profil verwendet – richtig für die Zahlen, kein Proof des Drucks.
Für das Web und zum Teilen sRGB: Browser und Smartphones gehen davon aus, wenn eine Datei kein Profil mitbringt. Display P3 bewahrt auf Apple- und vielen Android-Bildschirmen mehr von einer leuchtenden Szene, solange das Profil eingebettet bleibt. Adobe RGB schicken Sie, wenn ein Fotolabor danach fragt. ProPhoto RGB gehört in die 16-Bit-Bearbeitung: Sein Farbumfang ist so groß, dass 8-Bit-Dateien Tonwertabrisse zeigen.
Umrechnungen sind geschlossene Formeln, keine Näherungen über Tabellen, und Hin- und Rückwege landen innerhalb des Gleitkommarauschens. Die wenigen Ausnahmen sind dort dokumentiert, wo sie auftreten: OSA-UCS hat keine geschlossene Umkehrung, Atlas-Systeme wie Munsell interpolieren zwischen veröffentlichten Stufen, und die Ausgabe von rgb wird auf den sRGB-Farbumfang begrenzt – den Weg über XYZ oder lineares RGB nehmen, wenn Werte außerhalb gebraucht werden.
Sie sind auch geprüft: Jeder Farbraum verlinkt das Paper oder die Spezifikation, die er umsetzt, Werte werden überall, wo sich beide überschneiden, gegen colorjs.io getestet, die Kamera-Logs gegen die offiziellen ACES-Transformationen der Academy. formula-verification.md hält fest, was wogegen geprüft wurde – einschließlich einiger Stellen, an denen schon die veröffentlichten Paper Fehler enthielten.
Weichen die Zahlen von denen einer anderen Bibliothek ab, die Wertebereiche vergleichen: Diese hier behält die üblichen Bereiche jedes Farbraums – RGB 0–255, Lab-Helligkeit 0–100, Buntton 0–360 –, wo viele alles auf 0–1 abflachen. Jede Karte zeigt ihre Bereiche; im Code stehen sie in space.oklch.range.
Nativ rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), dazu color() für Display P3, Adobe RGB, ProPhoto, lineares sRGB und XYZ (D65 und D50). CSS-rec2020 ist ein reines Gamma 2.4, nicht die BT.2020-Kurve von Rec. 2020 in diesem Katalog – dieselben Zahlen bezeichnen eine andere Farbe. Der Tab css jedes Dossiers schreibt die aktuelle Farbe kopierfertig aus; Farbräume, die CSS fehlen, gibt es stattdessen als ICC-Profile oder LUTs.
Öffnen Sie Ansicht und wählen Sie unter Sehen eine Variante: rotblind (Protanopie), grünblind (Deuteranopie) oder blaublind (Tritanopie). Der Katalog wird so neu gezeichnet, wie dieses Auge ihn sieht, sodass Sie prüfen können, ob die Farben einer Palette unterscheidbar bleiben. Etwa 1 von 12 Männern hat eine Farbsehschwäche, nach Angaben des NEI.
Das sind lizenzierte Produkte: Ihre Farben sind durch Daten definiert, die die Eigentümer verkaufen, nicht durch veröffentlichte Formeln – es gibt also keine offene Mathematik zum Umsetzen, und ihre Tabellen weiterzugeben wäre nicht legal. Nahe Verwandte mit öffentlicher Mathematik sind hier: Munsell (seine Renotation von 1943 ist öffentlich) und RAL Design (direkt in CIELAB definiert). Jedes System, dessen Mathematik je veröffentlicht wurde, gehört hierher; schlagen Sie ein fehlendes vor.
@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
IPT neu angepasst, um Bunttonlinearität gegen Gleichabständigkeit abzuwägen.
Neu angepasstes IPT, das Bunttonlinearität und Gleichabständigkeit ausbalanciert, für die Forschung zu Farbabständen und Gamut-Mapping; akademisch.
Auf denselben Datensätzen trainiert und getestet, wie die Autoren selbst anmerken.
GegenfarbendisplaybezogenSDRwahrnehmungsbasiertD65
2021, Luvin Munish Ragoo & Ivar Farup
IPT plus der Name des Erstautors, Ragoo (Ragoo & Farup 2021)
// one space, tree-shaken (0.4-1.5 kB) — its own edge: import iptRagoo from 'color-space/ipt-ragoo.js' iptRagoo.xyz(0.54, 0, 0) // → [20.5166, 21.5861, 23.5085] // any-to-any, both ways — the wired hub: import space from 'color-space' space['ipt-ragoo'].rgb(0.54, 0, 0) // → [128, 128, 128] space.rgb['ipt-ragoo'](128, 128, 128) // → [0.54, 0, 0] // route: ipt-ragoo → xyz → rgb