Всем известно, какую роль цвета играет в любом деле, будь то дизайн веб-сайта, изображение, видео или любой другой графический элемент. Essence, цвет является субJECTИВным опытом, который является результатом взаимодействия света, глаза и мозга. Добавление цвета к веб-сайту дает новую жизнь всему дизайну и графическим элементам. Никто не нравится посещать веб-страницы с белым, черным и серым цветами на них. Цвет делает элементы выглядят более реалистичными и привлекательными для глаз человека.
Не только теоретически, но и психология играет свою роль, когда мы используем цвета на сайтах. Было установлено научно, что определенный набор цветов вызывает определенные эмоции в человеческом мозге, такие как осенние цвета, такие как оранжевый и желтый, представляющие радость или счастье, красный цвет для праздничных сезонов и синий цвет, выглядящий спокойным и доверительным. Кроме того, вы, скорее всего, заметите, что многие компании пищевой промышленности часто используют красный и желтый на своих сайтах, фармацевтические компании стремятся использовать зеленый на своих сайтах, фитнесс-компании иногда используют оранжевый и так далее.
Создание пользовательского интерфейса включает ряд вещей, включая CSS-дизайн сайтов, элементы, CSS-позиционирование, навигацию, текст и т. д. Еще одним фактором пользовательского интерфейса являются HSL-цвета в CSS. CSS-цвета также играют важную роль в пользовательском интерфейсе, который является одним из факторов, которые большинство людей стараются избегать.
Не только разработчики сайтов, но и профессиональные фотографы и редакторы видео также активно используют игру с цветами. Создание идеального изображения – это их работа, и для этого они часто используют цветовой контраст. Таким образом, выбор идеального набора цветов для элементов очень важен.
CSS обладает множеством свойств, включая background-color, color, linear-gradient и т. д., которые позволяют пользователям добавлять или заливать желаемый цвет в элементы. Все эти свойства также помогают пользователям сделать шрифт цветным или даже добавить красивые цветовые модели к текстам и элементам.
Все свойства цвета CSS требуют метода цвета для определения цвета, а затем заливки этого цвета в указанный элемент. CSS имеет несколько встроенных методов цвета, таких как HSL, RGB, HSLA, hexadecimal и т. д. Тем не менее,这些颜色方法需要一系列整数值，使用不同的单位来检索颜色。
虽然许多博客和教程关注于RGB和hexadecimal方法，但仍需要涵盖HSL方法的固有方面。在本文中，我们将深入探讨HSL颜色在CSS中的作用，涵盖有关HSL方法的所有细微差别以及它与其他方法的差异。
在直接跳到HSL方法之前，让我们讨论另外两种CSS颜色方法——RGB和hexadecimal，以及为什么我们需要在CSS中使用HSL颜色。
RGB与Hex之间的差异
RGB方法通过考虑每种颜色都是红色、绿色和蓝色颜色的混合物来工作。这个方法需要三个十进制值，在rgb()函数中分配范围0 – 255内。这些值指定每种颜色的强度级别，其中0值表示最低强度，255表示最高强度。
Вот несколько примеров комбинаций цветов RGB с различными интенсивностями:
Давайте посмотрим на пример, чтобы понять, как работает метод RGB.
.container {
background-color: rgb(0, 200, 120);
width: 100%;
height: 100px;
}Вывод:
Теперь поговорим о hexадециональном методе. Он также основан на том принципе, что каждый цвет является смесью красного, зеленого и синего цветов. Метод hexадециональных чисел требует трех двузначных hex-чисел и начинается с символа ‘#’. Эти три hex-значения указывают соответственно уровни интенсивности красного, зеленого и синего цветов.
Из-за участия hex-значений и того, что база hexадециональных чисел находится в диапазоне от 0 до 15, где значения в диапазоне от 10 до 15 представлены буквами A-F. Таким образом, 00 дает цвет с самой низкой интенсивностью, а FF приводит к максимальной интенсивности.
Вот некоторые распространенные hex-цвета с кодами:
Давайте посмотрим на пример, чтобы понять, как работает метод hex.
.container1{
background-color:#91D8E4;
}Вывод:
Работа с методами RGB и hexадециональным удобна и может дать нам все, что нам нужно. Но это не так просто, как кажется. Рассмотрим, как это делается.
Проблемы, связанные с кодами цвета RGB и hexадециональными.
Одна из значительных проблем, которые эти два метода приводят, заключается в том, что они не интуитивны. Это意味着 они не работают со способом, которым человеческий мозг признает цвета. Когда человек видит цвет, человеческий мозг не разделяет этот цвет на красный, зеленый и синий. Таким образом, для нас становится сложно распознавать цвета по их числам RGB и hexадеционального или десятичного числа.
В среде таких сложностей, одним из примеров, который может возникнуть в повседневной жизни разработчиков или тестеров, может быть необходимость конвертации RGB в hex или наоборот для лучшего понимания и kommunikation человеком.
При создании пользовательского интерфейса UI-дизайнеры и веб-разработчики нужны несколько оттенков определенного цвета, чтобы сохранить постоянную тему на весь интерфейс. Например, 30 оттенков синего, 20 оттенков зеленого, 10 оттенков оранжевого и т. д., в зависимости от требований. Это может создать хаос, если мы использовать CSS-переменные для хранения таких многочисленных вариантов цвета. когда мы замечаем, что числа RGB всех этих вариантов не связаны, ситуация ухудшается.
Однако эти недостатки методов RGB и hexадециональных цветов могут быть устранены с помощью HSL-цветов в CSS. Теперь посмотрим, какую роль играют HSL-цвета в CSS, начиная с того, что это значит метод HSL, как он работает и как он преодолевает недостатки методов RGB и hexадециональных цветов.
Что такое HSL?
HSL — это английский акроним от Hue (Тон), Saturation (Насыщенность) и Lightness (Яркость). То есть, HSL состоит из трех измерений: Тон, Насыщенность и Яркость. Как и другие два метода, которые были рассмотрены выше, метод HSL основан на наблюдении, что каждая краска является смесью красного, зеленого и синего цветов.
Используя HSL, основными цветами являются красный, зеленый и синий, поэтому цветовая циркулярка RGB является главной идеей задницы HSL цветов в CSS.
Цветной цикл RGB (красный, зеленый, синий) представляет цвета, закрапленные в круг. Этот цикл показывает связь между основными, вторичными и третичными цветами. Тем не менее, существует три вида цветовых колес: RGB (красный, зеленый, синий), CMY ( синий, magenta, жёлтый) и RYB (красный, желтый, синий).
Подключенное изображение представляет цикл цветов RGB. Вы можете заметить, что красный – это 0 градусов, зеленый – в 120 градусах, синий – в 240 градусах.现在让我们深入挖掘这三个特性，并了解在使用 HSL 颜色在 CSS 中时幕后发生了什么。
Тон
Тон является первым значением, который назначается в этом методе при использовании HSL цветов в CSS. Это измерение является мерой угла на цветном колесе.Definido angulo valor calculado desde el eje x positivo en la dirección contraria reloj, y el color en ese ángulo se devuelve.既然它是角度的衡量，其默认值为度量单位。然而，这个方法允许我们用其他单位来定义角度值，包括 rad, grad, 和 turn.
Угол может принимать значения от 0 до 360 градусов. Красный — при 0 градусах, зелёный — при 120 градусах, синий — при 240 градусах. Для rad значения extends от 0 до 6.28 rad. favourite unit values in the HSL Colors in CSS are degree values.
Давайте рассмотрим пример, чтобы понять работу Hue.
div {
border: 2px solid;
height: 100px;
background-color: hsl(123deg, 39%, 49%);
}Вывод:
虽然角度值限制在0-360之间，但它可以接受小于0度和大于360度的值。当值超过360时，它通过从360中减去这个值转换为该范围内的值。当值小于0或为负值时，将值添加到360，然后使用结果值来检索颜色。
background-color: hsl(400deg, 39%, 49%);Вывод:
background-color: hsl(-120deg, 39%, 49%);Вывод:
<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
div {
border: 2px solid;
height: 100px;
text-align: center;
font-size: 80px;
margin-bottom: 10px;
}
.container1 {
background-color: hsl(60, 39%, 49%);
}
.container2 {
background-color: hsl(420, 39%, 49%);
}Вывод:
如果我们将角度值考虑在内，那么60 градусов и 420 градусов (420 – 360 = 60) для обоих значений одинаковы. Таким образом, мы получаем одинаковый цвет фона в обоих контейнерах, как наблюдается в примере выше.
.container1 {
background-color: hsl(90, 39%, 49%);
}
.container2 {
background-color: hsl(-270, 39%, 49%);
}Вывод:
Также вы можете наблюдать, что 90 градусов и -270 градусов дают нам одинаковый результат по той же причине, что и в предыдущем примере. 90 градусов и -270 градусов имеют одинаковое значение, если мы рассмотрим их как значения в угловых единицах.
Теперь let’s move on to the 2nd characteristic of the HSL method, i.e., Saturation.
Saturation
Полнота определяет уровень чистоты цвета и насколько цвет будет насыщенным или ненасыщенным. Другими словами, характеристика полноты манипулирует уровнем интенсивности цвета. Интервал полноты принимает целочисленное значение в процентных единицах, чтобы определить полноту цвета.
Посмотрим на пример, чтобы понять работу полноты.
.container{
background-color:hsl(60, 45%,49%);
}Выход:
Если значение характеристики полноты высоко, то уровень интенсивности цвета также высок, и количество тусклого оттенка в этом цвете меньше. Таким образом, 100% значение полноты даст нам чистый цвет, 50% значение принесет в результат половину цвета и половину тусклого оттенка, а 0% принесет полностью тусклый оттенок.
.container1{
background-color:hsl(60, 0%,49%);
}
.container2{
background-color:hsl(420, 25%,49%);
}
.container3{
background-color:hsl(420, 50%,49%);
}
.container4{
background-color:hsl(420, 75%,49%);
}
.container5{
background-color:hsl(420, 100%,49%);
}Выход:
В приведенном выше примере вы можете увидеть разницу, которую мы получаем в цвете фона контейнеров, увеличивая значение характеристики полноты от 0% до 100%. На 0% значении мы получаем полностью тусклый цвет в контейнере 1, и как значение увеличивается, интенсивность цвета также увеличивается. В конце концов, интенсивность наивысшей при 100% в контейнере 5.
Так как характеристика полноты принимает процентное значение, полученное значение falls under 0% – 100% range. Тем не менее, пользователь также может передавать значения, большие чем 100% и меньшие чем 0% в характеристике полноты.
Но как и в характеристике насыщения, никакого использования нет в передаче значений за пределами ограничения, поскольку если пользователь передает значение больше 100%, интенсивность цвета остается равной 100%. На значениях ниже 0% (отрицательные значения), интенсивность остается равной 0%.
.container1 {
background-color: hsl(60, 0%, 49%);
}
.container2 {
background-color: hsl(420, -25%, 49%);
}Выход:
В этом месте вы можете наблюдать, что мы присвоили значения 0% и -25% для характеристики насыщения, и в обоих контейнерах мы получаем同一な背景色.
.container1 {
background-color: hsl(60, 100%, 49%);
}
.container2 {
background-color: hsl(420, 200%, 49%);
}Выход:
В этом примере мы инициализировали значения 100% и 200% для характеристики насыщения, и для этих двух различных значений мы получаем同一な背景色 в обоих контейнерах.
Теперь пришло время для последней характеристики метода HSL, используемого в CSS-цветах HSL, то есть luminance (яркость).
Яркость
Как имя предполагает, характеристика яркости управляет количеством света в цвете. То есть, яркость также может описаться как свойство, управляющее тем, насколько этот цвет будет светлым или темным. Как и характеристика насыщения, характеристика яркости также требует整数值 в процентных единицах.
Посмотрим на пример, чтобы понять работу яркости.
.container {
background-color: hsl(60, 39%, 49%);
}Выход:
.container1 {
background-color: hsl(60, 39%, 0%);
color: white;
}
.container2 {
background-color: hsl(420, 39%, 25%);
}
.container3 {
background-color: hsl(420, 39%, 50%);
}
.container4 {
background-color: hsl(420, 39%, 75%);
}
.container5 {
background-color: hsl(420, 39%, 100%);
}
Выход:
В этом месте вы можете наблюдать, что с 0% яркости фон в контейнере 1 становится тёмным, а как увеличивается значение яркости, яркость в цвете увеличивается, и с 100% яркостью цвет становится полностью белым, поэтому фон в контейнере 5 становится полностью белым.
Как характеристика насыщения, характеристика яркости принимает значения выше 100% и ниже 0%. Но значения выше 100% работают так же, как и 100%, и значения ниже 0% (отрицательные значения) работают так же, как и 0%. Посмотрим на это в действии.
.container1 {
background-color: hsl(60, 39%, 0%);
}
.container2 {
background-color: hsl(420, 39%, -25%);
}Выход:
.container1 {
background-color: hsl(60, 39%, 100%);
}
.container2 {
background-color: hsl(420, 39%, 250%);
}Выход:
В этом примере вы можете наблюдать, что хотя мы присвоили значение яркости 100% для контейнера 1 и значение 200% для контейнера 2, результат для фона остается тем же.
Мы discuss три свойства цвета HSL в CSS, но это не все. Еще один особенность под цветом HSL в CSS – “A”, сокращенно “alfa”. Это четвертая характеристика. Alfa характеристика определяет прозрачность цвета. То есть, alfa характеристика просто регулирует уровень прозрачности цвета. В HSL для использования alfa характеристик используется метод HSLA.
В отличие от других характеристик цвета HSL в CSS, которые требуют значения, состоящего из единиц, alfa характеристика не требует единицы значения. Alfa характеристика требует без единицы значения в пределах от 0 до 1. При 0 цвет становится невидимым или скрытым; при 1 alfa характеристика достигает максимума, и цвет становится полностью видимым.
.container{
background-color:hsla(60, 39%,49%, 0);
}Вывод:
.container{
background-color:hsla(60, 39%,49%, 1);
}Вывод:
Здесь, поскольку мы присвоили alfa характеристике значение 1, фон контейнера начинает проявляться, и мы можем начинать с фона.
Demanding без единицы значения – это не единственное, что отличает alfa характеристики. Alfa характеристика может принимать любое значение от 0 до 1, даже десятичные значения (0.1, 0.2, 0.01), которые не работают в других характеристиках цвета HSL в CSS.
.container {
background-color: hsla(60, 39%, 49%, 0.5);
}Вывод:
В этом примере, как можно заметить, мы присвоили значение 0.5 (половина) свойству alpha. Таким образом, в результате мы получаем фоновый цвет с полупрозрачностью в контейнере. не только для однозначных десятичных дробей, alpha-свойства также принимают двузначные десятичные дроби. Это дает полный контроль над уровнем прозрачности цвета.
Вот пример для показа.
.container {
background-color: hsla(60, 39%, 49%, 0.25);
}Выход:
В этом месте мы передаем значение 0.25, которое является двузначной десятичной дроби для свойства alpha.
Преимущества использования HSL-цветов в CSS
HSL (хром, насыщенность, светлость) цвета является относительно новой технологией в модуле цвета CSS, которая обеспечивает более логический и гибкий способ определения цвета в веб-разработке. Если сравнить с традиционными кодами цвета RGB или hexadecimal, HSL цвета в CSS обеспечивает ряд преимуществ для дизайнеров и разработчиков.
В этой секции мы более детально исследуем преимущества использования HSL цветов в CSS и discuss, как их можно использовать, чтобы создавать впечатляющие и доступные дизайны для веб-страниц и приложений.
Что касается практического использования, HSL цвета в CSS рассматриваются на многих профессиональных уровнях для использования из-за их преимуществ.
Есть несколько преимуществ использования HSL цвета, списанных ниже:
- Улучшает всего рабочего процесса, делая его гораздо более гладким
- Очень полезно, когда мы получаем различные цвета, сохраняя стандартную базовую цвет
- Мощный и простой метод, который предлагает огромное множество возможностей цвета.
- Работает на практическом способе, которым люди наблюдают за цветами, и легко учится и быстро читается
- Цвета, генерируемые методом HSL, ясно выражены, и легко вообразить результат.
Другая значительная ventaja de usar colores HSL en CSS es que она также работает как альтернатива RGB и легко конвертируется в RGB. since оба метода RGB и HSL требуют собрание числовых значений для работы, мы можем воспользоваться методами, которые легко конвертируют числовые значения цветов HSL в относительные значения для метода RGB.
Для упрощения дел несколько онлайн-конвертеров цветов могут конвертировать методы цвета из одного в другой. Все эти преимущества делают метод HSL цветов в CSS preferido для определения цветов в проектах. И есть много других причин, почему количество разработчиков, выбирающих использовать цвета HSL в CSS вместо других, увеличивается каждый день. хотя большинство экспертов CSS еще предпочитают использовать методы HEX или RGB вместо HSL, HSL привлекает внимание каждый день.
Применение цветов HSL в CSS
Цвета HSL в CSS обеспечивают гибкий и интуитивный способ определения цвета и имеют многочисленные применения в веб-разработке. Вот несколько ключевых применений использования цветов HSL в CSS:
Окрашенные цвета
На профессиональном уровне, чтобы создать постоянный theme по всему интерфейсу, тема сайта разрабатывается с использованием различных оттенков определенного цвета на различных секциях интерфейса. Метод HSL очень удобен в таких ситуациях.
В этом примере мы рассмотрели два базовых макета сайта. В обоих случаях в заголовке раздела находится фон с цветом, а в содержимом раздела — тот же цвет, но с намного светлым оттенком. Чтобы достичь этого эффекта, мы установили для заголовка чуть более низкие значения характеристики светлоты, а для содержимого — высокие значения.
Исследуя характеристику светлоты с различными значениями, мы можем получить темные и светлые оттенки同一 цвета, чтобы использовать их в темах сайта.
Темные оттенки цвета при наведении
Вы, скорее всего, сталкивались с тем, что некоторые элементы интерфейса сайта меняют цвет при наведении мыши на них. их цвет из светлого оттенка меняется на темный. В этом месте CSS-цвета HSL играет ключевую роль, для создания светлых и темных оттенков одного и того же цвета.
button {
padding: 10px;
border-radius: 20px;
background-color: hsl(240, 39%, 70%);
color: white;
font-size: 20px;
}
button:hover {
background-color: hsl(240, 39%, 50%);
cursor: pointer;
}
В этом примере вы можете наблюдать, что у верхнего кнопки цвет светлый, для этого мы установили значение характеристики светлоты на 70%. А после наведения курсора, цвет кнопки изменяется на более темный, как вы можете заметить на нижней кнопке. Чтобы достичь этого эффекта, мы назначили значение характеристики светлоты в 50%, которое ниже, чем у верхней кнопки.
Оттенки белого цвета
В большинстве случаев мы используем белый цвет для текста, чтобы его отобразить с небольшой разницей с остальным интерфейсом сайта. Но использование одного и того же оттенка белого для каждого текста приглушает user experience. чтобы избежать этого, мы можем использовать различные оттенки белого, чтобы текст выделялся и оставался интересным.
Цвет HSL в CSS поможет нам получить различные оттенки белого цвета. Мы можем добавить различные значения характеристике светлоты в методе HSL, чтобы получить различные оттенки белого цвета.
.container1 {
color: hsl(30, 49%, 100%);
}
.container2 {
color: hsl(30, 49%, 90%);
}
.container3 {
color: hsl(30, 49%, 95%);
}
.container4 {
color: hsl(30, 49%, 85%);
}Выход:
В этом примере вы можете наблюдать, что в всех четырех контейнерах текст не является базовым белым цветом. Мы использовали различные оттенки белого, чтобы придать ему захватывающий вид и сохранить его белым. Для этого мы манипулировали значением характеристики светлоты для цвета текста.
Типы кнопок
Цвета HSL в CSS также очень удобны, когда у нас есть два различных оттенка同一 цвета для кнопок. Ассигнование различных оттенков одного и того же цвета делает его легко идентифицировать, какая из кнопок является основной и какая является вторичной.
В реальной жизни тёмные оттенки цвета используются для основных кнопок, а светлые оттенки — для вторичных. Чтобы получить светлый и темный оттенок одного и того же цвета, мы передаем высокие и низкие значения характеристики светлоты в методе HSL.
Посмотрим пример.
.primary {
color: white;
background-color: hsl(10, 49%, 55%);
}
.secondary {
background-color: hsl(10, 49%, 80%);
}Выход:
В приведенном выше примере верхняя кнопка является основной, а нижняя — вторичной. Тёмный оттенок цвета используется в основной кнопке с низким значением светлоты, а светлый оттенок — во вторичной с высоким значением светлоты.
Цвета темной темы
Корректное использование цветового контраста является незаменимым в пользовательском интерфейсе. особенно когда пользователь включил темную тему на веб-сайте. Согласно исследованиям, проведенным в 2022 году, 81,9% пользователей используют темную тему на своих смартфонах. из этого вы можете представить важность цветового контраста в пользовательских интерфейсах темной темы.
Согласно стандартам доступности WCAG, для текста тела против темных поверхностей должна быть сохранена не менее 4:5:1 пропорция. и для соблюдения этого правила не используются яркие цвета в темах темного фона. Использование ярких цветов также увеличивает напряжение глаз, если они используются с темным фоном.
На приведенном выше рисунке ясно, что текст с низкой значимостью цвета легче читать, чем текст с высокой значимостью цвета. поэтому всегда рекомендуется использовать нейтральные цвета против темных фонов.
Как выбрать лучший определитель цвета
Три метода, которые мы обсудили, имеют свои преимущества и недостатки. приходится определять, какой определитель цвета наилучшим образом соответствует его назначению. нет общего фактора, по которому можно сравнить все три определителя цвета, но let’s examine each of these.
Hexadecimal
Если вы не работаете в области дизайна и создания проектов для личного использования, то вам может пришться использовать метод hexadecimal для определения цвета. Многие разработчики предпочитают метод hexadecimal, так как его простота не включает сложности, связанные с RGB и HSL Colors в CSS.
Скопируйте шестнадцатеричный код нужного цвета и вставьте его в свою программу. Но проблемы возникают, когда нам нужно управлять непрозрачностью цвета. Шестнадцатеричный метод не дает пользователям возможности управлять непрозрачностью цвета.
RGB
Теперь о том, когда следует выбирать метод RGB: этот метод удобен для всех профессиональных разработчиков и дизайнеров в области редактирования фотографий и проектирования. Другая причина заключается в том, что метод RGB является наиболее часто используемым спецификатором цвета во многих популярных программах для дизайна, включая CorelDraw, PhotoShop и Illustrator. Но метод RGB не справляется с задачей создания различных оттенков одного и того же цвета без излишней сложности.
HSL
Теперь рассмотрим метод HSL. Профессиональные веб-разработчики и дизайнеры пользовательских интерфейсов стремятся поддерживать общую тему во всем интерфейсе. В этой ситуации использование HSL Colors в CSS становится рукой помощи благодаря его способности изменять оттенок цвета путем изменения значений характеристик насыщенности и светлоты. В конечном итоге все сводится к индивидуальным предпочтениям. Вы можете выбрать любой из этих трех спецификаторов для выполнения своей работы.
Совместимость с браузерами
Не имеет смысла указывать цвета, если заданные цвета не дают желаемого результата в браузерах. Чтобы избежать такой ситуации, спецификатор цвета, используемый при разработке пользовательского интерфейса, должен быть совместим с каждым браузером.
К счастью, работа HSL Colors в CSS совершенно не зависит от браузера. Метод HSL полностью совместим с браузерами. Поэтому, какой бы браузер ни использовал пользователь, он всегда попадет на веб-страницу с правильно заданными цветами.
Однако вы можете провести кроссбраузерное тестирование, чтобы убедиться, что HSL Colors в CSS дает желаемый результат в каждом браузере. Платформы непрерывного тестирования качества (например, LambdaTest) помогут вам провести тестирование кроссбраузерной совместимости в различных реальных браузерах, устройствах и комбинациях ОС. Она проверяет, правильно ли работают заданные цвета CSS в браузерах и на устройствах.
Завершение!
В этом блоге мы узнали о роли цветов HSL в CSS и об их отличии от других цветовых методов. Мы также обсудили применение HSL-цветов в CSS и их преимущества. Мы также узнали, как HSL Colors в CSS обеспечивают большую гибкость и точность при задании цветов в веб-дизайне.
Используя HSL Colors в CSS, дизайнеры могут получить больше контроля над насыщенностью и светлотой цветов, что приводит к более широкому диапазону оттенков и тонов, доступных для использования на веб-сайтах и в приложениях, чтобы соответствовать идентичности бренда или эстетическому видению.
Цвета HSL в CSS обеспечивают большую доступность для людей с ограниченными возможностями; просто регулируя светлоту и насыщенность цветов, можно создать более контрастный и разборчивый текст и другие элементы дизайна, облегчая пользователям навигацию и понимание содержимого. В целом, цвета HSL в CSS предоставляют веб-дизайнерам и разработчикам мощный инструмент для создания ярких и доступных цветовых схем в своих веб-проектах.
Source:
https://dzone.com/articles/create-cohesive-ux-using-hsl-colors-in-css