CSS

Почему CSS HSL цвета лучше! — Элад Шехтер

Статьи по дизайнуАвтор: admin 12.12.2019

С силой переменных CSS

Введение

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

В Интернете каждый цвет представляет собой комбинацию из 3 цветов: красного, зеленого и синего, как будто каждый пиксель на экране состоит из трех лампочек: зеленой, синей и красный. Наиболее распространенным методом представления цветов в CSS является метод «шестнадцатеричных цветов», а следующим распространенным методом является метод RGB / RGBA. Два подхода отличаются в способе представления значений этих цветов.

пикселей вид с близкого расстояния

Метод шестнадцатеричных цветов — каждый из трех цветов представлен с использованием двузначного шестнадцатеричного числа и ' ] # 'знак предшествует трем цифрам. Каждое из двузначных чисел определяет интенсивность соответствующей «лампочки». Первое двузначное число соответствует красной лампочке пикселя, второе — зеленой лампочке, а последнее — синей лампочке. Мы также можем добавить двухзначное число в конце, которое будет определять непрозрачность цвета.

Как вы, вероятно, знаете, шестнадцатеричное основание означает, что значение цифры может быть между 0 и 15, со значениями 10 –15, представленный буквами от A до F. В каждом из двузначных чисел наименьшее число 00 означает, что лампа выключена, а наибольшее значение FF является самым сильным светом этого определенного цвета. Есть 256 уровней интенсивности для каждого из этих трех цветов. С этими тремя лампочками, которые составляют каждый пиксель цвета, мы можем создать любой цвет, отображаемый на нашем экране. Две необязательные цифры, которые определяют непрозрачность цвета, также представляют собой двузначное шестнадцатеричное число. Наибольшее значение FF означает полную непрозрачность, а наименьшее значение 00 означает полную прозрачность. Числа между ними делают элемент полупрозрачным, то есть цвет смешивается с цветом фона.

Вот пример красного цвета (только первая лампочка включена остальные лампы выключены):

  .box {
 background-color: # ff0000; 
 ширина: 100px; 
 высота: 100 пикселей; 
}

Метод цветов RGB / RGBA — этот метод также основан на сочетании каждого красного, зеленого и зеленого цветов. синий. Однако есть два отличия этого метода от шестнадцатеричного. Во-первых, этот метод использует десятичные значения, а не шестнадцатеричные значения предыдущего способа. Во-вторых, синтаксис — это не строка чисел, а функция — rgb () или rgba () . Функции принимают трехзначное число от 0 до 255 для каждой из красных, зеленых и синих «лампочек». 0 означает, что лампа выключена, а 255 означает, что лампа имеет полную яркость. Функция rgba () принимает четвертый параметр — непрозрачность. Его значение представляет собой десятичную дробь, где 0 означает полную прозрачность, а 1 означает полную непрозрачность, а дробные части между ними — это процент прозрачности элемента.

Вот пример красного цвета в методе RGB :

  .box {
 цвет фона: rgb (255, 0, 0); 
 ширина: 100 пикселей; 
 высота: 100 пикселей; 
}

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

Еще одна потенциальная проблема — это обслуживание. Веб-дизайнерам иногда может потребоваться множество оттенков каждого цвета, например, 30 типов синего, 20 типов оранжевого и т. Д. При попытке сохранить эти многочисленные вариации с помощью переменных CSS мы можем получить слишком много переменных. Что еще хуже, даже если цвета могут быть разных оттенков одного и того же цвета, их RGB-представления никак не связаны. Поэтому, если веб-дизайнер хочет изменить синюю схему на зеленую, ему может потребоваться обновить десять или более отдельных переменных CSS.

Цветовой метод HSL / HSLA — HSL обозначает оттенок насыщенность и легкость
HSL работает так же, как наш мозг воспринимает цвета: цвет, которым мы можем манипулировать с легкостью и насыщенностью.

