HSLuv — удобное цветовое пространство для разработчиков / Хабр
Меня, как разработчика, работа с цветами порой утомляет, но существуют проекты, упрощающие эту деятельность. HSLuv — это один из таких проектов, и в рамках этой статьи я постараюсь объяснить, что это и как это может помочь разработчикам.
Проблема традиционных цветовых пространств
Традиционно в IT используются RGB или HSL.
Основная проблема этих цветовых моделей заключается в том, что они нелинейны с точки зрения человеческого восприятия.
RGB
Для примера возьмем равномерные ступенчатые градиенты RGB цветов.
- градиент красного — это цвета
#000,#100,#200,#FEE,#FFFи т.д.; - градиент зеленого — это цвета
#000,#010,#020и т.
д.; - градиент синего — это цвета
#000,#001,#002и т.д.; - градиент желтого — это цвета
#000,#220и т.д.; - градиент голубого — это цвета
#000,#011,#022и т.д.; - градиент пурпурного — это цвета
#000,#101,#202и т.д.
д.;Мы можем увидеть несколько вещей:
- Яркость цветов увеличивается неравномерно: чем оттенок ближе к белому цвету, тем изменение яркости меньше;
- Яркость разных цветов различается: синий намного темнее остальных;
- Насыщенность также неравномерна: синий и красный выглядят «ненасыщенными» в правой части градиента.
Хорошо, RGB — это способ визуализации пикселей, да и разрабатывалась эта модель не для удобного «управления» значениями.
HSL
Давайте провернем такую же манипуляцию с HSL. В теории, с HSL проще работать из-за возможности оставить тон постоянным и изменять две оставшиеся переменные — насыщенность и светлоту.
Для каждого ряда постоянными являются насыщенность и тон, а светлота каждого элемента отличается от предыдущего на 3.3%. Формально каждый ряд представляет собой массив из результатов функции hsl(тон, насыщенность, светлота), где насыщенность = 100%, а тон:
- красный — 0;
- зеленый — 120;
- синий — 240;
- желтый — 60;
- голубой — 180;
- пурпурный — 300;
Цвета такие же, как и в случае с RGB, потому что HSL — это просто способ записи RGB, другое представление той же цветовой модели.
В оставшейся части статьи я буду использовать RGB или HSL как синонимы для обозначения цветовой модели RGB.
HSLuv
В 1970-х годах Международная комиссия по освещению разработала цветовую модель CIELAB. В то же время была представлена другая цветовая модель CIELUV. Обе модели не зависят от устройства и стремятся к единообразию восприятия. Это подразумевает попытку приблизиться к человеческому зрению, что будет продемонстрировано на примерах ниже.
CIELUV использует светлоту (L) и хроматические координаты (uv), с которыми не очень удобно работать. По этой причине Алексей Боронин (Alexei Boronine) пришел к HSluv. Это цветовое пространство позволяет использовать CIELUV с более простым трио HSL: тон(Hue), насыщенность(Saturation) и светлота (Lightness).
Давайте представим те же градиенты, аналогичные предыдущим:
Полученные оттенки выглядят несколько «причудливо», но зато шаги между элементами стали более «постоянными», что, как мы увидим дальше, очень важно.
Сравнение HSLuv и RGB
Примеры для этого раздела взят из блога Алексея Боронина.
Цвета одинаковой светлоты
Правые и левые цвета должны быть одинаковой светлоты. В случае с HSL, заметно, что желтый цвет намного ярче, чем синий. HSLuv выдаёт относительно одинаковый результат.
Проблема светлоты с HSL проявляется лучше всего, когда мы используем цвета в качестве фона для белого текста. С теми же цветами, что и выше получаем следующий результат:
Цвета одинаковой насыщенности
Правые и левые цвета должны быть одинаковой насыщенности. Красный цвет в HSL выглядит более насыщенным, а в случае с HSLuv насыщенность цветов относительно одинакова.
Разница между цветами
Давайте сравним четыре цвета. Два верхних имеют такую же разницу в тонах, как и два нижних:
Два верхних цвета существенно различаются, в то время как нижние — практически сливаются.
В HSLuv разница в тонах между цветами примерно равная.
Практические примеры
Теперь, после ознакомления с HSLuv, давайте рассмотрим практические примеры.
Пользовательские цвета
Одним из самых распространенных примеров является создание пользовательских цветов для интерфейса. Цвета папок, кнопок, тегов, меток и… В общем, всё, что пользователь может настроить по своему усмотрению.
Если предоставить пользователю возможность выбирать цвета из полной палитры, то вы получите неуправляемые цвета. Поэтому вам необходимо ограничить выбор пользователя. Первый вариант — это выбрать перечень цветов заранее и предоставить пользователю ограниченную палитру. Второй вариант — это позволить пользователю выбрать сначала тон, а затем насыщенность и светлоту.
Пример «Labels»
В следующих примерах цвет выбирается следующим образом:
- тон одинаков для фона и текста;
- насыщенность всех цветов — 80;
- 4 первых пары имеют светлоту фона — 30 и текста — 80;
- 4 последних имеют яркость фона — 70 и текста — 20.
Как мы видим, цвета HSLuv образуют более статичную (в плане визуальной разницы светлоты) пару и не создают риск сломать пользовательский интерфейс или сделать метку неразборчивой.
Создание палитры
Допустим, ваш клиент или работодатель предоставил вам свой фирменный цвет #00916c. Это всё, что вам необходимо для разработки цветовой палитры приложения.
С HSLuv очень легко создать палитру.
Сначала мы конвертирует цвет #00916c в HSLuv, получая 155.7, 100, 53.4. Округляя, получаем тон 156.
Исходя из полученного значения, мы можем выбрать дополнительный тон. Есть несколько способов сделать это, но мы просто возьмем противоположный тон (±180°) и получим дополнительный тон 336:
Палитра для темной темы (выше) и светлой (ниже).
Пара чисел над каждым цветом — это насыщенность, светлота.
Слева направо:
- тон фона — 156;
- тон текста — 156;
- тон выделения — 156;
- тон фона кнопки — 156;
- тон текста кнопки — 156;
- тон фона кнопки по умолчанию — 336;
- тон текста кнопки по умолчанию — 336.
Для темной темы акцент был ненасыщенным, а для светлой наоборот.
Не существует абсолютного и объективного правила создания цветов, но светлотой и насыщенностью можно управлять интуитивно, чтобы создавать сочетающиеся наборы цветов. При создании цветов в этой статье я делал именно так — следовал своей интуиции.
Палитра в использовании
Палитру можно создать за несколько секунд, выбрав цвета вручную.
Теперь взглянем на ту же палитра с HSL/RGB:
Цветовую палитру HSLuv можно использовать непосредственно в дизайне, при этом палитра HSL требует настройки перед применением.
Варианты палитры
Используя те же наборы насыщенности и светлоты можно создать новую палитру с другим тоном.
- тон = 200:
- тон = 300:
- тон = 50:
- тон = 260 со светлой темой и акцентным цветом +60:
- тон = 160 со светлой темой и акцентным цветом +120(триада):
Как использовать HSLuv
Цвета HSLuv необходимо использовать непосредственно в исходном коде, а не полагаться на внешний редактор. HSLuv переходит в css, js, java. С полным списком доступных языков можно ознакомиться здесь.
Поддержка редакторов и инструментов
В то время как HSLuv доступен для многих языков, ситуация с различными редакторами не столь хороша.
Вывод
HSLuv — это отличный инструмент для разработчиков. Он позволяет с легкостью создавать цвета для дизайна, не обращаясь к графическому редактору или дизайнеру. Цвета можно генерировать с помощью простых вычислений, как и палитры. А из-за постоянного контраста, HSLuv идеально подходит для создания тем и динамической цветопередачи.
Цветовая модель HSB (HSL,HSV) | printservice.pro
Цветовой круг — основа модели HSB.Цветовые координаты модели HSB.Сечения пространства по яркости.Видимая часть пространства HSB.Для описания цветовой модели HSB необходимо уточнить определения таких характеристик цвета, как цветность, насыщенность и яркость.
Определяет расположение цвета на цветовом круге в градусах. Цветность обозначают первой буквой слова hue (оттенок) — H. Цвета с различной цветностью описывают названиями на естественном языке (например, голубой, оранжевый). Например, зеленому цвету соответствует значение Н120°, а синему — Н240°. Насыщенность — это интенсивность определённого тона. Насыщенный цвет можно назвать сочным, глубоким, в то время как, менее насыщенный — приглушённым, приближённым к серому. Полностью ненасыщенный цвет будет оттенком серого. Насыщенность 50 означает, что мы имеем дело с 50 %-ным оттенком спектрального цвета. Насыщенность обозначают первой буквой слова saturation (насыщенность) — S. На цветовом круге цвета равной насыщенности располагаются вдоль концентрических окружностей, а все степени насыщенности одного цвета можно проследить вдоль радиуса, соединяющего белую точку в центре и точку спектрального цвета на окружности.
Яркость — это энергетическая характеристика света, визуально воспринимаемая как величина, на которую цвет отличается от черного.
Яркость обозначают первой буквой слова brightness (яркость) — B. Яркость измеряется в процентах. Получается, что В=0 % соответствует черному цвету, В=100 % — отсутствию добавленного черного. На цветовом круге цвета равной яркости располагаются вдоль концентрических окружностей, а все степени яркости одного цвета можно проследить по радиусу, соединяющему черную точку в центре и точку спектрального цвета на окружности. На основе этих параметров построена цветовая модель HSB. Основа модели цветовой круг. Исходя из этого, цветовое пространство модели HSB можно рассматривать как «стопку» лежащих друг на друге модификаций цветового круга. «Нижний» цветовой круг с яркостью цветов В=0 % визуально воспринимается как черный. «Верхний» цветовой круг составляют цвета с максимальной яркостью B=100 %. Ось S (насыщенность) модели HSB не имеет фиксированного направления. Значения этой переменной — расстояние от центра цветового круга до точки, соответствующей заданному цвету.
Перед выводом на экран цвета приходится преобразовывать в цветовое пространство RGB, а перед выводом на печать — в цветовое пространство CMYK.
Второй существенный недостаток этой модели состоит в нелинейности визуального восприятия яркости. В силу физиологических особенностей зрения, хроматические цвета с одинаковым значением яркости (например, желтый и фиолетовый) не выглядят одинаково светлыми. Для устранения этого недостатка была введена искусственная характеристика цвета — светлота (lightness). Светлотой называется характеристика визуального восприятия яркости цвета. Цвета с равными значениями светлоты выглядят одинаково яркими. Модификация цветовой модели HSB с заменой яркости на светлоту называется HSL.
В некоторых программах компьютерной графики и в литературе встречается упоминание о цветовой модели HSV. В разных случаях эта аббревиатура соответствует либо модели HSB, либо модели HSL, либо представляет собой их собирательное наименование.ВШЛ
Несмотря на то, что большинство человеческих глаз распознают цвета так же, как работает модель RGB, мы обычно не думаем и не говорим о цветах как о смеси этих трех компонентов.
Однако мы могли бы говорить о цветах как о более или менее насыщенных, чем другие.
имеющие разные оттенки или тона или более яркие, чем другие.
По этой причине многие программные приложения (примерами с открытым исходным кодом являются Blender, GIMP, Inkscape и Krita)
включать средства выбора цвета, которые пытаются удовлетворить наше восприятие цветов в терминах, упомянутых выше.
[JG78, с. 21].
Одной из таких перцептивных цветовых моделей является HSL (также называемая HLS [BB09b, стр. 207]),
который является аббревиатурой от оттенка, насыщенности и легкости.
Первоначально он был введен Джоблавом и Гринбергом как «оттенок/цветность/интенсивность» [JG78, стр. 22f.].
Они описывают цветовое пространство как бикональное тело, подобное
рисунок ниже
в котором вертикальная ось представляет все оттенки серого от 0 (черный) до 1 (белый).
Тогда все полностью насыщенные цвета лежат на внешнем круге общего основания обоих конусов в точке \(L=0,5\),
что позволяет определить оттенок как угол.
Третий параметр, насыщенность, соответствует радиусу окружности вокруг вертикальной оси.
в положении текущей яркости.
Цветовое пространство HSL.
Нажмите и перетащите, чтобы повернуть, прокрутите, чтобы увеличить.
На сенсорном экране перетащите, чтобы повернуть вокруг оси Y, и используйте два пальца для масштабирования.
или вращаться вокруг оси x.
Преобразование
Учитывая цвет RGB \((r,g,b)_\text{RGB}\), яркость \(l\) и насыщенность \(s_\text{HSL}\) цвета HSL \((h,s_\text{HSL},l)_\text{HSL}\) определяются следующим образом [BB09б, с. 212ф.]:
\begin{уравнение} l = \frac{\max\lbrace r,g,b \rbrace + \min\lbrace r,g,b \rbrace}{2} \label{eq:hsllightness} \end{уравнение}
\begin{уравнение}
s_\text{HSL} = \begin{case}
0 & \текст{если} л = 0 \\
0,5 \cdot \frac{\max\lbrace r,g,b \rbrace — \min\lbrace r,g,b \rbrace}{l} &
\текст{если} 0
Обоснование этих формул преобразования может быть лучше понято, когда
визуализация куба RGB, наклоненного так, что черный цвет все еще находится в начале координат, а
диагональная линия, где \(r=g=b\) теперь совпадает с вертикальной осью.
Сравнение RGB и HSL показано на
рисунок ниже.
Для компонента легкости уравнение \ref{eq:hsllightness} относится
исходный цвет RGB к указанной диагонали внутри куба RGB,
в то время как уравнение \ref{eq:hslsauration} устанавливает меру расстояния от этого
диагональная линия для насыщенности.
Сравнение цветовых пространств RGB и HSL.
Оттенок \(h \in [0,1]\) соответствует углу \(h \cdot 2\pi\) в радианах. Он рассчитывается по заданному цвету RGB с промежуточными шагами [BB09b, с. 208]:
\begin{уравнение} \оставил( \begin{матрица} г’\г’\б’ \end{матрица} \Правильно) знак равно \оставил( \begin{матрица} \frac{\max\lbrace r,g,b \rbrace — r}{\max\lbrace r,g,b \rbrace — \min\lbrace r,g,b \rbrace} \\ \frac{\max\lbrace r,g,b \rbrace — g}{\max\lbrace r,g,b \rbrace — \min\lbrace r,g,b \rbrace} \\ \frac{\max\lbrace r,g,b \rbrace — b}{\max\lbrace r,g,b \rbrace — \min\lbrace r,g,b \rbrace} \end{матрица} \Правильно) \label{eq:rgbtohuenormalizedrgb} \end{уравнение}
\начало{уравнение} ч’ = \begin{случаи} b’-g’ & \text{if} \max\lbrace r,g,b \rbrace = r \\ r’-b’+2 & \text{if} \max\lbrace r,g,b \rbrace = g \\ g’-r’+4 & \text{if} \max\lbrace r,g,b \rbrace = b \\ \end{случаи} \label{eq:rgbtohueintermediate} \end{уравнение}
\begin{уравнение} h = \frac{h’}{6} \mod 1 \label{eq:rgbtohue} \end{уравнение}
Поскольку \(r,g,b \in [0,1]\), \(r’, g’, \text{ и } b’\) все содержатся в интервале \([0,1]\) .
Без ограничения общности это можно увидеть, если \(\max\lbrace r,g,b \rbrace\) принять за \(r\).
В этом случае \(r’\) равно 0 и
\(g’=\frac{r-g}{r-\min\lbrace r,g,b \rbrace},\ b’=\frac{r-b}{r-\min\lbrace r,g,b \rbrace} \в [0, 1]\),
так как числитель может быть только меньше или равен знаменателю.
Следовательно, каждая из сумм при вычислении \(h’\) должна находиться в интервале \([-1,1]\).
Следовательно, \(h’ \in [-1,5]\) и \(h \in [0,1]\).
В особых случаях насыщенного красного, зеленого и синего это приводит к значениям оттенка
\(0\), \(\frac{2}{6}\) и \(\frac{4}{6}\) соответственно.
Другим несерым вершинам куба RGB — желтому, голубому и пурпурному — присваиваются оттенки
\(\frac{1}{6}\), \(\frac{3}{6}\) и \(\frac{5}{6}\).
Обратите внимание, что в примере желтого цвета, где \(\max\lbrace r,g,b \rbrace = r = g\),
не имеет значения, какой из двух подгоночных случаев вычисляется.
9\mathsf{T} & \text{если} l = 1
\end{случаи}
\end{уравнение}
Уравнение \ref{eq:rgbtohueintermediate} разбивает круг оттенков на три раза по два сектора, в зависимости от того, какой компонент в исходном цвете RGB был больше, чем другие. Чтобы изменить это и получить цвет RGB, полезно сначала вычислить некоторые промежуточные значения [BB09b, p. 214]:
\begin{массив}{ccl} h’ &=& (6 \cdot h) \mod 6 \nonumber\\ % mod 6 для h=1! c_1 &=& \lfloor h’ \rfloor \nonnumber\\ c_2 &=& h’-c_1 \номер\\ д &=& \begin{case} s_\text{HSL} \cdot l & \text{if } l \leq 0.5 \\ s_\text{HSL} \cdot (1-l) & \text{if } l > 0,5 % обратите внимание, что в книге есть ошибка, которая гласит (l-1) \end{случаи} \nonumber\\ u_1 &=& l + d \номер\\ u_2 &=& l — d \номер\\ u_3 &=& u_1 — (u_1 — u_2) \cdot c_2 \не число\\ u_4 &=& u_2 + (u_1 — u_2) \cdot c_2 %\label{eq:hsltorgbhelper} \конец{массив}
Здесь \(c_1\) — индекс сектора оттенка, а \(c_2\) — позиция в этом секторе.
Поскольку \(s_\text{HSL}\) моделирует радиус от 0 до 1,
\(d\) можно понимать как радиус, скорректированный для биконического представления цветового пространства HSL.
Гарантируется, что он находится в интервале \([0,0.5]\).
Следовательно, \(u_1\) всегда будет максимальным компонентом нового цвета RGB,
и \(u_2\) будет минимальным.
\(u_3\) и \(u_4\) интерполируются между максимумом и минимумом с разными оттенками в разных направлениях.
Из этих промежуточных значений выше можно собрать окончательные значения RGB:
9\mathsf{T} & \text{если} c_1 = 5
\end{случаи}
\end{equation}
Ограничения
Хотя цветовая модель HSL была разработана для облегчения выбора цвета людьми,
это не идеально.
Одной из причин этого является присвоение одинаковой яркости всем трем основным цветам.
В пространстве sRGB основным цветам назначаются разные позиции на оси \(y\).
При преобразовании этих определений первичного красного, зеленого и синего обратно в пространство XYZ,
различия в компоненте Y остаются.
Следовательно, основные цвета, определенные для пространства sRGB, не имеют одинаковой воспринимаемой яркости.
что означает, что легкость в модели HSL не совпадает с воспринимаемой яркостью.
Это становится очевидным при сравнении цветов HSL максимальной насыщенности и светлоты.
\(\frac{1}{2}\) с изображением в градациях серого истинных воспринимаемых значений яркости, как показано на
рисунок ниже.
Различия в яркости для одинаковой яркости HSL. Вверху: цвета HSL \((h, 1, \frac{1}{2})_\text{HSL}\ \forall\ h \in [0, 1]\). Внизу: цвета в оттенках серого, полученные за счет сохранения постоянного компонента Y в пространстве XYZ. при удалении всей цветности.
Литература
- [BB09b]
- Бургер, Вильгельм; Бердж, Марк Дж. : Принципы цифровой обработки изображений: основные методы.
Темы бакалавриата по информатике.
Springer-Verlag London, 1-е издание, 2009 г..
- [ДЖГ78]
- Джоблав, Джордж Х; Гринберг, Дональд: Цветовые пространства для компьютера графика. В: Компьютерная графика ACM siggraph. том 12. АКМ, стр. 20–25, 1978 г.
: Принципы цифровой обработки изображений: основные методы.
Темы бакалавриата по информатике.
Springer-Verlag London, 1-е издание, 2009 г..Canon: стиль изображения
При указании и редактировании цветов в редакторе стилей изображения используется система обозначений, называемая «HSL», которая позволяет выполнять вычисления на основе числовых значений RGB с точки зрения оттенка, насыщенности и яркости. Здесь анализируется структура HSL. |
| Нотация HSL, используемая в редакторе стилей изображения, представляет собой систему выражения цвета, состоящую из трех элементов, используемых для выражения цвета, а именно оттенка (H), насыщенности (S) и яркости (L). Нотация HSB, используемая в Adobe Photoshop и других программах, представляет собой аналогичную систему выражения цвета, но состоит из оттенка, насыщенности и яркости (B). Это сходство может показаться запутанным, но как только вы поймете разницу между ними, цвет можно будет интуитивно редактировать в редакторе стилей изображения. |
|
