De la a la , de los a la , a .
Compatibles con CSS, sombreadores, WASM y tablas de conversión de color (LUT).
Un paquete de JavaScript para convertir colores. Importa un espacio de menos de 1,5 kB, o todos para convertir entre cualquier par de espacios. Las mismas conversiones procesan imágenes completas con WASM, se ejecutan en sombreadores GLSL o WGSL y se pueden exportar como tablas LUT o perfiles ICC. Los agentes pueden invocarlas a través del servidor MCP.
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
Cualquier par como LUT .cube – para cargar en Resolve, Premiere, Final Cut, OBS o ffmpeg. Los log de cámara están verificados frente a las transformaciones ACES oficiales de los fabricantes.
Cualquier espacio como perfil .icc v2 – matriz + curva tonal para los espacios de trabajo RGB (Photoshop, gestión del color del sistema operativo) y una retícula CLUT para todo lo demás (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 sistema de coordenadas para el color: ejes, rangos y una regla que vincula los números con luz medible. El mismo naranja es rgb(255 128 0), oklch(0.732 0.186 53) y, en XYZ, [49, 36.7, 4.5] – el mismo color, escrito de tres maneras. Una paleta es un puñado de colores elegidos; un espacio es una forma de anotar cualquier color.
Un modelo de color define las componentes con las que se describe un color: tres primarios en RGB, matiz, saturación y claridad en HSL, y cuatro tintas en CMYK. Un espacio de color especifica además los primarios, el punto blanco y la curva de codificación, de modo que cada conjunto de valores corresponda a un color medible. Por eso rgb(255 0 0) describe rojos distintos en sRGB, Display P3 y Adobe RGB: un modelo, tres espacios.
En el uso habitual, ambos se llaman espacios, también en color-mix(in hsl, …) de CSS y en este catálogo. Un modelo puede tomar como referencia un espacio ya definido: aquí HSL y HSV se basan en sRGB, como en CSS.
Depende de la tarea:
Agrupar el catálogo por uso lo ordena de la misma manera.
OKLCH. Mantiene los mismos tres controles – matiz, croma, claridad –, pero su claridad es fiable: en HSL, el amarillo a L=50 emite unas 13 veces más luz que el azul a L=50, así que la misma L no significa el mismo brillo. En OKLCH, sí. CSS admite oklch() de forma nativa.
Porque se calculan en sRGB codificado con gamma, donde promediar los números de dos colores produce una luz más oscura y apagada que la que daría mezclar realmente su luz. Interpolar en OKLab lo evita. La fila interpolar de cada dosier traza la misma mezcla en dos espacios, uno junto al otro, para ver la diferencia antes de elegir.
Un color que un espacio puede describir pero que otro – o la pantalla – no puede mostrar. Un verde intenso de Display P3 simplemente no existe en sRGB: al convertirlo, los números quedan fuera del rango válido. El atlas lo mantiene a la vista: la etiqueta junto al color actual indica la gama estándar más ajustada que lo contiene, y los tramos fuera de rango se ven atenuados sobre un damero.
Una pantalla emite luz; el papel refleja lo que sus tintas no absorben. La tinta sobre papel alcanza menos colores vivos – los azules, verdes y rojos RGB saturados quedan fuera de su gama – así que se imprimen más apagados. La preimpresión convierte mediante un perfil ICC hecho para la prensa y el papel, como FOGRA39 para el estucado europeo o GRACoL en EE. UU. El CMYK de este catálogo es la fórmula simple que CSS usa para device-cmyk() sin perfil: correcta para los números, no una prueba de la impresión.
Las conversiones son fórmulas cerradas, no aproximaciones por tabla, y los viajes de ida y vuelta regresan dentro del ruido de coma flotante. Las pocas excepciones están documentadas donde ocurren: OSA-UCS no tiene inversa cerrada, los sistemas de atlas como Munsell interpolan entre los grados publicados y la salida rgb se limita a la gama sRGB – para obtener valores fuera de ella, conviene pasar por XYZ o por RGB lineal.
Además están verificadas: cada espacio enlaza el artículo o la especificación que implementa, los valores se prueban contra colorjs.io donde ambos coinciden, y los logs de cámara contra las transformaciones ACES oficiales de la Academia. formula-verification.md registra qué se comprobó contra qué – incluidos algunos lugares donde los propios artículos publicados tenían errores.
Si los números difieren de los de otra biblioteca, compara los rangos: esta conserva los rangos convencionales de cada espacio – RGB 0–255, claridad Lab 0–100, matiz 0–360 – donde muchas lo aplanan todo a 0–1. Cada tarjeta muestra sus rangos; en código son space.oklch.range.
De forma nativa, rgb(), hsl(), hwb(), lab(), lch(), oklab() y oklch(), más color() para Display P3, Adobe RGB, ProPhoto, sRGB lineal y XYZ (D65 y D50). El rec2020 de CSS es una gamma 2.4 pura, no la curva BT.2020 del Rec. 2020 de este catálogo – los mismos números nombrarían otro color. La pestaña css de cada dosier escribe el color actual en forma copiable; los espacios que CSS no tiene se ofrecen en su lugar como perfiles ICC o LUT.
Son productos con licencia: sus colores se definen mediante datos que venden sus propietarios, no mediante fórmulas publicadas – así que no hay matemáticas abiertas que implementar, y redistribuir sus tablas no sería legal. Aquí están parientes cercanos cuyas matemáticas son públicas: Munsell (su renotación de 1943 es de acceso público) y RAL Design (definido directamente en CIELAB). La regla general: si las matemáticas se publicaron alguna vez, tienen su lugar en la colección.
@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.2.0},
year = {2026}
}Ivanov, D. (2026). color-space (Version 3.2.0) [Computer software]. https://github.com/colorjs/color-space
Matiz–saturación–mezcla, creado para investigar la segmentación de piel.
Detección del color de la piel en procesamiento de imágenes; académico, de nicho.
Pasos numéricos iguales no se ven visualmente uniformes – para pasos perceptuales, mejor OKLab/OKLCH o un espacio uniforme.
componente
referido a la pantallaSDR
// one space, tree-shaken (0.4-1.5 kB) — its own edge: import hsm from 'color-space/hsm.js' hsm.rgb(0, 0.0, 50.2) // → [128, 128, 128] // any-to-any, both ways — the wired hub: import space from 'color-space' space.hsm.rgb(0, 0.0, 50.2) // → [128, 128, 128] space.rgb.hsm(128, 128, 128) // → [0, 0.0, 50.2]