Свойство оттенка — это цвет, выбранный из палитры. из 360 цветов. Цвета задаются по кругу, и каждый оттенок — это градус в цветовом круге. Выбранный цвет — это основа, из которой мы будем создавать другие оттенки, добавляя насыщенность, яркость или оба.

Свойство насыщенности описывает насыщенность цвета. 0% означает отсутствие цвета (цвет будет серым), а значение 100% покажет цвет в наиболее ярком цвете. Лучше всего использовать значение в диапазоне 10% — 100%, поскольку это позволит нам увидеть основной цвет.

Свойство Lightness описывает интенсивность освещения. Экстремальные значения устранят цвет: 0% будет выглядеть черным, а 100% будет выглядеть белым. Поэтому мы предпочитаем использовать числа от 10% до 90%, поскольку это позволит нам видеть основной цвет.

Свойство альфа-канала (необязательно) — использование HSLA вместо HSL позволяет нам контролировать непрозрачность цвета. Лучше использовать значения в диапазоне 10% — 100%, поскольку это позволит нам увидеть основной цвет (0% означает прозрачный цвет).

Метод HSL решает обе проблемы, которые мы упоминали ранее. Это соответствует тому, как наш разум воспринимает цвета, и это также решает проблему обслуживания. Теперь веб-дизайнеры могут быть удовлетворены, выбрав всего 3–5 базовых цветов и используя их для создания любого количества вариантов цвета.

Теперь, когда мы понимаем, из чего состоит цвет HSL, все, что нам нужно, это структурировать его элегантно.

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

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

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

Базовые начальные точки для параметров насыщенности, освещенности и непрозрачности

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

Насыщенность — начинаются со значения по умолчанию 50% — средний диапазон (должен быть значение больше 0%. Поскольку при значении насыщения 0% цвет будет выглядеть сероватым).
Освещенность — начинается со значения по умолчанию 50% поскольку оно должно быть значение больше 0% и меньше 100%; в противном случае цвет будет выглядеть как черный или белый.
Непрозрачность — s tart со значением по умолчанию 100% . Если вы работаете с HSLA, у вас есть параметр непрозрачности, и лучше всего использовать полную непрозрачность. Значение 100% означает полную непрозрачность, а значение 0% сделает цвет прозрачным.

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

  / ** общие цвета ** / 
: корень {
 / * базовый цвет 1 * / 
 - базовый цвет1 : 60;  / * основной цвет 2 * / 
 - основной цвет2: 120; 
  / * основной цвет 3 * / 
 - основной цвет3: 200; 
}

Затем мы можем создать другие оттенки из каждого из этих базовых цветов. Вот пример создания других оттенков цветов из base-color1.

В этом примере мы определяем 50% -ное значение для насыщенности и изменяем значения яркости для создания вариаций:

  / ** общие цвета ** / 
: корень {
 / * основной цвет 1 * / 
 - основной цвет1: 60; 
 - цвет1 -light: hsla (var (- base-color1), 50%, 75%, 100%); 
 - color1-normal: hsla (var (- base-color1), 50%, 50%, 100%); 
 - color1-darker: hsla (var (- base-color1), 50%, 35%, 100%); 
}

Теперь мы Применим этот метод к остальным базовым цветам:

  / ** common-colors ** / 
: root {
  / * основной цвет 1 * /  
 - основной цвет1: 60; 
 - color1-light: hsla (var (- base-color1), 50%, 75%, 100%); 
 - цвет1 -нормальный: hsla (var (- base-color1), 50%, 50%, 100%); 
 - color1-более темный: hsla (var (- base-color1), 50%, 35%, 100%); [1 9459002]  / * базовый цвет 2 * /  
 - базовый цвет2: 120; 
 - color2-light: hsla (var (- base-color2), 50%, 75 %, 100%); 
 - color2-normal: hsla (var (- base-color2), 50%, 50%, 100%); 
 - color2-darker: hsla (var (- -base-color2), 50%, 35%, 100%); 
   / * базовый цвет 3 * /  
 - базовый цвет 3: 200; 
 - color3-light: hsla (var (- base-color3), 50%, 75%, 100%); 
 - color3-normal: hsla (var (- base-color3), 50%, 50%, 100%); 
 - color3-более темный: hsla (var (- base-color3), 50%, 35%, 100%); 
}

