Рубрика: Статьи по дизайну

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

Метод 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, структурируя ее с теми же базовыми цветами. Преимущество состоит в том, что теперь мы можем легко обновлять базовые цвета, соответствующим образом затрагивая все их зависимые цвета.

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

Пример 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.