Довідник Колірні простори

Перегляньте колір, палітру, градієнт або зображення в кожному колірному просторі. Від вебу до друку, від вибору кольору до досліджень, від 1860 до 2026.

Дисплеї та веб32

Робочі й вихідні RGB-простори: від sRGB, стандарту вебу, до ширших охоплень дисплеїв.

HP & Microsoft, 1996sRGB

Циліндричні11

Колірний тон, насиченість і яскравість, обчислені з RGB. Однакові числові кроки не обов’язково виглядають однаковими.

Joblove & Greenberg, 1978HSL
Alvy Ray Smith, 1978HSV
Alvy Ray Smith, 1996HWB
Alvy Ray Smith, 1978HSV
Alvy Ray Smith, 1996HWB
John R. Kender, 1976HSI
Hanbury, 2003IHLS
community convention, 2011HCG
Ian Taylor, 2012HCL
Darel Rex Finley, 2006HSP
Kuzma Shapran, 2012HCY
Osvaldo Severino Jr & Adilson Gonzaga, 2009HSM

Перцептивні65

Координати для порівняння кольорів, побудови палітр і моделювання колірного сприйняття.

Björn Ottosson, 2020OKLCH
Li et al., 2017CAM16
Li et al., 2017CAM16
Björn Ottosson, 2020OKLab
Alexei Boronine, 2012HSLuv
Alexei Boronine, 2012HPLuv
Google, 2021HCT
Björn Ottosson, 2021Okhsl
Björn Ottosson, 2021Okhsv
Björn Ottosson, 2021Okhwb
Björn Ottosson, 2021OKLrAB
Björn Ottosson, 2021OKLrCH
Konovalenko et al., 2021proLab
Li & Luo, 2024sUCS
Luke Hellwig & Mark Fairchild, 2020IgPgTg
Görkem Yıldız, 2026HelmGen
Safdar et al., 2017JzAzBz
Safdar et al., 2017JzCzHz
Fritz Ebner & Mark Fairchild, 1998IPT
Safdar et al., 2017IzAzBz
Mark Fairchild & Garrett Wyble, 2010hdr‑IPT
Huang et al., 2024IaPbP
Kenneth Moreland, 2009Msh
Safdar et al., 2021ZCAM
Li & Luo, 2024sCAM
Mark Fairchild, 1996RLAB
Luo et al., 1996LLAB
Robert W. G. Hunt, 1994Hunt
Sherman Lee Guth, 1995ATD95
Bratkova et al., 2009oRGB

Колориметрія25

Основи вимірювання кольору, будова зору і спеціальні дослідницькі координати.

CIE, 1931xyY
Estévez et al., 1979LMS
CIE, 1931xyY
Estévez et al., 1979LMS
Raymond Davis; CIE, 1931Kelvin
Derrington et al., 1984DKL
Hermann von Helmholtz, 1860CIE DSH
Richard Kirk, 2019Yrg
Jyrki Alakuijala et al., 2019XYB
Terrillon & Akamatsu, 2000TSL
Xerox, 1989YES
Ruderman et al., 1998lαβ
Flohr et al., 1993YyCxCz

Відео23

Яскравість окремо від кольору – для телемовлення, стиснення відео і передавання HDR.

Walter Bruch / Telefunken, 1967YUV
NTSC, 1953–82YIQ
Malvar & Sullivan, 2003YCgCo
Eric Hamilton / C-Cube Microsystems, 1992JPEG YCbCr
Henri de France, 1967YDbDr
Sony / IEC, 2006xvYCC
Julian Fröhlich, 2017ICaCb

Камери58

Лог-кодування камер і робочі простори для зйомки та кольорокорекції.

ARRI, 2010–22LogC3
ARRI, 2010–22LogC3
RED Digital Cinema, 2017Log3G10
SMPTE/DCI, 2006DCDM
RED Digital Cinema, 2007–08REDLog
RED Digital Cinema, 2016–17Log3G12
Panavision / Sony, 2005Panalog
Thomson Grass Valley, 2002ViperLog

