Что такое HSL и почему дизайнеры должны освоить его

Цвет является одним из самых мощных инструментов в инструментарии дизайнера, но работа с традиционными системами, такими как Hex и RGB, иногда может чувствовать себя ограничивающим. Эти форматы работают, но они не отражают то, как мы на самом деле видим или думаем о цвете. Нужен более легкий оттенок или вы хотите соответствовать насыщенному насыщению в разных оттенках? Вы остались догадываться.

Именно здесь появляются оттенок, насыщение и легкость (HSL). Это делает регулировки цвета более визуальными и предсказуемыми, и Divi 5 теперь поддерживает его изначально благодаря его относительным цветам и выпуску функций HSL. Давайте рассмотрим, как это работает и почему вы захотите освоить его.

Почему большинство дизайнеров борются с выбором цвета

Цветовые инструменты часто не соответствуют тому, как мы естественным образом думаем о цвете. Вы видите оттенок синего, который вы любите, но единственный способ запечатлеть его через шестигранный код, такой как #4A90E2. Эти буквы и цифры ничего не значат для вашего мозга.

Цвета шестигранника изготавливаются путем смешивания красных, зеленых и синих значений. Каждая пара (например, 4A, 90, E2) показывает, сколько используется каждого цвета, от 0 до 255. Вместе они создают последний цвет #4A90E2.

У вас могут возникнуть проблемы с выяснением, какие цифры измениться, когда вам нужна более легкая версия вашего бренда Blue. Следует ли увеличить все значения RGB в равной степени? Или отрегулировать только один канал RGB (красный, зеленый или синий)? Числа не соответствуют тому, что ожидают ваши глаза, поэтому вы приспосабливаетесь и предварительно просмотрите до тех пор, пока они не станут правильными.

Традиционные цветовые системы создают большие проблемы, когда вы работаете в разных контекстах. Создание цветовых вариаций становится чистым догадками. Вы хотите пять оттенков, которые работают вместе, но для этого нет системы. Осветление #4A90E2 до #6BA3E8 может выглядеть правильно, или это может выглядеть вымытым. Вы не узнаете, пока не увидите это.