Вот и все! Мы создали умную цветовую схему с цветами HSL / HSLA, структурируя ее с теми же базовыми цветами. Преимущество состоит в том, что теперь мы можем легко обновлять базовые цвета, соответствующим образом затрагивая все их зависимые цвета.

Результат палитры цветов HSL

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

Пример Codepen Live

Создание более общих правил для параметров HSL / HSLA

Если вы веб-разработчик, который хочет сделать еще один шаг вперед, вы можете сгенерировать CSS-переменные для остальных параметров (насыщенность, яркость и непрозрачность), чтобы настроить таргетинг на наиболее часто используемые значения. Например:

 : root {
 / ** обычно используемые уровни насыщенности / яркости / непрозрачности ** / 
 - уровень насыщенности1: 20%; 
 - уровень насыщения2: 50%; / * средний диапазон - нормальный * / 
 - уровень насыщенности3: 80%;  - уровень освещенности1: 75%; 
 - уровень освещенности2: 50%; / * средний диапазон - нормальный * / 
 - уровень освещенности3: 35%; 
  - уровень непрозрачности1: 100%; / * нет непрозрачности - нормальное * / 
 - уровень непрозрачности2: 80%; 
 - уровень непрозрачности3: 60%; 
}

Теперь вы Можно использовать различные комбинации этих параметров, чтобы создать лучшую синхронизацию между другими цветами. Пример:

  - color1-light: hsla (var (- base-color1), 
 var (- saturation-level2), 
 var (--lightness-level1), 
 var (- opacity-level1));

Полный пример на CodePen

Вот и все.
Надеюсь, вы ' Мне понравилась эта статья и я узнал из моего опыта использования лучшего метода для работы с цветами в Интернете.
Если вам понравился этот пост, я был бы признателен за аплодисменты и публикацию: -)

Вы можете подписаться на меня через Twitter .

Другие мои сообщения CSS:
Новая эволюция адаптивного дизайна
Новые логические свойства CSS!
CSS Position Sticky — как это действительно работает!

Кто я?
Я — Элад Шехтер, веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.

Вы можете найти меня в моих группах на Facebook:
CSS Masters
CSS Masters Israel

Статьи с тэгом: CSS

167 CSS Buttons

Автор

О коде

Эффект наведения кнопок социальных сетей

Автор

О коде

Кнопка Привет

О коде

Кнопка 3D социальных сетей

О коде

Закатная пуговица

Автор

О коде

Кнопка "Доблестный"

Автор

О коде

Кнопка «Пузырь в чате»

Автор

О коде

Кнопка графика

Автор

О коде

Пересечение животных, вдохновленное парением

Автор

О коде

Кнопки «Не нажимай меня»

Автор

О коде

Скеморфная пуговица

Автор

О коде

Кнопка транзакции с анимацией при наведении курсора

Кнопки нейморфизма

Автор

О коде

Значок плавания кнопки «Поделиться»

О коде

CSS кнопка «Поделиться»

О коде

Отображение значка при наведении на кнопку

Автор

О коде

Multi Button

Автор

О коде

Мульти-кнопки

Автор

О коде

Мульти-кнопки

Автор

О коде

Multi Button — Pillbox

О коде

CSS Multi Button

Автор

О коде

Кнопка жидкости

Автор

О коде

Кнопка загрузки

Автор

О коде

Анимация кнопки видео

Автор

О коде

Коллекция кнопок

Автор

О коде

Скейоморфные кнопки с реалистичным трехмерным эффектом

Автор

О коде

Только CSS: обычно кнопка

Автор

О коде

Кнопка 3D

Автор

О коде

Кнопка

О коде