Java, UX, HTML, CSS, WEB-design

Использование цветов HSL в CSS

Краткое описание по статье Использование цветов HSL в CSS

Название: Использование цветов HSL в CSS . Краткое описание: ⭐ Ахмад Шади . Дата публикации: 15.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


  • Ахмад Шадид

  • 0 Комментарии

Использование цветов HSL в CSS

  • 6 минут чтения

  • CSS, Цвета, Инструменты, Методы

Краткое резюме ↬

В этой статье Ахмад Шадид объясняет, что такое HSL, как его использовать, и делится некоторыми полезными вариантами использования и примерами, которые вы можете сразу использовать в своих текущих проектах.

По моему опыту, большинство цветов, которые люди используют в CSS, являются шестнадцатеричными и RGB. В последнее время я стал замечать более широкое использование цветов HSL, однако я все еще думаю, что весь потенциал HSL упускается из виду. С помощью этой статьи я хотел бы показать вам, как HSL действительно может помочь нам лучше работать с цветами в CSS.

Введение

Обычно мы используем шестнадцатеричные коды цветов (шестнадцатеричные цвета), которые хороши, но у них есть несколько проблем:

  • Они ограничивают;
  • Их трудно понять, читая их.

Под «ограниченным» я подразумеваю, что нелегко изменить цвет, не открывая цветовой круг и не выбирая цвет самостоятельно. Кроме того, по шестнадцатеричному коду нелегко догадаться, какой это цвет.

Рассмотрим следующий рисунок:

Рисунок 1

(Большой превью)

Я выбрал шестнадцатеричный цвет для небесно-голубого и более темный. Обратите внимание, что шестнадцатеричные цвета не связаны друг с другом. Трудно сказать, что они оба голубые, но с разными оттенками.

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

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

Что такое ХСЛ?

HSL означает оттенок, насыщенность и легкость. Он основан на цветовом круге RGB. Каждый цвет имеет угол и процентное значение насыщенности и яркости.

фигура 2

(Большой превью)

Давайте возьмем пример небесно-голубого цвета, который мы обсуждали ранее. Во-первых, мы выбираем цвет, как обычно, из палитры цветов, и обязательно получаем для него значение HSL.

Примечание: Я использую приложение Sketch, но вы можете использовать любой инструмент дизайна, какой захотите.

Рассмотрим следующий рисунок:

Рисунок 3

(Большой превью)

Обратите внимание на значения HSL. Первый — это угол, который представляет собой угол цвета, который у нас есть. В данном случае это небесно-голубой. Когда у нас есть угол, мы можем начать настраивать насыщенность и яркость в соответствии с нашими потребностями.

Рисунок 4

(Большой превью)

Насыщенность

Насыщенность определяет, насколько насыщенным должен быть цвет. 0% полностью ненасыщен, а 100% полностью насыщен.

Рисунок 5

(Большой превью)

Легкость

Что касается легкость, он определяет, насколько светлым или темным будет цвет. 0% это черный, и 100% белый.

Рисунок 6

(Большой превью)

Рассмотрим следующий рисунок:

Рисунок 7

(Большой превью)

При этом у нас есть три значения, которые представляют цвет, угол, насыщенность и яркость. Вот как мы можем использовать цвет в CSS:

.element {
    background-color: hsl(196, 73%, 62%);
}

Путем изменения цвета угол, мы можем получить цвета, близкие по насыщенности и светлоте к базовому. Это очень полезно при работе с новыми фирменными цветами, так как позволяет создать согласованный набор вторичных фирменных цветов.

Рассмотрим следующий рисунок:

Рисунок 8

(Большой превью)

Считаете ли вы, что эти три цвета связаны друг с другом с точки зрения того, насколько цвет насыщен, и насколько он темный или светлый? Это было достигнуто только изменением цветового угла. Вот что замечательно в цветах HSL. Его удобнее читать и редактировать, чем любой другой цветовой тип.

Еще после прыжка! Продолжить чтение ниже ↓

Примеры использования цветов HSL

Изменение цвета при наведении

