Вариации исходного оттенка с разной светлотой

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

Такой расчет сохраняет визуальную связь между всеми ступенями полученной шкалы.

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

Принцип формирования вариаций по светлоте и насыщенности

Предметная основа построения цветовых вариаций опирается на строгую фиксацию базового оттенка (Hue) при пошаговом изменении двух независимых параметров: светлоты (Lightness) и насыщенности (Saturation). Фиксация тона удерживает цвет в одной температурной и спектральной зоне на протяжении всей шкалы. За счет этого при переходе от самых светлых образцов к глубоким темным не возникает паразитных цветовых сдвигов - например, синий цвет при высветлении не уходит в фиолетовый, а желтый при затемнении не превращается в грязно-зеленый.

Классические типы цветовых градаций: тинты, тени и тона

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

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

Разница между светлотой, насыщенностью и хроматичностью

При формировании градаций важно разделять изменение светлоты (Lightness) и изменение хроматичности (Chroma) или интенсивности цвета. Светлота определяет исключительно степень близости оттенка к белому или черному полюсу. Насыщенность и хроматичность отвечают за чистоту цветового сигнала и его удаленность от нейтральной серой оси той же светлоты.

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

Комбинированное управление этими параметрами в рамках одного цветового тона выстраивает полную матрицу оттенков для прикладных задач:

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

Математика изменения цвета в моделях HSL, HSB и RGB

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

Цилиндрическая система координат HSL

Модель HSL выступает базовой системой для независимого управления параметрами цвета при генерации монохромных шкал. В этой координатной сетке цветовой тон фиксируется в градусах от 0° до 360° на цветовом круге, а модификация вариаций происходит за счет изменения двух процентных осей:

• Ось насыщенности регулирует чистоту оттенка в диапазоне от 0% до 100%, где нулевое значение соответствует ахроматическому серому цвету выбранной светлоты, а максимальное - наиболее чистому цвету на текущем уровне яркости.
• Ось светлоты распределяет градации по вертикали от 0% (абсолютный черный) до 100% (абсолютный белый). Полностью открытый спектральный цвет при максимальной насыщенности располагается строго на экваторе этой шкалы - в точке со значением светлоты 50%.

Такое геометрическое разделение позволяет формировать цветовую растяжку простым арифметическим шагом: при зафиксированном угле тона и постоянной насыщенности изменение координаты светлоты от 10% до 90% с шагом в 10% дает равномерный ряд от глубоких теней до легких пастельных тинтов.

Отличия расчетов в моделях HSB, HSV и HWB

Хотя модели HSB (идентичная ей HSV) и HWB также опираются на базовый градус цветового тона, математика формирования светлых и темных вариаций в них устроена иначе, чем в HSL.

В пространстве HSB вертикальная ось отвечает за яркость сияния и также измеряется от 0% до 100%. Однако чистый спектральный цвет здесь находится на отметке яркости 100% при насыщенности 100%. Чтобы получить в HSB светлый тинт (смешать цвет с белым), недостаточно изменить один параметр: требуется удерживать яркость на уровне 100% и одновременно снижать насыщенность к 0%. Понижение самой координаты яркости при фиксированной насыщенности уводит цвет только в сторону черного полюса.

Модель HWB оперирует еще более наглядными для смешивания координатами - долей белого и долей черного в процентах от 0% до 100%. Чистый тон задается при нулевых значениях обоих параметров. Увеличение доли белого напрямую формирует тинты, увеличение доли черного создает тени, а одновременное добавление обоих показателей приглушает цвет, образуя серые тона. Если сумма процентов белого и черного достигает или превышает 100%, значения пропорционально нормализуются, а оттенок полностью теряет цветность и превращается в нейтральный серый.

В таблице ниже показано, как различаются числовые координаты одних и тех же цветовых состояний в трех цилиндрических моделях на примере чистого синего тона (240°):

Перевод координат в аддитивную модель RGB и формат HEX

