168 пространств

Цветовые пространства

От до , от до , –.
Поддержка CSS, шейдеров, WASM и таблиц преобразования цветов (LUT).

Как использовать

Пакет для преобразования цветов в JavaScript. Одно пространство занимает менее 1,5 КБ; импорт всех пространств позволяет преобразовывать цвета между любыми из них. Те же преобразования обрабатывают целые изображения в WASM и выполняются в шейдерах GLSL или WGSL. Их можно экспортировать как таблицы LUT и ICC-профили. Агенты могут вызывать преобразования через MCP-сервер.

Проверено по эталонампроверено каждое пространство
В обе стороныиз любого пространства в любое
Малый размер0,4–1,5 КБ на пространство
Общественное достояниеCC0

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"] } } }

Что такое цветовое пространство?

Система координат для цвета: оси, диапазоны и правило, связывающее числа с измеримым светом. Один и тот же оранжевый – это rgb(255 128 0), oklch(0.732 0.186 53) и XYZ [49, 36.7, 4.5] – один цвет, записанный тремя способами. Палитра – это набор выбранных цветов; пространство – способ записать вообще любой цвет.

Цветовая модель или цветовое пространство – в чём разница?

Цветовая модель определяет, какими компонентами описывается цвет: тремя основными цветами в RGB, цветовым тоном, насыщенностью и светлотой в HSL, четырьмя красками в CMYK. Цветовое пространство уточняет основные цвета, точку белого и передаточную кривую, чтобы каждому набору значений соответствовал измеримый цвет. Поэтому rgb(255 0 0) обозначает разный красный в sRGB, Display P3 и Adobe RGB: одна модель, три пространства.

В обиходе оба понятия называют пространствами, в том числе в CSS с color-mix(in hsl, …) и в этом каталоге. Модель можно связать с уже определённым цветовым пространством: здесь HSL и HSV основаны на sRGB, как в CSS.

Какое пространство выбрать?

Зависит от задачи:

хранение изображений и обмен ими – sRGB, стандарт веба по умолчанию;
проектирование палитр и градиентов – OKLCH, где равные шаги выглядят равными;
вычисления со светом (смешивание, размытие, 3D) – RGB в линейном свете;
съёмка и цветокоррекция видео: логарифмическое пространство камеры с выводом в Rec. 709 или Rec. 2100;
оценка того, насколько различными выглядят два цвета, – CIELAB или DIN99o.

Группировка каталога по задаче помогает выбрать пространство по назначению.

Что использовать вместо HSL?

OKLCH. Те же три регулятора – цветовой тон, хрома, светлота, – но светлоте можно доверять: в модели HSL жёлтый при L=50 излучает примерно в 13 раз больше света, чем синий при L=50, так что равные L не означают одинаковой яркости на глаз. В OKLCH – означают. CSS поддерживает oklch() без дополнительных преобразований.

Почему цвета в середине градиента тускнеют?

При усреднении значений в sRGB с гамма-кодированием получается более тёмный и тусклый цвет, чем при смешении соответствующих световых потоков. Интерполяция в OKLab позволяет избежать этого потемнения. Строка интерполяция в каждой карточке показывает один переход в двух пространствах рядом: можно сравнить результат и выбрать подходящее пространство.

Что значит «вне охвата»?

Это цвет, который одно пространство может описать, а другое – или ваш экран – не может показать. Яркого зелёного цвета Display P3 в sRGB просто нет: преобразуйте его – и числа выйдут за допустимый диапазон. Атлас этого не скрывает: плашка рядом с текущим цветом называет самый узкий стандартный охват, который его вмещает, а участки вне диапазона проступают полупрозрачно поверх шахматного фона.

Почему печать выглядит тусклее экрана?

Экран излучает свет; бумага отражает то, что не поглотили её краски. Краске на бумаге доступно меньше ярких цветов – насыщенные синие, зелёные и красные RGB лежат вне её охвата, – поэтому они печатаются тусклее. Допечатная подготовка переводит цвета через ICC-профиль, сделанный для машины и бумаги, например FOGRA39 для европейской мелованной бумаги или GRACoL в США. CMYK этого каталога – простая формула, которой CSS пользуется для device-cmyk() без профиля: верная для чисел, но не цветопроба печати.

Насколько точны преобразования? Теряются ли данные при обратном пересчёте?

Преобразования вычисляются по аналитическим формулам, а не по приближённым таблицам. При прямом и обратном пересчёте погрешность обычно ограничивается точностью вычислений с плавающей запятой. Исключения указаны в описаниях: у OSA-UCS нет аналитической формулы обратного преобразования, системы вроде Munsell используют интерполяцию между опубликованными образцами. Значения rgb ограничиваются охватом sRGB; для цветов за его пределами используйте XYZ или линейный RGB.

Для каждого пространства указана статья или спецификация, по которой реализовано преобразование. Результаты сверяются с colorjs.io для пространств, поддерживаемых обеими библиотеками, а логарифмические кривые камер – с официальными преобразованиями ACES от Киноакадемии. В formula-verification.md перечислены проверки и их источники, в том числе обнаруженные ошибки в опубликованных статьях.

Если числа расходятся с другой библиотекой, сравните диапазоны: эта сохраняет привычные диапазоны каждого пространства – RGB 0–255, светлота Lab 0–100, цветовой тон 0–360, – тогда как многие сводят всё к 0–1. Каждая карточка показывает свои диапазоны; в коде это space.oklch.range.

Какие пространства поддерживает CSS?

CSS поддерживает rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), а также color() для Display P3, Adobe RGB, ProPhoto, линейного sRGB и XYZ (D65 и D50). В CSS rec2020 использует степенную функцию с гаммой 2.4, а не кривую BT.2020 пространства Rec. 2020 из этого каталога. Поэтому одинаковые числа обозначают разные цвета. На вкладке css каждой карточки можно скопировать запись текущего цвета. Преобразования для пространств, которых нет в CSS, можно экспортировать как ICC-профили или таблицы LUT.

Где Pantone, NCS, RAL?

Это лицензируемые продукты: их цвета задаются данными, которые продают владельцы, а не опубликованными формулами, – так что открытой математики для реализации нет, а распространять их таблицы было бы незаконно. В каталог входят сходные системы с опубликованными математическими определениями: Munsell (его ренотация 1943 года – общедоступный документ) и RAL Design (задан непосредственно в CIELAB). Простое правило: если математику когда-либо публиковали, ей место в коллекции.