Получение оттенков путем изменения шестигранных кодов не просто. Новые шестигранные значения ( #6BA3E8) тщательно выбираются слева, чтобы создать более легкий оттенок #4A90E2. Справа, просто внесение номинальных изменений (#3B99E5) не освещает цвет, но полностью его меняет.

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

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

Проблема со статическими значениями RGB

Значения RGB не всегда ведут себя так, как вы ожидаете. Зеленый кажется более ярким, чем синий в одной и той же настройке, но система относится к ним одинаково. RGB (128, 128, 128) является идеальным средним серым, но то, как он выглядит, может варьироваться в зависимости от используемого экрана, освещения или цветового профиля.

Хотите более легкую версию цвета вашего бренда? Вы можете попытаться увеличить значения RGB, и иногда вы получаете то, что ожидали. В других случаях вы получаете что -то, что выглядит вымытым и странным. Невозможно сказать заранее.

Синий цвет бренда со значениями RGB одинаково увеличился на +50, что привело к промывому оттенку, что не является ожидаемым гладким более легким тоном. Это показывает, что добавление одинакового количества в каждый канал RGB не всегда производит предсказуемые или сбалансированные цветные оттенки.

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

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

Цветная работа превращается в пробную и ошибку вместо преднамеренного дизайна.

Что такое система оттенка, насыщения и легкость (HSL)?

Оттенок, насыщенность и легкость (HSL) разбивают цвет на три части, которые соответствуют тому, как ваш мозг на самом деле думает о цвете. Hue выбирает базовый цвет из колеса из 360 вариантов. Насыщенность контролирует, насколько яркий или серый этот цвет выглядит. Легкость решает, темно, ярко или где -то между.

Когда вы думаете: «Я хочу темно -зеленый», вы уже думаете о терминах HSL. Вы знаете, что хотите зеленый (оттенок), вероятно, довольно богатый (насыщенность), и на более темной стороне (легкость).

Как эти три компонента работают вместе

Hue работает как цветовое колесо, вырезанное из спектра видимого света. Концы соединяют красный к пурпурным, создавая гладкую петлю каждого возможного цвета. Хотите идеальный апельсин? Начните с красного (0 градусов) и двигаться к желтую около 30 градусов.

Насыщенность измеряет чистоту цвета в процентах. Нулевой процент удаляет весь цвет, оставляя серый. Сто процентов дает максимально яркую версию. Думайте о насыщении как о разнице между неоновым знаком и приглушенной акварелью.

Как работают цвета HSL, вдохновленные графикой на Википедии по одной и той же теме

Легкость варьируется от 0% (чистый черный) до 50% (нейтральный) до 100% (чистый белый). Большинство полезных цветов живут от 20% до 80% легкостью. Это соответствует тому, как вы естественно думаете о том, чтобы сделать цвета легче или темнее.

Почему строители страниц обычно избегают HSL

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

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

Создайте идеальные вариации цвета с новыми управлениями HSL от Divi 5

HSL звучит великолепно в теории, но теория не строит веб -сайты. Вам нужны инструменты, которые поддерживают этот подход. Большинство строителей страниц заставляют вас вернуться в шестнадцатеричные коды и догадки RGB. Divi 5 меняет все о том, как вы работаете с цветом. Но сначала:

Что такое Диви?

Divi - это строитель страниц, который работает иначе, чем другие строители WordPress. Вы получаете инструменты для визуального дизайна, смешанные с серьезными элементами управления типографикой. Живой редактор показывает ваши изменения мгновенно. Отрегулируйте размеры шрифтов, настройка интернет -интернет и просмотрите обновление своей страницы прямо здесь.

Вы можете сбросить более 200 модулей в любом месте. Текстовые блоки, заголовки и специальные контент хорошо играют вместе.

Вот что делает Divi Special: 2000+ готовые макеты, созданные для реальных предприятий. Мы говорим о реальных дизайнах, а не в основных стартовых шаблонах. Нужно что -то для вашего ресторана? Для этого есть макет. Запуск фотостудии? Мы вас покрыли. Консультанты и технологические стартапы тоже получают свои собственные дизайны.

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

Возьмите полный контроль сайта

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

Divi AI привносит искусственный интеллект прямо в ваш рабочий процесс. Создайте заголовки, которые звучат так, как будто вы их написали. Создайте копию продукта, которая точно соответствует голосу вашего бренда.

Он создает целые разделы страниц, которые понимают ваш бизнес.

Пишет фрагменты кода, когда они вам нужны.

Divi AI также работает с вашими изображениями прямо внутри строителя. Опишите, что нужно исправить на любом изображении и как оно вносит эти изменения.

Даже генерируйте совершенно новые картинки по требованию.

Пропустите проблему с пустой страницей с сайтами Divi Quick

Divi Quick Sites устраняет проблему пустой страницы, которая останавливает много проектов, прежде чем они начинают. Профессиональные стартовые сайты поставляются с уже настроенной типографикой. Наша команда дизайнеров создает эти шаблоны с уникальными изображениями и произведениями искусства, которые вы нигде не увидят.

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

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

После этого все остается полностью редактируемым, так что вы можете уточнить типографику, чтобы соответствовать вашему видению.

Что нового в Divi 5?

Divi 5 является следующей версией Builder Page Builder, в настоящее время в Alpha Testing и готова к новым проектам веб -сайта. Мы сосредоточились на практических улучшениях, которые ускоряют вашу повседневную работу и делают строительные площадки более приятными.

Лучшие части Divi оставались на месте, пока мы перестроили все остальное. Свежий дизайн интерфейса соответствует улучшению производительности под капюшоном. Современные методы кодирования питают всю систему сейчас.
Страницы загружаются быстрее, чем раньше. Элементы управления реагируют быстрее, когда вы нажимаете на них. Типография остается последовательной на всем вашем сайте без дополнительной ручной работы.

Вот несколько основных моментов:

• Полная структура перестраивает сбрасывание старой системы шорткодов. Все работает на современной архитектуре на основе блоков, с которой браузеры работают намного лучше.
• Система Flexbox от Divi 5 дает вам прямой контроль для создания современных, отзывчивых макетов, легко управления выравниванием, интервалом и упаковкой без пользовательского кода.
• Цветовая система HSL приводит к цвету элементы управления, которые соответствуют тому, как думают дизайнеры. Отрегулируйте оттенок, насыщенность и легкость вместо того, чтобы догадываться с шестигранными кодами.
• Семь пользовательских точек останова заменяют старый предел трех размеров. Ваша типография выглядит идеально на каждом устройстве, которое используют ваши посетители.
• Функции CSS встроенные средства CALC (), CLAMP (), MIN () и MAX () работают прямо в визуальном редакторе. Создайте адаптивный текст, который естественным образом масштабируется без кода.
• Глобальные переменные дизайна хранят шрифты, цвета и расстояние в одном месте. Измените свой основной заголовок шрифт один раз. Каждый H1 на вашем сайте обновляется автоматически.
• Система проектирования на основе предустановки включает в себя элементы предварительных настроек для отдельных модулей плюс предварительные программы группы для полных стилей типографии. Чтобы сохранить ситуацию, используйте их в разных модулях.
• Новый интерфейс Visual Builder получает пристыкованные панели, окна с вкладками, сочетания клавиш и лучший вид слоев с хлебными крошками. Навигация становится намного проще.
• Вложенные ряды помещают ряды в другие ряды для сложных макетов. Создайте расширенные компоновки без специальных типов разделов.
• Модульные группы объединяют различные элементы в отдельные единицы. Это облегчает управление сложными текстовыми макетами, и вы также можете создавать пользовательские модули.
• Multi-Panel Workspace перемещает панели, где бы ни работали лучше всего. Держите элементы управления типографикой открытыми при настройке других дизайнерских вещей.
• Управление атрибутами копии, пасты и сбрасывают стили типографии между элементами. Выберите конкретные атрибуты для передачи вместо того, чтобы копировать все.
• Режимы света/темного интерфейса уменьшают напряжение глаз во время длинных сессий дизайна.
• Масштабирование холста показывает, как типография выглядит на разных размерах экрана, не покидая редактора.

Откройте для себя все выпуски функций Divi 5

Как создать цвета HSL с Divi 5

Как уже упоминалось, Divi 5 восстанавливает сборщик цвета с нуля. Новый интерфейс сбрасывает шестигранные коды для управления HSL, которые работают так, как ваш мозг думает о цвете. Три ползунка справляются с работой:

• HUE принимает 0–360 градусов, а отрицательные значения обертываются (например, -60 становится 300). Цветовое колесо подключается на обоих концах. Ноль, 360, и отрицательный 360 - все это дают вам одинаковый красный. Нужен дополнительный цвет? Установите оттенок на 180 градусов с отправной точки.
• Насыщенность работает от 0% до 100% и контролирует, насколько ярким выглядит ваш цвет. Нулевой процент откладывает всю интенсивность цвета, оставляя серый. Сто процентов дает полноценный цвет.
• Легкость работает в том же процентном диапазоне. Zero делает черный, 100% создает белый, а 50% показывает чистую форму того, что вы выбрали.

Управление обновляется вживую, пока вы перетаскиваете. Нанесите кнопки или задержки с обновлением, не прерывает ваш рабочий процесс.

1. Построить относительные цвета из глобальных цветов

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

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

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

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

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

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

Вы можете, конечно, создать здесь больше декоративных цветов, и вы все равно можете вводить Hex, RGB или именованные значения цвета вручную.

2. Управление многослойными отношениями с переменными дизайна

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

Эти вложенные отношения показывают, как Divi 5 обрабатывает сложные цветовые иерархии. Когда вы настраиваете основной цвет, сначала обновляет цвет моха, запускающий цвет тени. Вся цепочка остается на связи.

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

3. Примените HSL Colors на ваш сайт

Нажмите на любой текстовый модуль и откройте цветовой сборщик. Ваши сохраненные переменные отображаются с индикаторами. Нажмите «Вторичный цвет», и он заполнит фон раздела. Тот же цвет работает для кнопок, фонов и границ.

Типография работает, когда вы придерживаетесь одного оттенка, но меняете легкость. Заголовки могут использовать основной цвет при легкостью -25%. Текст тела становится немного легче на -15%. Ссылки расположены на уровне -45%. Все относится, но остается ясным.

Фоны нуждаются в цветах вашего бренда. Проталкивающая легкость до 95%. Насыщенность падения до 15%. Теперь у вас есть фирменные фоны, которые не борются с контентом. Кнопки работают с полной насыщением. Название утверждает, что легкость подталкивает на ступеньку. Тот же цвет, разные интенсивности.

Легкий текст нуждается в темном фоне. Числа света говорят вам, что работает. Текст на 50% парах легкостью с фоном ниже -30% легкость.

Разделы с темным текстом на фонах света обращают значения. Те же оттенки, такая же насыщенность. Значения замены легкость, и все готово. И, конечно, все эти цвета сохраняют свои связи даже после применения. Измените одну переменную, и все адаптируется. Как бы то ни было!

4. Сохраните свои цвета HSL в качестве многоразовых пресетов

После того, как вы создали свои модули и применили переменные цветового дизайна, предварительно установите эти цвета в повторно используемые стили. Divi 5 предлагает два предустановленных типа, которые работают вместе:

Опционы группы предустановки управления конкретными аспектами проектирования во всех модулях. Установите свои заголовки с переменной дизайна Text Text Color. Добавьте тени в колонку, используя сгоревший мх и 50% непрозрачность. Наведите значок модуля группы опционов в любом модуле, соответствующим образом пометьте и сохраните.

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

Чтобы подать заявку, перейдите к соответствующему параметру и выберите предустановку.

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

Теперь, когда вы добавляете новую кнопку, примените эту предустановку, и она наследует весь стиль. Чтобы сократить свою работу для вас, возьмите любую пользовательскую предустановку (опциональную группу или элемент), который вы создали, и нажмите на значок Star рядом с ним. Эта предустановка становится по умолчанию для всех новых экземпляров этого элемента или опциональной группы.

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

Создайте цветные системы для ваших веб -сайтов с Divi 5

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

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

Это настоящий контроль дизайна. Divi 5 делает это сегодня.