Экраны устройств воспроизводят цвет путем сложения свечения трех базовых каналов в аддитивной модели RGB, где интенсивность красного, зеленого и синего компонентов задается целым числом от 0 до 255 (или в нормализованном виде от 0 до 1). В рамках самой модели RGB изменять светлоту или насыщенность напрямую неудобно: чтобы сохранить исходный оттенок, приходится синхронно пересчитывать пропорции сразу всех трех каналов.

При изменении вариаций цвета в RGB действуют следующие закономерности распределения каналов:

• При высветлении оттенка (движении к белому) значения всех трех каналов подтягиваются вверх к максимуму (255, 255, 255), а разрыв между доминирующим и остальными каналами сокращается.
• При затемнении (движении к черному) показатели красного, зеленого и синего пропорционально убывают в сторону (0, 0, 0).
• При снижении насыщенности значения всех трех каналов сближаются друг с другом вокруг общего среднего уровня яркости; когда числа в каналах становятся полностью равными (например, 128, 128, 128), цвет становится абсолютно серым.

Математический перевод координат из HSL (при нормализованных значениях насыщенности S и светлоты L от 0 до 1) в каналы RGB выполняется через расчет промежуточного размаха хроматичности C и смещения светлоты m:

C = (1 - |2 × L - 1|) × S
X = C × (1 - |(H / 60°) mod 2 - 1|)
m = L - C / 2

В зависимости от того, в какой из шести секторов цветового круга по 60° попадает угол H, тройка предварительных значений распределяется между каналами (значения C, X и 0 меняются местами), после чего к каждому каналу прибавляется константа m, а результат умножается на 255 и округляется до целого числа.

Для компактной записи полученных координат RGB применяется шестнадцатеричный формат HEX. Десятичное значение каждого канала от 0 до 255 делится на 16: целая часть и остаток от деления переводятся в систему счисления с основанием 16 (используются цифры от 0 до 9 и латинские буквы от A до F). В результате три пары символов объединяются в шестизначную строку после символа решетки. Например, чистый оттенок со значениями каналов (59, 130, 246) при переводе каждого числа в шестнадцатеричный вид (3B, 82, F6) формирует код #3B82F6.

Линейная интерполяция между опорными цветовыми точками

Помимо пошагового сдвига параметров в рамках одной модели, для расчета промежуточных градаций используется линейная интерполяция цвета. Этот математический метод вычисляет координаты оттенка, расположенного на заданном относительном расстоянии t (где t изменяется от 0 до 1) на прямой линии между двумя опорными цветами A и B:

Color(t) = A + t × (B - A)

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

• При поканальной интерполяции в пространстве RGB отдельно рассчитываются промежуточные значения для красного, зеленого и синего каналов. Если находить середину (t = 0.5) между базовым цветом (59, 130, 246) и белым (255, 255, 255), каждый канал усредняется арифметически, образуя оттенок (157, 193, 251).
• При интерполяции в пространстве HSL между двумя вариациями одного тона угол оттенка остается неизменным, а формула применяется напрямую к процентам насыщенности и светлоты, что исключает проседание чистоты цвета на промежуточных шагах.

Построение монохромных шкал для UI-дизайна и дизайн-систем

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

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

Формирование функциональных палитр и визуальная иерархия

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

• Основные цвета задают общий характер интерфейса и считываются пользователем в первую очередь. На основе главной монохромной шкалы окрашиваются ключевые навигационные панели, активные вкладки, главные управляющие элементы и фирменные блоки.
• Акцентные цвета привлекают внимание к целевым точкам взаимодействия. Их шкалы строятся из оттенков с высокой насыщенностью и применяются точечно: для элементов CTA, индикаторов новых уведомлений, плашек со специальными статусами или промо-меток.
• Вспомогательные цвета поддерживают основную палитру в сложных компонентах. Такие градации востребованы при визуализации данных, построении многосоставных графиков, диаграмм, календарных сеток и категориальных тегов, где требуется развести несколько информационных потоков.
• Нейтральные цвета отвечают за каркас страницы, фоновое пространство и типографику. Вместо чистых ахроматических серых оттенков в интерфейсах часто генерируют шкалу с минимальной насыщенностью (например, в диапазоне от 2% до 8%), сохраняя угол основного корпоративного тона. Это придает серым поверхностям легкий холодный или теплый оттенок, связывая их с остальными элементами UI-кита.