Когда цвет в определенном компоненте должен казаться темнее при наведении курсора, цвета HSL могут идеально подойти для этого. Это может быть полезно для таких компонентов, как кнопки и карточки.

Рисунок 9

(Большой превью)

:root {
  --primary-h: 221;
  --primary-s: 72%;
  --primary-l: 62%;
}

.button {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

.button:hover {
  --primary-l: 54%;
}

Обратите внимание, как я объединил переменные CSS с цветами HSL. При наведении мне нужно только изменить значение яркости. Помните, чем выше значение, тем светлее. Для более темного оттенка нам нужно уменьшить значение.

Сочетание тонированных цветов

HSL может быть удобен, когда у нас есть дизайн, в котором используется один и тот же цвет, но с разными оттенками. Рассмотрим следующую конструкцию:

Рисунок 10

(Большой превью)

Основная навигация заголовка имеет основной цвет, а дополнительная навигация имеет более светлый оттенок. С HSL мы можем легко получить более светлый оттенок, изменив легкость ценность.

Это может быть чрезвычайно полезно при наличии пользовательского интерфейса с несколькими темами. Я создал две темы, и для переключения с одной на другую мне нужно только отредактировать степень оттенка.

Первая тема:

Рисунок 11

(Большой превью)

Вторая тема:

Рисунок 12

(Большой превью)

Цветовые палитры

Изменяя яркость, мы можем создать набор оттенков для цвета, который можно использовать во всем пользовательском интерфейсе, где это возможно.

Рисунок 13

(Большой превью)

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

Вот интерактивная демонстрация, которая показывает это. Ползунок ввода изменяет только значение оттенка, а остальные оттенки изменяются в зависимости от этого.

См. перо [Testing HSL Colors (22 Jun 2021)](https://codepen.io/smashingmag/pen/gOWawpX) Ахмада Шадида.

См. Pen Testing HSL Colors (22 июня 2021 г.) Ахмада Шадида.

Пользовательский белый цвет

Часто нам нужно раскрасить текст белым цветом, чтобы он выделялся. Этот белый цвет скучен, и мы можем заменить его очень светлым оттенком того цвета, который у нас есть.

Рассмотрим следующий пример:

Рисунок 14

(Большой превью)

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

Вариации кнопки

Другой полезный вариант использования цветов HSL — это когда у нас есть первичные и вторичные параметры одного цвета, но с разными оттенками. В этом примере второстепенная кнопка имеет очень светлый оттенок основного цвета. Цвета HSL идеально подходят для этого.

Рисунок 15

(Большой превью)

:root {
  --primary-h: 221;
  --primary-s: 72%;
  --primary-l: 62%;
}

.button {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

.button--secondary {
    --primary-l: 90%;
    color: #222;
}

.button--ghost {
    --primary-l: 90%;
    background-color: transparent;
    border: 3px solid hsl(var(--primary-h), var(--primary-s), var(--primary-l)); 
}

Настройка вариантов основных кнопок выполняется быстро и может быть расширена для более широкого использования. Изменение hue значение изменит все темы кнопок.

Динамические размытые эффекты

В некоторых случаях нам может понадобиться градиент, чтобы получить очень светлый оттенок другого цвета. С HSL мы можем использовать тот же цвет, но с другим значением яркости для второго.

Рисунок 16

(Большой превью)

.section {
  background: linear-gradient(to left, hsl(var(--primary-h), var(--primary-s), var(--primary-l)), hsl(var(--primary-h), var(--primary-s), 95%));
}

.section-2 {
  --primary-h: 167;
}

Градиент начинается справа со сплошного цвета, а затем плавно переходит в более светлый оттенок. Это можно использовать, например, для раздела декоративного героя.

Рисунок 17

(Большой превью)

Вот и все варианты использования. Надеюсь, вы узнали что-то новое и полезное.

Вывод

Цвета HSL очень эффективны, когда мы используем их правильно. Они могут сэкономить нам время и усилия и даже помочь нам изучить варианты применения цвета в дизайне.

Сокрушительная редакция
(вф, ил)




Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Использование цветов HSL в CSS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»