Поліграфія7

Друкарські фарби, пігменти та колориметричні системи впорядкування кольорів поверхонь.

Eagle Printing Ink Co., 1906CMYK
Albert H. Munsell, 1905Munsell
Johannes Itten, 1961RYB
Albert H. Munsell, 1905Munsell
Johannes Itten, 1961RYB
Louis Ducos du Hauron, 1868–1906CMY

Використання

JavaScript

Уся бібліотека: 221 простір, 71 КБ у gzip – з будь-якого простору в будь-який інший, в обидва боки.

npm install color-space
import space from 'color-space'

space.rgb.oklch(255, 128, 0)      // → [0.732, 0.186, 53]
space.oklch.rgb(0.65, 0.1, 180)   // → [56.14, 162.97, 145.41]
space.oklch.range                 // [[0,1], [0,0.4], [0,360]]

Або один простір окремо – у збірку не потрапляє нічого зайвого.

import oklch from 'color-space/oklch.js'

oklch.rgb(0.65, 0.1, 180)   // → [56.14, 162.97, 145.41]

Типізовано: оголошення TypeScript входять до пакета – для всієї бібліотеки і для кожного простору окремо.

Що таке колірний простір?

Система координат для кольору: осі, діапазони і правило, що пов’язує числа з вимірюваним світлом. Зір людини трихроматичний – колбочки бувають трьох типів (S, M, L), тому для опису будь-якого кольору, який бачить око, потрібно щонайменше три координати. Той самий помаранчевий – це 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() безпосередньо.

Як перетворити hex на OKLCH?

Введіть або вставте його в поле кольору вгорі, наприклад #ff8000. Усі простори на сторінці одразу покажуть цей колір; в OKLCH це 0.732, 0.186, 53, а в CSS – oklch(0.732 0.186 53). Вкладка css кожної картки дає запис для копіювання, а в коді це space.rgb.oklch(255, 128, 0).

Чому градієнти посередині тьмяніють?

Бо їх обчислюють у гамма-кодованому sRGB, де усереднення чисел двох кольорів дає темніше й тьмяніше світло, ніж справжнє змішування їхнього світла. Інтерполяція в OKLab цього уникає; у CSS це linear-gradient(in oklab, red, blue). Рядок інтерполяція в кожній картці показує той самий перехід через два простори поруч, тож різницю видно ще до вибору.

Як перетворити S-Log3 або інший лог камери на Rec. 709?

Відкрийте лог-простір своєї камери, наприклад S-Log3, LogC4 або Apple Log. У його блоці LUT виберіть Rec. 709 і свій редактор: DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg та інші. Файл .cube створить ваш браузер. Це технічне перетворення без тонального відображення: світла понад дифузний білий обрізаються, а художній вигляд ви додаєте самі.

Що означає «поза охопленням»?

Це колір, який один простір може описати, а інший – або ваш екран – не може показати. Яскравого зеленого Display P3 у sRGB немає: перетворіть його, і числа вийдуть за допустимий діапазон. Атлас цього не приховує: значок ⚠ біля поточного кольору означає, що колір виходить за вибрану «Межу»; якщо навести вказівник на площину чи смугу з натиснутою клавішею Alt, підказка покаже, якого ширшого охоплення потребує колір у цьому місці (P3, Rec. 2020); а ділянки поза діапазоном напівпрозоро проступають поверх шахового тла.

Чому друк виглядає тьмянішим за екран?

Екран випромінює світло; папір відбиває те, чого не поглинули фарби. Фарба на папері відтворює менше яскравих кольорів – насичені сині, зелені й червоні кольори RGB лежать поза її охопленням, – тому на відбитку вони тьмяніші. Під час додрукарської підготовки кольори перетворюють через ICC-профіль, створений для друкарської машини й паперу, наприклад FOGRA39 для європейського крейдованого паперу або GRACoL у США. CMYK у цьому каталозі – проста формула, якою CSS обчислює device-cmyk() без профілю: числа вона дає правильні, але кольоропробою друку не є.