Распределение тинтов, тонов и теней по компонентам интерфейса

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

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

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

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

Ниже показано типовое распределение участков монохромной шкалы по ролям и элементам в рамках единого руководства по стилю:

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

Использование градаций оттенка для состояний интерфейса и тем оформления

Помимо распределения цветов по статичным блокам макета, монохромная шкала решает задачу визуального отклика при взаимодействии с интерфейсом. Во фронтенд-разработке и UX-дизайне обратная связь от элементов управления строится на предсказуемом изменении базового цвета без смещения самого оттенка (Hue). Когда пользователь наводит курсор на кнопку или кликает по ссылке, глаз должен считывать изменение статуса того же самого объекта, а не появление нового цветового акцента.

Проектирование интерактивных состояний через сдвиг светлоты и насыщенности

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

Для формирования визуального отклика интерактивных компонентов в рамках одного цветового тона применяются следующие правила модификации параметров:

• Состояние наведения (hover). Сигнализирует о том, что элемент кликабелен и готов к действию. Для кнопок со сплошной заливкой средних тонов обычно выбирается соседняя ступень шкалы со сдвигом светлоты (Lightness) на 5-10% в сторону затемнения или высветления. Для прозрачных и второстепенных кнопок при наведении появляется фоновая подложка из самого светлого тинта (Lightness 92-96%) того же оттенка.
• Состояние нажатия (active). Фиксирует момент клика или касания экрана. Чтобы создать ощущение физического продавливания элемента, используется более глубокая тень - светлота снижается еще на одну-две ступени относительно состояния hover (суммарный сдвиг на 12-20% от базового цвета). В альтернативных схемах заливка может оставаться прежней, но вокруг компонента или внутри него появляется плотный контур умеренно темного тона.
• Состояние фокуса (focus). Критически важно для навигации с клавиатуры и работы с формами ввода. Сам интерактивный блок чаще всего сохраняет базовый цвет, а вокруг него отрисовывается внешнее кольцо или сдвоенная рамка (outline). Для этого кольца берут умеренно светлую, но достаточно насыщенную вариацию исходного оттенка (Lightness 65-80%), которая отчетливо видна на фоне страницы, но не спорит с основной заливкой кнопки.
• Неактивное состояние (disabled). Показывает, что функция временно недоступна (например, кнопка отправки до заполнения всех обязательных полей). Здесь ключевую роль играет снижение насыщенности (Saturation) до минимума (0-15%) в сочетании с высокой светлотой (Lightness 80-90%) для фона и средними приглушенными тонами для текста. За счет сохранения минимальной доли исходного Hue заблокированный элемент не выглядит чужеродным серым пятном, а остается частью общей палитры.

В таблице ниже показан пример распределения координат цвета на базе синего оттенка (Hue 220°) для проектирования всех состояний основной кнопки действия и поля ввода:

Адаптация градаций при переключении светлой и темной темы

Наличие развернутой шкалы светлоты и насыщенности упрощает проектирование ночного режима (темной темы) интерфейса. Прямая инверсия цветов, при которой чисто белый фон меняется на абсолютно черный, а темные элементы механически заменяются светлыми, в современных продуктах почти не применяется: слишком резкие перепады яркости вызывают быстрое утомление глаз в условиях слабого внешнего освещения.

При переводе интерфейса в темную тему сгенерированная монохромная линейка перераспределяется по двум основным правилам: зеркальный сдвиг ступеней светлоты и принудительное снижение насыщенности.

Зеркальное переназначение ступеней светлоты

