17
Янв
2020

Почему HSL цвета CSS лучше!

Почему HSL цвета CSS лучше!

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

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

Почему HSL цвета CSS лучше!

пиксели при ближайшем рассмотрении

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

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

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

.box{
    background-color: #ff0000;
    width: 100px; 
    height: 100px;
}

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

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

.box{
    background-color: rgb(255, 0, 0);
    width: 100px; 
    height: 100px;
}

Основные проблемы с RGB и шестнадцатеричными методами

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

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

HSL / HSLA в помощь!

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

Почему HSL цвета CSS лучше!

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

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

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

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

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

Выбор базовых цветов для вашего проекта

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

Почему HSL цвета CSS лучше!

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

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

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

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

Насыщенность — начинайте со значения по умолчанию 50% — средний диапазон (должно быть больше значения 0%, поскольку значение 0% сделает цвет сероватым).

Яркость — начните с значения по умолчанию 50%, поскольку оно должно быть больше 0% и меньше 100%; в противном случае цвет будет выглядеть как черный или белый.

Непрозрачность — начните со значением по умолчанию 100%. Если вы работаете с HSLA, у вас есть параметр непрозрачности, и лучше всего использовать полную непрозрачность. Значение 100% означает полную непрозрачность, а значение 0% сделает цвет прозрачным.

Как аккуратно кодировать HSL / HSLA в CSS

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

/**  common-colors  **/ 
:root{
  /* base color 1 */
  --base-color1: 60;
 
  /* base color 2 */
  --base-color2: 120;

  /*base color 3*/
  --base-color3: 200; 
}

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

/** common-colors **/
:root{
  /* base color 1 */
  --base-color1: 60;
  --color1-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{
  /* base color 1 */
  --base-color1: 60;
  --color1-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%);
  
  /* base color 2 */
  --base-color2: 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%);
  
  /*base color 3 */
  --base-color3: 200; 
  --color3-light:  hsla(var(--base-color3), 50%, 75%, 100%);
  --color3-normal: hsla(var(--base-color3), 50%, 50%, 100%);
  --color3-darker: hsla(var(--base-color3), 50%, 35%, 100%);
}

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

Почему HSL цвета CSS лучше!

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

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

Пример на Codepen

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

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

:root{ 
  /** commonly used saturation/lightness/opacity levels **/ 
  --saturation-level1: 20%;
  --saturation-level2: 50%; /* mid range - normal */
  --saturation-level3: 80%;
  
  --lightness-level1: 75%;
  --lightness-level2: 50%; /* mid range - normal */
  --lightness-level3: 35%;
  
  --opacity-level1: 100%; /* no opacity - normal */
  --opacity-level2: 80%;
  --opacity-level3: 60%;
}

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

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

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

Заключение

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

Автор: Elad Shechter

Источник: https://medium.com

Редакция: Команда webformyself.

Share

Тебе может это понравится...