CSS Color 4 предоставляет в Интернет инструменты и возможности широкого цветового охвата: больше цветов, функций манипуляции и улучшенные градиенты.
На протяжении более 25 лет sRGB (стандартный красный, зеленый, синий) был единственной цветовой гаммой для градиентов и цветов CSS с такими цветовыми пространствами, как rgb() , hsl() и hex. Это наиболее распространенная цветовая гамма среди дисплеев; общий знаменатель. Мы уже привыкли определять цвета внутри этой гаммы .
Поскольку дисплеи становятся все более способными отображать широкий диапазон цветов, CSS нуждается в способе определения цветов в этих более широких диапазонах. Текущие цветовые форматы не поддерживают широкий цветовой диапазон.
Если бы CSS никогда не обновлялся, он навсегда застрял бы в цветовых диапазонах 90-х годов и никогда бы не соответствовал предложениям широкой гаммы изображений и видео. В ловушке , показывает только 30% цветов, которые может видеть человеческий глаз . Благодарим CSS Color Level 4 за то, что он помог нам избежать этой ловушки; написанный в первую очередь Леа Веру и Крисом Лили .
В Chrome 111 появилась поддержка гамм и цветовых пространств CSS Color 4 , что присоединилось к Safari, который поддерживает display-p3 с 2016 года. CSS теперь может поддерживать дисплеи HD (высокая четкость), определяя цвета из гамм HD, а также предлагая цветовые пространства со специализацией. Это руководство объяснит, как вы можете начать использовать преимущества этого нового мира цвета.
Попробуйте сами
Благодаря поддержке браузеров выбор цветов увеличивается на 50 %! Вы думали, что 16 миллионов цветов — это много, подождите, пока не увидите, сколько цветов могут отображать некоторые из этих новых пространств. Кроме того, подумайте обо всех тех градиентах, которые полосовались из-за недостаточной битовой глубины, это тоже решено.
В дополнение к большему количеству цветов, возможно, самых ярких цветов, на которые способен дисплей , новые цветовые пространства предоставляют уникальные инструменты и методы для управления и создания цветовых систем. Например, раньше у нас был HSL и его «легкий» канал, который был лучшим у веб-разработчиков. Теперь в CSS у нас есть «легкость восприятия » LCH.
Кроме того, градиенты и смешивание получили некоторые улучшения: поддержка цветового пространства, параметры интерполяции оттенков и меньшее количество полос. На следующем изображении показаны некоторые улучшения микширования. Два лучших цветовых сочетания — в sRGB. Два нижних сочетания цветов показаны на дисплее p3. Дисплей p3 имеет более яркие цвета, а в результате смешения получается полностью черно-белое изображение посередине. Где sRGB выглядит немного ненасыщенным, а миксы в середине не дают полностью черно-белых результатов.
https://codepen.io/web-dot-dev/pen/poZgXQb
В этом руководстве будет рассказано, где был цвет, куда он движется, и как CSS позволит и поддержит веб-разработчиков управлять цветом.
Обзор
Проблема с цветом и Интернетом заключается в том, что CSS не поддерживает высокое разрешение, в то время как дисплеи, которые большинство людей имеют в карманах, на коленях или установлены на стенах, поддерживают широкую гамму цветов высокой четкости. Цветовые возможности дисплеев росли быстрее, чем CSS, и теперь CSS догоняет их.
Это гораздо больше, чем просто «больше цветов». К концу этой статьи вы сможете указать больше цветов, улучшить градиенты и выбрать лучшие цветовые пространства и цветовые гаммы для каждой задачи.
Что такое цветовая гамма?
Гамма представляет размер чего-либо. Фраза «миллионы цветов» — это комментарий к гамме дисплея или диапазону цветов, из которых он может выбирать. На следующем изображении сравниваются три гаммы: чем больше размер, тем больше цветов он предлагает.
Цветовая гамма также может иметь имя. Это как баскетбольный мяч против бейсбольного мяча или чашка кофе Vente против гранде; название размера может помочь людям общаться. Изучение этих названий цветовой гаммы поможет вам общаться и быстро понимать диапазон цветов.
В этой статье вы познакомитесь с семью новыми гаммами, все из которых имеют более широкий диапазон, чем sRGB, и опишете их различные функции, которые помогут вам выбрать, какую использовать:
Визуальная гамма человека
Цветовую гамму часто сравнивают с визуальной гаммой человека; весь цвет, который, по нашему мнению, может видеть человеческий глаз. HVS часто изображают с помощью диаграммы цветности , вот так:
Самая внешняя форма — это то, что мы можем видеть как люди, а внутренний треугольник — это диапазон функций rgb() , то есть цветовое пространство sRGB.
Как вы видели треугольники выше при сравнении размеров гаммы, так и ниже вы увидите треугольники. Это отраслевой способ информирования о цветовых гаммах и их сравнения.
Что такое цветовое пространство?
Цветовые пространства — это расположение гаммы, определяющее форму и метод доступа к цветам. Многие из них представляют собой простые трехмерные формы, такие как кубы или цилиндры. Такое цветовое расположение определяет, какие цвета располагаются рядом друг с другом, а также как будет работать доступ к цветам и их интерполяция.
RGB похож на прямоугольное цветовое пространство, где доступ к цветам осуществляется путем указания координат по трем осям. HSL — это цилиндрическое цветовое пространство , в котором доступ к цветам осуществляется с помощью угла оттенка и координат по двум осям.
Спецификация уровня 4 вводит 12 новых цветовых пространств для поиска цветов из 7 новых гамм, представленных ранее:
- sRGB линейный
- ЛЧ
- окЛЧ
- ЛАБОРАТОРИЯ
- окЛАБ
- Дисплей стр.3
- Рек2020
- а98 RGB
- ПроФото RGB
- XYZ
- XYZ d50
- XYZ d65
Это в дополнение к 4 ранее доступным цветовым пространствам:
Краткое описание цветовой гаммы и цветового пространства
Цветовое пространство — это отображение цветов, где цветовая гамма — это диапазон цветов. Рассмотрим цветовую гамму как совокупность частиц, а цветовое пространство — как бутылку, предназначенную для хранения этого диапазона частиц.
Вот интерактивный визуал Алексея Ардова , демонстрирующий цветовые пространства. Наведите, перетащите и масштабируйте эту демонстрацию. Измените цветовое пространство, чтобы увидеть визуализацию других пространств.
- Используйте цветовые гаммы, чтобы говорить о диапазоне цветов, например, низкий диапазон или узкая гамма в сравнении с высоким диапазоном или широкой гаммой.
- Используйте цветовые пространства, чтобы поговорить о расположении цвета, синтаксисе, используемом для определения цвета, манипулировании цветом и интерполяции цвета.
Как получить доступ к большему количеству цветов, новым пространствам и результатам отладки
CSS Color 4 содержит множество новых функций и инструментов для CSS и цвета. Во-первых, краткий обзор того, каким был цвет до появления этих новых функций. Затем обзор новых цветовых пространств, синтаксиса и инструментов.
Следующий Codepen показывает вместе все новые и старые синтаксисы цветов:
Обзор классических цветовых пространств
С 2000-х годов вы можете использовать следующие свойства для любых свойств CSS, которые принимают цвет в качестве значения: шестнадцатеричные (шестнадцатеричные числа), rgb() , rgba() , по имени, например hotpink , или с такими ключевыми словами, как currentColor . Примерно в 2010 году, в зависимости от вашего браузера, CSS мог использовать цвета hsl() . Затем в 2017 году появился хекс с альфой . Наконец, совсем недавно hwb() начал поддерживаться в браузерах.
Все эти классические цветовые пространства относятся к цветам одной и той же гаммы sRGB.
шестигранник
Шестнадцатеричное цветовое пространство определяет R, G, B и A с шестнадцатеричными числами. В следующих примерах кода показаны все способы, которыми этот синтаксис может указывать красный, зеленый и синий, а также непрозрачность.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
Цветовое пространство RGB обеспечивает прямой доступ к красному, зеленому и синему каналам. Он позволяет указать сумму от 0 до 255 или в процентах от 0 до 100. Этот синтаксис существовал до того, как в спецификациях появилась некоторая нормализация синтаксиса, поэтому вы увидите синтаксисы с запятыми и без запятых. В дальнейшем запятые больше не нужны.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
ХСЛ
HSL (насыщенность и яркость оттенков), одно из первых цветовых пространств, ориентированных на человеческий язык и общение, предлагает все цвета гаммы sRGB, не требуя при этом от вашего мозга понимания того, как взаимодействуют красный, зеленый и синий. Как и в случае с RGB, изначально в синтаксисе были запятые, но в дальнейшем запятые больше не требуются.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
Еще одно цветовое пространство sRGB, ориентированное на то, как люди описывают цвет, — это HWB (оттенок, белизна, чернота). Авторы могут выбрать оттенок и смешать белый или черный цвет, чтобы найти желаемый цвет.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
Встречайте новые цветовые пространства Интернета
Следующие цветовые пространства предлагают доступ к более широкой гамме, чем sRGB. Цветовое пространство display-p3 предлагает почти вдвое больше цветов, чем RGB, а Rec2020 предлагает почти вдвое больше цветов, чем display-p3. Это много цветов!
Функция color()
Новую функцию color() можно использовать для любого цветового пространства, которое определяет цвета с каналами R, G и B. color() сначала принимает параметр цветового пространства, затем ряд значений каналов для RGB и, возможно, немного альфа.
Вы обнаружите, что многие из новых цветовых пространств используют эту функцию, потому что наличие специализированных функций, таких как rgb , srgb , hsl , hwb и т. д., разрасталось до длинного списка, поэтому проще было использовать цветовое пространство в качестве параметра.
Плюсы
- Нормализованное пространство для доступа к цветовым пространствам, использующим каналы RGB.
- Может масштабироваться до любого цветового пространства RGB с широкой гаммой.
Минусы
- Не работает с HSL, HWB, LCH, okLCH или okLAB.
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
sRGB через цвет()
Это цветовое пространство предлагает те же функции, что и rgb() . Он также предлагает десятичные дроби от 0 до 1, используемые точно так же, как от 0% до 100%.
Плюсы
- Почти все дисплеи поддерживают диапазон этого цветового пространства.
- Поддержка инструментов проектирования.
Минусы
- Не перцептивно линейный (как
lch()) - Нет широкой цветовой гаммы.
- Градиенты часто проходят через мертвую зону .
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
Линейный sRGB через цвет()
Эта линейная альтернатива RGB обеспечивает предсказуемую интенсивность канала.
Плюсы
- Прямой доступ к каналам RGB, что удобно для таких вещей, как игровые движки или световые шоу.
Минусы
- Не перцептивно линейный.
- Черное и белое упаковано по краям.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
Градиенты подробно обсуждаются позже, но сейчас имеет смысл рассмотреть черно-белый градиент srgb и linear-srgb чтобы проиллюстрировать их различия:
ЛЧ
В первом месте этого поста представлен синтаксис для доступа к цветам за пределами диапазона RGB! Кроме того, это первая технология, позволяющая очень легко создавать цвета вне гаммы дисплея. Это связано с тем, что любые цвета пространства CIE (lch, oklch, lab, oklab) способны отображать весь видимый человеком цветовой спектр .
Это цветовое пространство смоделировано по образцу человеческого зрения и предлагает синтаксис для указания любого из этих цветов и многого другого. Каналы LCH — это яркость, цветность и оттенок. Оттенок — это угол, как в HSL и HWB. Легкость — это значение от 0 до 100, но в отличие от легкости HSL, это особая, «перцептивно линейная», ориентированная на человека легкость. Цветность аналогична насыщенности; может варьироваться от 0 до 230, но технически не ограничен.
Плюсы
- Предсказуемое манипулирование цветом благодаря большей степени линейности восприятия (см. oklch ).
- Использует знакомые каналы.
- Часто имеет яркие градиенты.
Минусы
- Легко выйти за рамки.
- В редких случаях градиенту может потребоваться корректировка средней точки, чтобы предотвратить смещение оттенка.
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
ЛАБОРАТОРИЯ
Еще одно цветовое пространство, созданное для доступа к гамме CIE, опять же с перцептивно-линейным измерением яркости (L). Буквы A и B в LAB представляют собой уникальные оси цветового зрения человека: красно-зеленую и сине-желтую. Когда A присваивается положительное значение, он добавляет красный цвет и добавляет зеленый, когда оно ниже 0. Когда B присваивается положительное число, он добавляет желтый цвет, тогда как отрицательные значения относятся к синему.
Плюсы
- Перцептивно последовательные градиенты.
- Расширенный динамический диапазон.
Минусы
- Возможность изменения оттенка.
- Трудно передать автора или угадать цвет при чтении значений.
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
ОКЛЧ
Это цветовое пространство корректирует LCH. И, как и LCH, (L) продолжает представлять перцептивно линейную яркость, C — цветность, а H — оттенок.
Это пространство покажется вам знакомым, если вы работали с HSL или LCH. Выберите угол на цветовом круге для H, выберите степень яркости или темноты, регулируя L, но тогда вместо насыщенности у нас будет цветность. Они практически идентичны, за исключением того, что настройки яркости и цветности, как правило, выполняются парами, или же можно легко запросить цвета с высокой насыщенностью, выходящие за пределы целевой гаммы.
Плюсы
- Никаких сюрпризов при работе с синими и фиолетовыми оттенками.
- Перцептивно линейная легкость.
- Использует знакомые каналы.
- Расширенный динамический диапазон.
- Имеет современную палитру цветов — от Evil Marsians.
Минусы
- Легко выйти за рамки.
- Новый и относительно неизведанный.
- Мало подборщиков цветов.
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
ОКЛАБ
Это пространство корректирует LAB. Он также заявлен как пространство, оптимизированное для качества обработки изображений, что для нас в CSS означает качество градиентов и манипуляций с цветовыми функциями.
Плюсы
- Пространство по умолчанию для анимации и интерполяции.
- Перцептивно линейная легкость.
- Никакого изменения оттенка, как в LAB.
- Перцептивно последовательные градиенты.
Минусы
- Новый и относительно неизведанный.
- Мало подборщиков цветов.
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
Дисплей P3
Гамма и цветовое пространство дисплея P3 стали популярными с тех пор, как Apple поддерживала их с 2015 года на своем iMac. Apple также поддерживает display-p3 на веб-страницах через CSS с 2016 года , на пять лет раньше, чем любой другой браузер. Если исходить из sRGB, это отличное цветовое пространство, с которым можно начать работать при перемещении стилей в более высокий динамический диапазон.
Плюсы
- Отличная поддержка, которая считается базовой для HDR-дисплеев.
- На 50 % больше цветов, чем в sRGB.
- DevTools предлагает отличный инструмент выбора цвета.
Минусы
- В конечном итоге его превзойдут пространства Rec2020 и CIE.
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Рек2020
Rec2020 является частью движения к UHDTV (телевидению сверхвысокой четкости), обеспечивающему широкий диапазон цветов для использования в мультимедиа 4K и 8K. Rec2020 — это еще одна гамма на основе RGB, больше, чем у Display-p3, но она не так распространена среди потребителей, как Display P3.
Плюсы
- Цвета ультра HD.
Минусы
- Не так распространено среди потребителей (пока).
- Не часто встречается в портативных компьютерах или планшетах.
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
А98 RGB
Сокращение от Adobe 1998 RGB, A98 RGB было создано Adobe для отображения большинства цветов, доступных на принтерах CMYK. Он предлагает больше цветов, чем sRGB, особенно в голубых и зеленых оттенках.
Плюсы
- Больше, чем цветовые пространства sRGB и Display P3.
Минусы
- Это не общее пространство, над которым работают цифровые дизайнеры.
- Не многие переносят палитры из CMYK.
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
ПроФото RGB
Созданное Kodak, это пространство с широкой цветовой гаммой уникально предлагает сверхширокий диапазон основных цветов и минимальное изменение оттенка при изменении освещенности. Он также утверждает, что покрывает 100% реальных цветов поверхности , как описано Майклом Пойнтером в 1980 году.
Плюсы
- Минимальные изменения оттенка при изменении освещенности.
- Яркие основные цвета.
Минусы
- Около 13% предлагаемых цветов являются воображаемыми , то есть они не входят в видимый человеком спектр.
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50, XYZ-d65
Цветовое пространство CIE XYZ охватывает все цвета, видимые человеком со средним зрением. Вот почему он используется в качестве стандартного эталона для других цветовых пространств. Y — яркость, X и Z — возможные цветности в пределах заданной яркости Y.
Разница между d50 и d65 заключается в белой точке, где d50 использует белую точку d50, а d65 использует белую точку d65.
Плюсы
- Доступ к линейному освещению имеет удобные варианты использования.
- Отлично подходит для физического смешивания цветов.
Минусы
- Не линейно по восприятию, как lch, oklch, lab и oklab.
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
Пользовательские цветовые пространства
Спецификация CSS Color 5 также содержит способ обучения браузера пользовательскому цветовому пространству . Это профиль ICC , который сообщает браузеру, как разрешать цвета.
@color-profile --foo {
src: url(path/to/custom.icc);
}
После загрузки получите доступ к цветам из этого пользовательского профиля с помощью функции color() и укажите для него значения каналов.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Цветовая интерполяция
Переход от одного цвета к другому встречается в анимации, градиентах и смешивании цветов. Этот переход обычно указывается как начальный и конечный цвета, и ожидается, что браузер будет интерполировать между ними. Интерполяция в данном случае означает создание серии промежуточных цветов для создания плавного перехода вместо мгновенного.
При использовании градиента интерполяция представляет собой серию цветов вдоль формы. Анимация представляет собой серию цветов, меняющихся во времени.
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
При использовании градиента промежуточные цвета отображаются все одновременно:
Что нового в цветовой интерполяции
С добавлением новых гамм и цветовых пространств появились новые дополнительные возможности интерполяции. Переход цвета in hsl от синего к белому приводит к чему-то совершенно отличному от sRGB.
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
Не можете увидеть демо-версию Codepen?
Что же произойдет, если вы перейдете от цвета в одном пространстве к цвету в совершенно другом пространстве:
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
Не можете увидеть демо-версию Codepen?
К счастью для вас, в спецификации Color 4 есть инструкции для браузеров о том, как обрабатывать эти межцветовые интерполяции. В приведенном выше случае для .gradient браузеры заметят различия цветовых пространств и будут использовать цветовое пространство по умолчанию oklab . Вы можете подумать, что браузер будет использовать lch в качестве цветового пространства, поскольку это первый цвет, но это не так, и именно поэтому я показываю второй градиент сравнения .lch . Градиент .lch — это градиент цветового пространства lch.
Меньше полос благодаря 16-битному цвету
До этой работы с цветом все цвета сохранялись в одном 32-битном целом числе, представляющем все четыре канала; красный, зеленый, синий и альфа. Это 8 бит на канал и 2^24 возможных цвета (без учета альфа). 2 ^ 24 = 16 777 216, «миллионы цветов».
После этой работы с цветом, четырех 16-битных значений с плавающей запятой , каждый канал имеет свое собственное число с плавающей запятой, а не смешивается вместе. Всего это 64-битные данные, в результате чего получается гораздо больше, чем миллионы цветов.
Эта работа необходима для поддержки цвета HD. Это увеличивает объем информации о цвете, которую можно сохранить, что имеет приятный побочный эффект, заключающийся в том, что браузер может использовать больше цветов в градиенте.
Градиентные полосы — это когда цветов недостаточно для создания плавного градиента и становятся видны «полоски» цвета. Полосы значительно уменьшены при переходе на цвет с более высоким разрешением.
Управление интерполяцией
Кратчайшее расстояние между двумя точками всегда представляет собой прямую линию. При цветовой интерполяции браузеры по умолчанию выбирают короткий путь. Рассмотрим сценарий, в котором в цветовом цилиндре HSL есть две точки. Градиент приобретает свои цветовые ступени, перемещаясь по линии между двумя точками.
linear-gradient(to right, #94e99c, #e06242)
Вид сверху вниз: цилиндр HSL с линией между ограничителями цвета.
Вышеуказанная линия градиента проходит прямо между зеленоватым цветом и красноватым цветом, проходя через центр цветового пространства. Хотя вышеизложенное отлично помогает в первоначальном понимании, на самом деле это не совсем то, что происходит. Вот градиент в следующем Codepen, и он явно не белый посередине, как показала имитация демонстрации.
Однако средняя область градиента потеряла свою яркость. Это связано с тем, что самые яркие цвета находятся на краю формы цветового пространства, а не в центре, где проходит интерполяция. Обычно это называют « мертвой зоной ». Есть несколько способов исправить или обойти это.
Указание большего количества остановок градиента, чтобы избежать мертвой зоны
Сегодняшний способ избежать мертвой зоны заключается в добавлении дополнительных цветовых ограничителей в градиент, которые намеренно направляют интерполяцию, чтобы оставаться в пределах ярких диапазонов цветового пространства. Это буквально обходной путь, поскольку дополнительные упоры помогают обходить мертвую зону.
Существует инструмент градиента , созданный Эриком Кеннеди , который рассчитывает за вас дополнительные точки цвета, чтобы помочь вам избежать мертвой зоны даже в цветовых пространствах, которые имеют тенденцию тяготеть к ней. Используя его, передавая те же цвета из первого примера, но меняя интерполяцию цвета на HSL, получается следующее:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Вид сверху вниз на цилиндр HSL с изогнутой линией с 9 цветными упорами.
При использовании управляемых точек остановки интерполяция больше не представляет собой прямую линию, а огибает мертвую зону, помогая поддерживать насыщенность, что приводит к гораздо более яркому градиенту.
Хотя этот инструмент отлично справляется со своей задачей, что, если бы вы могли иметь аналогичный или больший контроль прямо из CSS?
Управление цветовой интерполяцией
В Color 4 была добавлена возможность управлять стратегией интерполяции оттенка , что представляет собой новый способ обойти (:wink:) мертвую зону. Подумайте об угле оттенка и рассмотрите градиент на 2 ступени, который меняет только угол, например, меняя оттенок со 140deg на 240deg .
Интерполяция более коротких и длинных оттенков
По умолчанию градиент будет идти по shorter маршруту, если вы не укажете для него longer маршрут. Параметры интерполяции оттенка управляют поворотом угла, например, говоря кому-то повернуть налево, а не направо (хех, Zoolander):
В приведенном выше визуальном примере расстояний интерполяции оттенка смоделированы короткий и длинный пути, чтобы проиллюстрировать разницу. На коротком расстоянии между собой меньше оттенков, потому что он прошел наименьшее возможное расстояние, тогда как на большом расстоянии будет пройдено больше оттенков.
Интерполяция увеличения и уменьшения оттенка
В Color 4 есть еще две стратегии интерполяции оттенков, но они предназначены исключительно для цилиндрических цветовых пространств. Оставив два цвета из предыдущих примеров, теперь визуально показано, как работает увеличение и уменьшение.
Вышеупомянутый Codepen использовал ColorJS для демонстрации ожидаемого результата. CSS, который вы бы написали для достижения того же эффекта без библиотеки Javascript, будет:
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
Чтобы закрыть интерполяцию оттенка, вот забавная игровая площадка, где вы можете изменить оттенок между двумя остановками цвета и увидеть эффекты выбора интерполяции оттенка, а также то, как цветовые пространства меняют результаты градиента. Эффекты могут быть самыми разными; считайте это тем, что в ваш набор инструментов для работы с цветом только что вошли четыре новых трюка.
Градиенты в разных цветовых пространствах
Каждое цветовое пространство, учитывая его уникальную форму и цветовое расположение, дает свой градиент. Посмотрите на примеры ниже, особенно на «синий к белому». Посмотрите, как каждое цветовое пространство обрабатывает это по-разному. Обратите внимание, как многие из них становятся фиолетовыми в середине, это называется «сдвигом оттенка» во время интерполяции.
Не можете увидеть демо-версию Codepen?
Показанное изображение — лишь один из многих примеров из Codepen. Стоит попробовать Canary или Safari Tech Preview, чтобы убедиться в этом самостоятельно.
Некоторые градиенты в этих пространствах будут более яркими, чем другие, или будут меньше проходить через мертвые зоны . Такие пространства, как lab объединяют цвета вместе таким образом, чтобы оптимизировать насыщенность, в отличие от пространств, оптимизированных для записи цвета людьми, например hwb() .
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
Приведенная выше демонстрация, несмотря на то, что результаты невелики, показывает более последовательную интерполяцию с лабораторными данными. Однако синтаксис lab читать непросто: есть отрицательные числа, которые очень незнакомы при использовании RGB или HSL. Хорошие новости: мы можем использовать hwb для знакомого синтаксиса, но попросить полностью интерполировать градиент в другом цветовом пространстве, например oklab.
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
Не можете увидеть демо-версию Codepen?
В этом примере используются те же цвета, что и в hwb, но указывается цветовое пространство для интерполяции в hwb или oklab. hwb — отличное цветовое пространство для высокой яркости, но с возможными мертвыми зонами или яркими пятнами (см. голубую горячую точку в верхнем примере). oklab отлично подходит для перцептивно линейных градиентов, которые остаются насыщенными. Эта функция очень интересна, так как вы можете попробовать несколько разных цветовых пространств, чтобы увидеть, какой градиент вам больше нравится.
Вот Codepen, экспериментирующий с градиентами и цветовыми пространствами, смешивая и сопоставляя стратегии для изучения возможностей. Даже переход от черного к белому в каждом цветовом пространстве разный!
Не можете увидеть демо-версию Codepen?
Ограничение гаммы
Существуют сценарии, когда цвет может требовать чего-то за пределами гаммы. Рассмотрим следующий цвет:
rgb(300 255 255)
Максимум для цветового канала в цветовом пространстве rgb — 255 , но здесь для красного было указано 300 . Что происходит? Зажим гаммы.
Зажим — это когда просто удаляется лишняя информация. 300 станет 255 внутри системы цветопередачи. Цвет теперь зажат в своем пространстве.
Выбор цветового пространства
Многие люди, узнав об этих цветовых пространствах и их эффектах, чувствуют себя ошеломленными и хотят знать, какое «одно» выбрать. Судя по моим исследованиям и опыту, я не считаю одно цветовое пространство единым для всех своих задач. У каждого бывают моменты, когда они приводят к желаемому результату.
Если бы было одно лучшее место, то не было бы так много новых мест.
Однако я могу сказать, что пространства CIE — lab , oklab , lch и oklch — это моя отправная точка. Если их результат не будет тем, что я ищу, я пойду протестировать другие места. Для смешивания цветов и создания градиентов я согласен с выбором спецификации по умолчанию — oklab . Что касается цветовых систем и общих цветов пользовательского интерфейса, мне нравится oklch .
Вот пара статей, в которых люди поделились своими обновленными цветовыми стратегиями с учетом этих новых цветовых пространств и функций. Например, Андрей Ситник пошел ва-банк на oklch , возможно, они убедят вас сделать то же самое:
- ОКЛЧ в CSS: почему мы перешли от RGB и HSL Андрей Ситник
- Цветовые форматы Джоша В. Комо
- ОК, OKLCH Криса Койера
Переход на цвет HD CSS
Существует две основные стратегии обновления цвета вашего веб-проекта для поддержки дисплеев с широкой гаммой:
Изящная деградация
Используйте новые цветовые пространства и позвольте браузеру и операционной системе сами определять, какой цвет отображать в зависимости от возможностей дисплея.Прогрессивное улучшение
Используйте@supportsи@media, чтобы оценить возможности браузера пользователя и, если условия соблюдены, предоставить широкую цветовую гамму.
Если браузер не понимает цвет display-p3 :
color: red;
color: color(display-p3 1 0 0);
Если браузер понимает цвет display-p3 :
color: red;
color: color(display-p3 1 0 0);
У каждого есть преимущества и недостатки. Вот краткий список плюсов и минусов:
Изящная деградация
- Плюсы
- Самый простой маршрут.
- Браузер будет отображать гамму или ограничивать ее до sRGB, если не отображается широкая гамма, поэтому ответственность лежит на браузере.
- Минусы
- Браузер может ограничить гамму или отобразить гамму для цвета, который вам не нравится.
- Браузер может не понять запрос цвета и полностью выйти из строя. Однако это можно смягчить, указав цвет дважды, позволяя каскаду вернуться к предыдущему цвету, который он понимает.
Прогрессивное улучшение
- Плюсы
- Больше контроля с управляемой точностью цветопередачи.
- Аддитивная стратегия, которая не влияет на текущие цвета.
- Минусы
- Вам необходимо управлять двумя отдельными синтаксисами цветов.
- Вам необходимо управлять двумя отдельными цветовыми гаммами.
Проверка поддержки гаммы и цветового пространства
Браузер позволяет проверять поддержку широкой гаммы и цветового синтаксиса CSS и JavaScript. Точная цветовая гамма, которую имеет пользователь, не предоставляется, предоставляется обобщенный ответ, поэтому конфиденциальность пользователя сохраняется. Точная поддержка цветового пространства предоставляется доступной, поскольку она не соответствует возможностям аппаратного обеспечения пользователя, как гамет.
Цветная гамма поддерживает запросы
Следующие примеры кода проверяют диапазон цветов посещающего пользователя на своем дисплее.
Проверка из CSS
Наименьшим конкретным запросом поддержки является запрос на медиа dynamic-range :
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Приблизительно или больше, поддержка может быть расследована с помощью запроса на медиа color-gamut :
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Есть еще два медиа -запроса для проверки поддержки:
Проверка из JavaScript
Для JavaScript функцию window.matchMedia() может быть вызвана и передавать медиа -запрос для оценки.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Приведенный выше шаблон может быть скопирован для остальной части медиа -запросов.
Запросы поддержки цветового пространства
Следующие примеры кода проверяют браузер посещающего пользователя и его выбор цветовых пространств для работы.
Проверка из CSS
Индивидуальная поддержка цветового пространства может быть расследована с помощью запроса @supports :
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Проверка из JavaScript
Для JavaScript функцию CSS.supports() можно вызвать и передавать пару свойств и значений, чтобы увидеть, понимает ли браузер.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Собрать аппаратное и анализ проверки вместе
В ожидании каждого браузера реализовать эти новые цветовые функции, рекомендуется проверить возможности оборудования, так и на способность анализа цвета. Это часто это то, что я использую, когда постепенно улучшаю цвета до высокой четкости:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Отладка цвета с хромированными devtools
Chrome Devtools обновляется и оснащен новыми инструментами, чтобы помочь разработчикам создавать, конвертировать и отлаживать HD Color.
Обновленный цветовой сборщик
Сборщик цветов теперь поддерживает все новые цветные пространства. Позволяя авторам взаимодействовать со значениями канала так же, как и они.
Границы гамма
Также была добавлена линия границы гамма, проведя строку между SRGB и Display-P3 Gamuts. Проясняя, в какой гамме находится выбранное цвет внутри.
Это помогает авторам визуально различать цветы HD и не-HD. Это особенно полезно при работе с функцией color() и новыми цветными пространствами, потому что они способны производить как не HD, так и HD. Если вы хотите проверить, в какой гамме находится ваш цвет, появите цветовую сборку и посмотрите!
Преобразование цветов
Devtools мог преобразовать цвета между поддерживаемыми форматами, такими как HSL, HWB, RGB и HEX в течение многих лет. shift + click на квадратный цветной образец на панели Styles, чтобы выполнить это преобразование. Новые цветные инструменты не просто проходят через конверсию, они дают всплывающее окно, где авторы могут видеть и выбирать нужное, которое они хотят.
При преобразовании важно знать, была ли конверсия подключена, чтобы соответствовать пространству. У Devtools теперь есть значок предупреждения о преобразованном цвете, который предупреждает вас об этой обрезке.
Откройте для себя больше функции отладки CSS в Devtools в их недавнем объявлении .
Заключение
Цветные пространства, не являющиеся SRGB в Интернете, находятся в первые дни, но я считаю, что с течением времени мы увидим увеличение использования у дизайнеров и разработчиков. Например, знание того, какое цветовое пространство для построения системы дизайна является сильным инструментом, чтобы быть в ремевите для создателей. Каждое цветовое пространство предлагает уникальные функции и причина, по которой он был добавлен в спецификацию CSS, и можно начать с них с малого и добавлять по мере необходимости.
Наслаждайтесь игрой с этими новыми цветными игрушками! Больше вибрации, последовательных манипуляций и интерполяций и в целом предоставляют более красочный опыт для ваших пользователей.
Дополнительное чтение
- https://lea.verou.me/2020/04/lch-colors-in-css-what-hy-and-how/
- https://www.w3.org/graphics/color/workshop/slides/lilley/lilley.html
- https://darker.ink/writings/towards-richer-colors-on-the-web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/graphics/color/workshop/slides/erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-paces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/tr/css-color-4/
- https://www.w3.org/tr/css-color-5/
- https://en.wikipedia.org/wiki/cie_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-paces/