Если в дневном режиме основой экрана служат предельно светлые тинты (Lightness 95-100%), а глубокие тени (Lightness 5-15%) отвечают за текст и иконки, то в ночном режиме шкала читается в обратном направлении. Глубокие темные вариации базового оттенка становятся основным фоном страницы. При этом для создания визуальной глубины и разделения слоев в темной теме используется принцип высветления: чем ближе элемент расположен к пользователю по оси Z (например, всплывающее модальное окно или выпадающий список поверх основной карточки), тем выше ступень светлоты выбирается для его подложки (переход от Lightness 8% на базовом фоне к 14% у карточки и 20% у выпадающего меню).

Вектор поведения интерактивных состояний также часто меняется на противоположный. На темном фоне дополнительное затемнение кнопки при наведении (hover) может оказаться незаметным, поэтому вместо ухода в тень для отклика используют шаг в сторону высветления - например, сдвиг Lightness с 55% до 63%.

Снижение насыщенности для разгрузки зрения

Чистые цвета со 100%-ной насыщенностью, которые органично смотрятся на белом фоне в виде кнопок или бейджей, на темной подложке начинают визуально «вибрировать» и расплываться по краям. Чтобы убрать этот оптический эффект и снизить зрительную нагрузку, для темной темы из палитры выбирают приглушенные вариации того же оттенка.

Насыщенность акцентных элементов, плашек и крупной графики в ночном режиме обычно снижают на 15-30% по сравнению с дневными значениями, одновременно немного смещая их светлоту вверх (в диапазон Lightness 60-75%). В результате брендовый или функциональный цвет сохраняет полную узнаваемость за счет неизменного параметра Hue, но воспринимается мягким пастельным акцентом, комфортным для чтения с экрана в темноте.

Светимость оттенков, цветовой контраст и читаемость

Математический параметр светлоты в геометрических цветовых моделях не равен тому, насколько ярким цвет воспринимается человеческим глазом на экране. Для обеспечения визуальной доступности и четкой читаемости текста при выборе пар оттенков из монохромной шкалы учитывают не только координату Lightness, но и относительную светимость цвета (Luminance).

Разница между математической светлотой и относительной светимостью

В модели HSL координата Lightness распределяется равномерно от 0% до 100% независимо от выбранного спектрального тона. Однако фоторецепторы сетчатки глаза обладают разной чувствительностью к световым волнам различной длины. В результате теплые и холодные цвета при одинаковых математических значениях Lightness имеют совершенно разную физическую и воспринимаемую яркость.

Относительная светимость (Luminance, обозначается как Y или L) отражает фактическое количество света, излучаемого пикселем, с учетом спектральной чувствительности зрения. В стандартном цветовом пространстве этот показатель рассчитывается на основе линеаризованных каналов RGB с применением весовых коэффициентов: зеленый спектр дает около 71.5% вклада в общую светимость, красный - около 21.3%, а синий - всего 7.2%.

Из-за этой асимметрии возникает заметный визуальный перекос при генерации палитр для разных базовых оттенков:

• Желтые, салатовые и бирюзовые оттенки при Lightness 50% обладают высокой относительной светимостью. Белый текст на такой подложке сливается с фоном и теряет читаемость, тогда как темно-серый или черный текст читается свободно.
• Синие, фиолетовые и пурпурные тона при тех же 50% светлоты имеют крайне низкую светимость и воспринимаются глазом как плотные темные цвета. На таком фоне черный шрифт становится неразличимым, а белый дает четкий контраст.
• Оранжевые, красные и пурпурно-розовые оттенки на отметке Lightness 50% находятся в пограничной зоне, где достичь достаточной читаемости для мелкого текста сложно как с белым, так и с черным цветом переднего плана без дополнительного сдвига по шкале светлоты.

Критерии контрастности по стандартам WCAG и методу APCA

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

Классический коэффициент контрастности WCAG

В руководстве WCAG 2.x контрастность определяется через отношение относительной светимости более светлого оттенка (L1) к относительной светимости более темного оттенка (L2) по формуле (L1 + 0.05) / (L2 + 0.05). Результат выражается в виде пропорции от 1:1 (полное совпадение цветов) до 21:1 (чистый черный цвет на чисто белом фоне).

Для распределения градаций оттенка по ролям в интерфейсе используют три базовых пороговых уровня:

• Низкоконтрастные сочетания (коэффициент ниже 3:1). Применяются для декоративных элементов, неактивных состояний (disabled), фоновых разделителей и заливки второстепенных подложек, которые не несут смысловой текстовой нагрузки.
• Среднеконтрастные сочетания (коэффициент от 3:1 до 4.5:1). Минимально допустимый порог для крупного шрифта (от 18 пунктов или от 14 пунктов при жирном начертании), заголовков, а также для значимых графических иконок и границ активных полей ввода.
• Высококонтрастные сочетания (коэффициент от 4.5:1 для уровня AA и от 7:1 для расширенного уровня AAA). Обязательное требование для основного наборного текста, мелких подписей и табличных данных.

Полярный расчет контраста Lc по алгоритму APCA

Метод расчета полярного контраста Lc в рамках алгоритма APCA учитывает не только светимость пары оттенков, но и пространственную частоту шрифта (кегль и толщину линий), а также полярность оформления - то есть разницу восприятия светлого текста на темном фоне и темного текста на светлом фоне.

В отличие от простой пропорции WCAG, индекс Lc имеет знак полярности и варьируется в диапазоне от 0 до примерно ±108. Одинаковая пара оттенков из монохромной шкалы дает разное значение Lc в зависимости от того, какой из цветов назначен фоном, а какой - текстом. Это особенно важно при подборе оттенков для темных тем оформления, где классическая формула часто ошибается при оценке темных и средних тонов.

Подбор читаемых пар оттенков из монохромной шкалы

При использовании монохромной палитры, где и фон, и текст являются производными одного базового тона Hue, контраст достигается исключительно за счет дистанции между выбранными ступенями светлоты (дельта Lightness).

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

При проектировании кнопок и блоков с насыщенной цветной заливкой (Lightness 45-60%) выбор цвета для текста внутри элемента напрямую зависит от спектральной принадлежности базового оттенка. Для холодных синих, индиго и фиолетовых кнопок со светлотой 50% достаточный контраст дает чистый белый текст или самый светлый тинт той же шкалы (Lightness 95-98%). Если же кнопка окрашена в желтый, лаймовый или голубой оттенок со светлотой 50-60%, белый шрифт окажется нечитаемым - для соблюдения норм доступности текст делают темно-контрастным, выбирая глубокую тень того же оттенка со светлотой 10-15%.

Применение полученных цветовых вариаций в таблицах стилей

Сформированный набор градаций одного оттенка переносится в код в виде упорядоченной системы переменных. Вместо прямого указания цветовых кодов внутри селекторов HTML-элементов значения светлоты и насыщенности фиксируются на глобальном уровне таблицы стилей. Такой подход упрощает поддержку верстки: если потребуется скорректировать базовый тон или его насыщенность, достаточно обновить значения в корневом блоке объявлений.

Организация числовых шкал и CSS-переменных

Для структурирования палитры в CSS и конфигурационных файлах дизайн-систем применяется индексация по принципу числовых шкал, аналогичная подходам в Tailwind или Material Design. Оттенки нумеруются по мере убывания светлоты: от самого светлого тинта с индексом 50 до глубокой тени с индексом 900 или 950, где значение 500 обычно закрепляется за исходным базовым цветом.

В нативном CSS полученные вариации объявляются через Custom Properties внутри псевдокласса :root :

:root {
  --color-primary-50:  hsl(220, 85%, 96%);
  --color-primary-100: hsl(220, 82%, 90%);
  --color-primary-200: hsl(220, 78%, 80%);
  --color-primary-300: hsl(220, 75%, 68%);
  --color-primary-400: hsl(220, 72%, 58%);
  --color-primary-500: hsl(220, 70%, 50%);
  --color-primary-600: hsl(220, 72%, 42%);
  --color-primary-700: hsl(220, 75%, 32%);
  --color-primary-800: hsl(220, 78%, 22%);
  --color-primary-900: hsl(220, 82%, 14%);
}

