[Перевод] HSLuv — удобное цветовое пространство для разработчиков

Меня, как разработчика, работа с цветами порой утомляет, но существуют проекты, упрощающие эту деятельность. HSLuv — это один из таких проектов, и в рамках этой статьи я постараюсь объяснить, что это и как это может помочь разработчикам.

Проблема традиционных цветовых пространств

Традиционно в IT используются RGB или HSL.

Основная проблема этих цветовых моделей заключается в том, что они нелинейны с точки зрения человеческого восприятия.

RGB

Для примера возьмем равномерные ступенчатые градиенты RGB цветов.

  • градиент красного — это цвета #000, #100, #200, #FEE, #FFFи т.д.;
  • градиент зеленого — это цвета #000, #010, #020и т.д.;
  • градиент синего — это цвета #000, #001, #002и т.д.;
  • градиент желтого — это цвета #000, #110, #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 образуют более статичную (в плане визуальной разницы светлоты) пару и не создают риск сломать пользовательский интерфейс или сделать метку неразборчивой.

Создание палитры

Ещё одно распространенное использование HSLuv — это программная генерация палитры цветов. При работе над приложением у вас может быть фирменный цвет заказчика и всё.

Допустим, ваш клиент или работодатель предоставил вам свой фирменный цвет #00916c. Это всё, что вам необходимо для разработки цветовой палитры приложения.

С HSLuv очень легко создать палитру.

Сначала мы конвертирует цвет #00916c в HSLuv, получая 155.7, 100, 53.4. Округляя, получаем тон 156.

Исходя из полученного значения, мы можем выбрать дополнительный тон. Есть несколько способов сделать это, но мы просто возьмем противоположный тон (±180°) и получим дополнительный тон 336:

Палитра для темной темы (выше) и светлой (ниже). Пара чисел над каждым цветом — это насыщенность, светлота.

Слева направо:

  • тон фона — 156;
  • тон текста — 156;
  • тон выделения — 156;
  • тон фона кнопки — 156;
  • тон текста кнопки — 156;
  • тон фона кнопки по умолчанию — 336;
  • тон текста кнопки по умолчанию — 336.

Для темной темы акцент был ненасыщенным, а для светлой наоборот.

Не существует абсолютного и объективного правила создания цветов, но светлотой и насыщенностью можно управлять интуитивно, чтобы создавать сочетающиеся наборы цветов. При создании цветов в этой статье я делал именно так — следовал своей интуиции.

Палитра в использовании

Палитру можно создать за несколько секунд, выбрав цвета вручную.

Теперь взглянем на ту же палитра с HSL/RGB:

Цветовую палитру HSLuv можно использовать непосредственно в дизайне, при этом палитра HSL требует настройки перед применением. Также палитра HSL не может создавать стабильно одинаковые по насыщенности, тону и светлоте вариации.

Варианты палитры

Используя те же наборы насыщенности и светлоты можно создать новую палитру с другим тоном.

  • тон = 200:

  • тон = 300:

  • тон = 50:

  • тон = 260 со светлой темой и акцентным цветом +60:

  • тон = 160 со светлой темой и акцентным цветом +120(триада):

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

Цвета HSLuv необходимо использовать непосредственно в исходном коде, а не полагаться на внешний редактор. HSLuv переходит в css, js, java. С полным списком доступных языков можно ознакомиться здесь.

Поддержка редакторов и инструментов

В то время как HSLuv доступен для многих языков, ситуация с различными редакторами не столь хороша. Остается надеяться, что скоро мы сможем увидеть палитру цветов HSLuv в редакторах.

Вывод

HSLuv — это отличный инструмент для разработчиков. Он позволяет с легкостью создавать цвета для дизайна, не обращаясь к графическому редактору или дизайнеру. Цвета можно генерировать с помощью простых вычислений, как и палитры. А из-за постоянного контраста, HSLuv идеально подходит для создания тем и динамической цветопередачи.

Читайте так же:

  • Ученые НАСА предложили ввести шкалу признаков существования инопланетной жизниУченые НАСА предложили ввести шкалу признаков существования инопланетной жизни Как, по мнению художника, может выглядеть поверхность потенциально обитаемой планеты Проксима bВ новом исследовании, проведённом под руководством главного научного сотрудника НАСА Джима Грина, и опубликованном в конце октября в журнале Nature, предлагается ввести «шкалу наличия внеземной […]
  • Новые SSD-накопители: KC3000 и FURY RenegadeНовые SSD-накопители: KC3000 и FURY Renegade Привет, Хабр! Твердотельным накопителем с поддержкой PCIe 4.0 NVMe уже никого не удивишь, но мы попробуем. Тем более, что у нас стартуют продажи сразу двух новых SSD форм-фактора M.2. Kingston KC3000: для быстрой работы со сложными задачамиPCIe 4.0 теперь поддерживают оба ведущих […]
  • Впечатления от прохождения конкурса Яндекс «One Day Offer Frontend»Впечатления от прохождения конкурса Яндекс «One Day Offer Frontend» Делюсь впечатлениями как я поучаствовал в конкурсе Яндекс "One Day Offer Frontend". Суть в том, что надо пройти онлайн соревнование - решить за 3часа 5 задач, можно частично. Задачи на алгоритмы и верстку на 5, 45, 70, 90 и 90 баллов. Надо набрать >=100 баллов и тогда будет уже онлайн […]
  • AMP-технология в email: как это работает в 2022 годуAMP-технология в email: как это работает в 2022 году Автор: Шудрик Валерия, контент-маркетолог в eSputnik . Специализация: email-маркетинг, мессенджер-маркетинг.  Технология АМР позволяет создавать емейлы, которые выглядят как автономные веб-страницы. Получатель может совершить действие, не покидая письмо: купить […]