У якому колірному просторі експортувати фотографії?

Для вебу та обміну – sRGB: браузери й телефони припускають саме його, коли файл не має профілю. Display P3 зберігає більше кольорів яскравої сцени на екранах Apple і багатьох Android, якщо профіль вбудовано у файл. Надсилайте Adobe RGB, коли його просить фотолабораторія. ProPhoto RGB залиште для 16-бітного редагування: його охоплення таке широке, що у 8-бітних файлах на градієнтах з’являються смуги.

Чи точні перетворення? Чи втрачаються дані під час зворотного перерахунку?

Перетворення – це аналітичні формули, а не табличні наближення, і після прямого та зворотного перерахунку значення збігаються з точністю до похибки обчислень із рухомою комою. Нечисленні винятки зазначено там, де вони трапляються: OSA-UCS не має аналітичного оберненого перетворення, а системи-атласи на кшталт Munsell інтерполюють між опублікованими зразками. Вихід у rgb ніколи не обрізається: колір поза sRGB повертається зі значеннями нижче 0 або вище 255, тож обрізайте їх лише під час показу.

Їх також перевірено: кожен простір посилається на статтю чи специфікацію, яку реалізує; значення звіряються з 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). rec2020 у CSS – це чиста гамма 2.4, а не крива BT.2020 простору Rec. 2020 у цьому каталозі: ті самі числа означали б інший колір. Вкладка css кожної картки записує поточний колір у формі для копіювання; простори, яких немає в CSS, можна завантажити як ICC-профілі або LUT.

Як бачать кольори люди з дальтонізмом?

Відкрийте Вигляд і виберіть Зір: сліпота до червоного (протанопія), до зеленого (дейтеранопія) або до синього (тританопія). Каталог перемальовується так, як його бачить таке око, і можна перевірити, чи не зливаються кольори палітри. Порушення колірного зору має приблизно 1 з 12 чоловіків, за даними NEI.

Де Pantone, NCS, RAL?

Це ліцензовані продукти: їхні кольори задано даними, які продають власники, а не опублікованими формулами, – тож відкритої математики для реалізації немає, а поширювати їхні таблиці було б незаконно. Близькі системи з публічною математикою тут є: Munsell (його ренотація 1943 року – загальнодоступний документ) і RAL Design (визначений безпосередньо в CIELAB). Будь-якій системі, математику якої колись опублікували, тут місце; запропонуйте ту, якої бракує.

Альтернативи

Порівняння бібліотек для перетворення кольору.
ІнструментПросториЛог-криві камерЯскравісно-кольорорізницевіsRGBІнструментиРозмірШвидкістьПлатформи
color-space20531160–255
parse mix ΔE contrast CVD
62 kBJS, WASM, GL, LUT, ICC, OCIO, MCP, Figma, VS Code, CLI, web
culori30–10–1
parse mix gamut ΔE contrast CVD
23 kBJS
colorjs.io51––0–1
parse mix gamut ΔE contrast
34 kBJS, web
chroma-js11––0–255
parse mix ΔE contrast palettes
17 kBJS
@texel/color16––0–1
parse gamut ΔE
9 kBJS
colour-science1282460–1
ΔE CVD
––Python, LUT
ColorAide77––0–1
parse mix gamut ΔE contrast CVD palettes
––Python
colorspace (R)9––0–1
mix contrast CVD palettes
––R, web
OpenColorIO5711–0–1
gamut
––C++, Python, GL, LUT, ICC
Bruce Lindbloom22––0–1, 0–255
ΔE
––web
oklch.com9––0–255
parse gamut
––web

За вихідним кодом, пакетом або сторінкою кожного проєкту, станом на 2026-10-18.

Скопійовано