Вы когда-нибудь открывали цветовую палитру в фотошопе или Figma, видели три непонятных ползунка H, S, L и крутили их наугад в надежде получить "что-нибудь красивое"? Знакомо?
Большинство новичков работают с цветом интуитивно. Ткнули в красный, потом покрутили яркость, потом еще что-то - вроде получилось, а как повторить результат завтра - непонятно.
Сегодня разбираем модель HSL раз и навсегда. Это язык, на котором профессиональные дизайнеры общаются с цветом. Освоите его - и хаотичные тычки превратятся в осознанные решения.
Что такое HSL и почему это важно
HSL - это цветовая модель, которая описывает цвет так, как его воспринимает человеческий глаз. В отличие от технического RGB (который говорит "сколько красного, зеленого и синего светят"), HSL говорит "какой это цвет, насколько он сочный и насколько он светлый".
Расшифровка:
Hue (H) -Тон. Это просто название цвета: красный, оранжевый, синий.
Saturation (S) - Насыщенность. Это интенсивность цвета: от ядовито-яркого до полностью серого.
Lightness (L) - Светлота. Это количество черного или белого в цвете: от абсолютно черного до ослепительно белого.
В любом нормальном графическом редакторе (Photoshop, Illustrator, Figma, GIMP) эти ползунки есть. И сейчас вы научитесь ими пользоваться как хирург скальпелем.
H (Hue) - Тон: география цвета
Тон - это то, что мы в быту называем цветом. "Красное яблоко", "синее небо", "зеленая трава".
Как это устроено математически:
Тон измеряется в градусах на цветовом круге от 0° до 360°.
0° (и 360°) - Красный
120° - Зеленый
240° - Синий
60° - Желтый
300° - Пурпурный
Что это дает на практике:
Когда вы крутите ползунок H, вы двигаетесь по цветовому кругу. Красный плавно перетекает в оранжевый (+30°), потом в желтый (+60°), потом в зеленый и так далее. Это не магия, а предсказуемая физика.
Профессиональный лайфхак:
Нужно подобрать оттенок к существующему цвету? Просто добавьте или отнимите 30-60 градусов. Хотите комплементарный (противоположный) цвет? Прибавьте 180°.
S (Saturation) - Насыщенность: громкость цвета
Насыщенность отвечает за то, насколько цвет "громкий" или "тихий". Это как регулятор громкости на колонках.
Шкала насыщенности:
100% - Чистый, ядовитый, максимально интенсивный цвет. Кричащий. Подходит для акцентов, но утомляет на больших площадях.
50% -Приглушенный, спокойный, "взрослый" цвет. Комфортен для глаз.
0% -Полностью серый. Цвет исчез, осталась только светлота.
Где пригодится:
Фоны. Хотите спокойный фон под текст? Берите фирменный синий и крутите насыщенность до 15-20%. Получите благородный серо-голубой, который не отвлекает, но сохраняет оттенок.
Иерархия. Главная кнопка - 100% насыщенность, второстепенная - 70%, третьестепенная - 40%. Пользователь интуитивно понимает важность, даже не читая текст.
Важный нюанс:
Высокая насыщенность - мощный инструмент. Но на больших поверхностях (фон сайта, плакат) она режет глаз. Дизайнеры премиум-брендов часто работают в диапазоне 20-60% насыщенности. Это создает ощущение дороговизны и сдержанности.
L (Lightness) - Светлота: глубина и объем
Светлота показывает, сколько в цвете черного или белого. Это не то же самое, что яркость (brightness) в других моделях. Светлота -это баланс между черным и белым.
Шкала светлоты:
50% -"Чистый" цвет. Такой, как задумано в спектре.
0% -Абсолютно черный. Цвет исчез, осталась тьма.
100% -Абсолютно белый. Цвет исчез, остался свет.
Как это работает на примере красного:
50% светлота - классический красный (пожарная машина).
25% светлота - темно-бордовый, глубокий, драматичный.
75% светлота -розоватый, воздушный, нежный.
Где пригодится:
Тени. Ошибка новичка - брать черный цвет для теней. Тень получается грязной. Профессионал берет цвет объекта и просто уменьшает светлоту до 20-30%. Тень получается естественной, той же цветовой температуры, что и объект.
Объем. Нужно сделать кнопку объемной? Используйте один цвет, меняя только светлоту. Светлая часть (75%) - блик, средняя (50%) - основное тело, темная (25%) - тень. Идеальный градиент без грязи.
Градиенты. Плавный переход от темно-синего к светло-голубому делается изменением всего одного ползунка L при фиксированном H и S. Переход получается чистым и гармоничным.
Где это пригодится в реальных задачах
Задача 1. Нужен спокойный фон для сайта
Берем яркий синий (H=210°, S=100%, L=50%). Уменьшаем насыщенность до 15% - получаем благородный серо-голубой. Корректируем светлоту до 60% -фон становится светлым и воздушным. Всего два движения.
Задача 2. Нужна система состояний для кнопки
Обычное состояние: H=210°, S=100%, L=50%
Наведение (hover): S=80%, L=45% (чуть темнее и приглушеннее)
Нажатие (active): S=100%, L=30% (еще темнее)
Неактивная (disabled): S=10%, L=70% (почти серый, бледный/
Пользователь видит логику, хотя цвет формально остался тем же синим.
Задача 3. Нужно сделать фотографию в едином стиле
В фоторедакторе можно тонировать снимки, меняя кривые HSL. Хотите добавить фото "киношного" сине-зеленого оттенка? Сдвигайте тон средних тонов в сторону голубого. Хотите сделать кожу менее красной? Уменьшайте насыщенность красного канала.