Разделение цветовых переменных на два уровня позволяет отделить физическую шкалу оттенков от их роли в интерфейсе. Базовые переменные с числовыми индексами связываются с семантическими токенами, которые затем подключаются к конкретным классам компонентов:

Если в проекте требуется управлять прозрачностью полученных оттенков без создания отдельных переменных, в Custom Properties выносят сами числовые каналы координат. Запись вида --primary-500-hsl: 220 70% 50%; дает возможность динамически подставлять альфа-канал непосредственно в правилах компонента: background-color: hsl(var(--primary-500-hsl) / 0.15); .

Использование шкалы оттенков в препроцессорах SCSS, SASS и LESS

При сборке стилей через препроцессоры сгенерированный набор вариаций удобно хранить в виде ассоциативных массивов (карт в SCSS и SASS) или списков переменных в LESS. Хранение всей шкалы в единой структуре позволяет автоматизировать генерацию утилитарных классов с помощью циклов.

Пример организации цветовой карты в SCSS и генерации классов для фона и текста:

$primary-scale: (
  50:  #f0f5fd,
  100: #dce6f7,
  300: #6b96e5,
  500: #2663d9,
  700: #14398c,
  900: #06163b
);

@each $step, $value in $primary-scale {
  .bg-primary-#{$step} {
    background-color: $value;
  }
  .text-primary-#{$step} {
    color: $value;
  }
}

В препроцессоре LESS аналогичная задача решается через объявление набора переменных @primary-50 , @primary-100 или использование вложенных правил (detached rulesets) с функцией выборки each() . В отличие от встроенных функций препроцессоров вроде lighten() или darken() , которые механически сдвигают только светлоту в модели HSL и часто приводят к потере выразительности цвета на краях диапазона, использование предварительно выверенной шкалы токенов позволяет точно контролировать и светлоту, и насыщенность на каждом шаге.

Построение линейных и радиальных CSS-градиентов

Смежные или отстоящие друг от друга вариации одного цветового тона служат опорными точками (color stops) при создании монохромных линейных ( linear-gradient ) и радиальных ( radial-gradient ) градиентов. Поскольку все точки такого перехода имеют одинаковый базовый угол Hue, градиент получается чистым и не образует грязно-серых промежуточных зон, которые нередко возникают при прямой интерполяции разных цветов в пространстве RGB.

Выбор конкретных ступеней шкалы для цветовых точек зависит от визуальной задачи в верстке:

• Сглаженный объем на кнопках и плашках: использование соседних ступеней шкалы (например, переход от индекса 500 к 600 под углом 180 градусов) создает легкий рельеф без выраженного перепада яркости.
• Мягкие фоновые подложки секций: комбинирование светлых тинтов (точки 50, 100 и 200) под углом 135 градусов формирует плавный воздушный фон, не мешающий чтению основного текста.
• Глубокие акцентные баннеры с нелинейным переходом: размещение трех и более точек (например, ступени 400, 600 и 800) с явным указанием позиции в процентах позволяет сместить центр тяжести градиента и избежать равномерного плоского затухания.
• Эффект внутреннего свечения или виньетирования: применение функции radial-gradient с более светлым тоном в центре (индекс 600) и глубокой тенью по краям (индекс 900) придает темным блокам визуальную глубину.

Пример кода для создания многосоставного линейного и радиального переходов на основе переменных одной шкалы:

.hero-banner {
  background-image: linear-gradient(
    135deg,
    var(--color-primary-500) 0%,
    var(--color-primary-700) 65%,
    var(--color-primary-900) 100%
  );
}

.glow-card {
  background-image: radial-gradient(
    circle at top right,
    var(--color-primary-600) 0%,
    var(--color-primary-800) 50%,
    var(--color-primary-900) 100%
  );
}

При верстке протяженных блоков с разницей между крайними точками градиента более чем в 30-40 процентных пунктов по светлоте рекомендуется добавлять промежуточный тон из той же шкалы в середину объявления. Дополнительная опорная точка выравнивает шаг интерполяции цвета и снижает риск появления видимых ступенчатых полос (эффекта бандинга) на экранах со стандартной глубиной цвета.