Цветной осветлитель / затемнитель

• Мгновенное осветление и затемнение: функции осветления и затемнения цвета обновляют предварительный просмотр и все выходные значения в режиме реального времени при перетаскивании ползунка. Не нужно нажимать кнопку — отрегулируйте от -100 % (полностью затемнено) до +100 % (полностью осветлено) и мгновенно увидите результат с помощью живых образцов цвета.
• Интерактивная шкала яркости: см. полную 7-ступенчатую шкалу яркости под основными элементами управления, показывающую цвета с настройками яркости -50%, -25%, -10%, исходный, +10%, +25% и +50%. Нажмите любую кнопку предустановки, чтобы перейти непосредственно к этому уровню настройки для быстрого исследования цвета.
• 100% конфиденциальность — без загрузки: вся обработка происходит локально в вашем браузере с использованием JavaScript. Ваши значения цвета никогда не покидают ваше устройство и никогда не отправляются на какой-либо сервер — это абсолютно безопасно для клиентских проектов и собственных систем проектирования.
• Бесплатно и без ограничений: осветляйте и затемняйте неограниченное количество цветов без регистрации, подписки и ограничений на использование. Color Lightener / Darkener полностью бесплатен навсегда, и никакая реклама не блокирует интерфейс.

• CSS-состояния наведения и взаимодействия: разработчики внешнего интерфейса используют Color Lightener/Darkener для создания состояний наведения, активности и фокуса для элементов пользовательского интерфейса. Осветляя или затемняя базовый цвет на постоянный процент, они обеспечивают единообразную интерактивную обратную связь между кнопками, ссылками и карточками, не угадывая значения цвета вручную.
• Адаптация цвета в темном режиме: дизайнеры и разработчики используют Color Lightener/Darkener для адаптации цветовых палитр светлого режима к темному режиму. Систематически затемняя цвета интерфейса, сохраняя при этом оттенок и насыщенность, они создают связные темные темы, которые сохраняют индивидуальность бренда и обеспечивают читаемость.
• Оптимизация доступности и контрастности. Специалисты по доступности используют осветлитель/темнетель цвета, чтобы найти доступные варианты цвета, соответствующие требованиям контрастности WCAG. Постепенно осветляя или затемняя цвет, сохраняя при этом оттенок, они могут обнаружить минимальную настройку, необходимую для достижения коэффициента контрастности AA или AAA.
• Цветовая палитра и оттенок/оттенок: дизайнеры используют осветлитель/темнетель цвета для создания цветовых шкал для систем дизайна. Создавая последовательные уровни яркости на основе базового цвета, они создают единые палитры оттенков и теней, которые поддерживают единообразие бренда во всех элементах пользовательского интерфейса, от фона до текста.
• Варианты компонентов пользовательского интерфейса. Дизайнеры продуктов используют Color Lightener/Darkener для создания нескольких визуальных вариантов компонентов пользовательского интерфейса. От едва заметных состояний наведения до заметных кнопок призыва к действию — инструмент помогает генерировать полный спектр цветовых вариантов из одного базового цвета с предсказуемыми и последовательными настройками яркости.
• Генерация токенов системы дизайна. Специалисты по сопровождению системы дизайна используют осветлитель/темнетель цвета для создания токенов цвета с предсказуемыми значениями яркости. Регулируя цвета в пространстве HSL, они создают такие токены, как --color-primary-50 – --color-primary-900, с последовательными шагами восприятия.

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

1. Введите базовый цвет. Введите шестнадцатеричное значение цвета или воспользуйтесь встроенной палитрой цветов, чтобы выбрать любой цвет. Инструмент мгновенно преобразует его в формат HSL (оттенок, насыщенность, яркость), который разделяет цвет на независимые каналы для точного манипулирования.
2. Отрегулируйте ползунок яркости: перетащите ползунок влево, чтобы сделать изображение темнее (отрицательный процент), или вправо, чтобы осветлить (положительный процент). Градиентная дорожка показывает полный диапазон от затемненного до осветленного. Нажмите любую кнопку предустановки (-50%, -25% и т. д.) для быстрых прыжков. Предварительный просмотр скорректированного цвета обновляется в реальном времени вместе с оригиналом для сравнения.
3. Изучите масштаб и скопируйте: 7-ступенчатая шкала яркости ниже показывает, как цвет выглядит при разных уровнях настройки. Нажмите на любой шаг, чтобы мгновенно перейти на этот уровень. Используйте кнопку «Копировать» рядом с любым форматом, чтобы скопировать отдельные значения, или скопируйте все форматы одновременно с помощью кнопки «Копировать все значения».

• Осветление (оттенки). Когда вы осветляете цвет, значение яркости увеличивается пропорционально до 100 % (чисто белый). Корректировка +50% для цвета с яркостью 50% переместит его на 50% оставшегося расстояния до 100%, что приведет к яркости 75%. Благодаря этому создаются пастельные оттенки, сохраняющие первоначальный оттенок и насыщенность.
• Затемнение (оттенки): Когда вы затемняете цвет, значение яркости пропорционально уменьшается до 0 % (чистый черный). Коррекция -50% для цвета с яркостью 50% переместит его на 50% расстояния в сторону 0%, что приведет к яркости 25%. Это создает более глубокие оттенки, сохраняющие первоначальный характер.
• Сохранение оттенка и насыщенности. В отличие от простого смешивания RGB (смешивания с белым или черным), настройки на основе HSL сохраняют значения оттенка и насыщенности неизменными. Это означает, что цвет остается верным своему первоначальному характеру, при этом меняется только яркость, что приводит к более чистым и предсказуемым цветовым вариациям.
• Диапазон от -100% до +100%: ползунок находится в диапазоне от -100% (полностью затемненный до черного) через 0% (исходный цвет) до +100% (полностью осветленный до белого). В крайних случаях цвет становится чисто черным или чисто белым, но при промежуточных значениях исходный оттенок и насыщенность остаются видимыми.

Осветление (регулировка яркости в HSL) отличается от регулировки яркости (V в HSV/HSB). Яркость в HSL варьируется от черного (0%) через чистый цвет (50%) до белого (100%), тогда как яркость в HSV варьируется от черного до только чистого цвета. Это означает, что регулировка яркости HSL обеспечивает более естественные оттенки и оттенки, которые соответствуют представлениям дизайнеров о цвете.

Насыщенность — это отдельное свойство, управляющее интенсивностью цвета. При осветлении или затемнении насыщенность остается постоянной, чтобы сохранить яркость цвета. Если вам нужно одновременно отрегулировать яркость и насыщенность, используйте наш инструмент Color Saturator/Desaturator. Для многих рабочих процессов проектирования одной только настройки освещенности достаточно, чтобы создать варианты цвета, необходимые для компонентов пользовательского интерфейса, состояний наведения и токенов системы дизайна.