Пару дней назад Эрик Мейер написал небольшую статью про восьмичисленные шестнадцатиричные коды цветов "Color Me FACE1E55".

Исторически шестнадцатиричные коды, которые похожи на обычные английские слова (DEADBEEF, DEAD10CC и т.п.), использовались (и используются), например, для обозначения определённых участков памяти или типов исключений в отчётах об ошибках. Эрик в статье приводит примеры того, каким цветам соответствуют эти коды и ещё до кучи придумывает парочку своих.

Новый формат цветов описывается в стандарте CSS Color Module Level 4 – его формат #RRGGBBAA. Два последних числа – это альфа-канал. Его значениям соответствуют числа от 00 для полностью прозрачного цвета до FF для непрозрачного. Ещё существует сокращённая запись таких цветов - #RGBA, то есть теперь можно раскрашивать div'ы в цвет #CAFE или #F00D.

Восьмичисленные цвета поддерживается уже во всех современных браузерах, кроме IE/Edge.

#css #colors

https://meyerweb.com/eric/thoughts/2019/04/01/color-me-face1e55/

В прошлый вторник Владимир Клепов из Яндекс.Почты написал хороший пост про то как они адаптируют письма к тёмной теме – "Как создать тёмную тему и не навредить. Опыт команды Яндекс.Почты".

В статье рассматриваются три подхода:
1. Переопределение стилей. Самый простой и понятный подход, но с большим недостатком – все красивости в письме пропадают.
2. CSS-фильтр с инвертированием цветов. Находчивое решение, но у него очень большие проблемы с производительностью.
3. Преобразование стилей. Этот метод и используется в почте. Он гораздо сложнее в реализации, но результат самый лучший. Его суть заключается в том, что в динамике проверяются все значения цветов в формате HSL. Если яркость (L) выше (для текста) или ниже (для фона) порога, то ничего не меняется, так как письмо и так уже в нужной цветовой палитре. Если это условие неверно, то проводится адаптация цвета (h, s, l) => (h, s, 1 - l).

Ещё в статье рассказывается об адаптации картинок к тёмной теме. Были грабли, поэтому их фича на первой итерации пока выехала без перекрашивания картинок. В будущем планируют применять дополнительную эвристику со спектральным анализом, которая должна избавить от возникших проблем.

#css #colors #hsl #yandex

https://habr.com/ru/company/yandex/blog/446780/

Вей Гао опубликовала статью про то, как она добавила поддержку тёмной темы у себя в блоге — "Night Mode with Mix Blend Mode: Difference".

При подготовке своего доклада "This World Mixed and Blended" к Вей пришла идея сделать тёмную тему с помощью CSS-свойства mix-blend-mode: difference. Difference — режим смешивания, который доступен почти во всех современных браузерах кроме IE11. Этот режим можно выразить формулой: difference(A, B ) = |A - B|. То есть абсолютное значение разницы двух цветов.

Для реализации тёмной темы Вей сделала дополнительный div, который перекрывает контент. У этого элемента установлены background: white и mix-blend-mode: difference;. Благодаря этому светлый фон становится тёмным, а тёмный текст — светлым. Для исключения изображений из режима смешивания используется свойство isolation: isolate.

В статье очень подробно рассматривается работа difference. Но этот подход может вызывать проблемы с производительностью, поэтому Вей не рекомендует делать сложные анимации, если используются режимы смешивания.

#css #colors

https://dev.wgao19.cc/2019-05-04__sun-moon-blending-mode/

Лия Веру — участвует в разработке спецификации CSS — написала статью про новый формат кодирования цветов в CSS — "LCH colors in CSS: what, why, and how?".

Цвета в CSS определены в цветовом пространстве sRGB. У sRGB есть недостаток — с помощью него нельзя закодировать все цвета, которые могут быть отображены современными экранами (примерно одна треть от всех возможных цветов). Для решения этой проблемы в спецификацию CSS Color Module Level 4 было добавлено новое представление цветов — lch() (Lightness Chroma Hue).

LCH не только покрывает большее цветовое пространство, но и позволяет работать с цветом более интуитивно. В LCH любое изменение компонент цвета на одно и то же смещение будет давать одно и то же смещение в визуальном представлении цвета. Это свойство в цветовых пространствах называется "perceptual uniformity". В HSL perceptual uniformity не поддерживается, и изменение светлоты на 20% у двух цветов, отличающихся только тоном, будет давать в результате новые цвета с визуально отличающейся светлотой.

Поддержки LCH на данный момент нет ни в одном браузере, но уже идёт работа над его внедрением в Safari.

#css #colors

http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

Лия Веру написала статью о том, как быстро сделать тёмную тему для сайта — "Dark mode in 5 minutes, with inverted lightness variables".

Основная идея заключается в том, чтобы использовать кастомное свойство для задания светлоты в цветовой модели HSL:

root {
 --l-0: 0%;
 --l-100: 100%;
}

@media (prefers-color-scheme: dark) {
 :root {
  --l-0: 100%;
  --l-100: 0%;
 }
}

body {
 background: hsl(0 0% var(--l-100));
 color: hsl(0 0% var(--l-0));
}

Это решение неидеально, так как при использовании HSL один и тот же уровень светлоты распределяется неравномерно по всему цветовому пространству. Эту проблему решает цветовая модель HCL, но её поддержка пока есть только в Safari TP.

#css #colors

https://lea.verou.me/2021/03/inverted-lightness-variables/