# Осветление/Затемнение Цвета

Настройте яркость цвета и создайте вариации

> Каноническая страница: https://elysiatools.com/ru/tools/color-lighten-darken

- **Категория:** Design

- **Ключевые слова:** цвет, осветление, затемнение, яркость, регулировка, оттенок, тень, регулировка цвета, яркость

## Обзор

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

## Входные данные

- **Базовый Цвет** (color)
- **Тип Регулировки** (select)
- **Величина Регулировки (%)** (range): Величина регулировки яркости цвета (-100% до +100%)
- **Шаги Градиента** (number): Применяется только когда выбран "Градиент (полный диапазон)". Управляет количеством цветов в последовательности градиента (2-20 шагов)
- **Включить Дополнительные Цвета** (checkbox)
- **Сохранить Относительную Насыщенность** (checkbox)

## Когда использовать

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

## Как это работает

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

## Сценарии использования

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

## Частые вопросы

### Можно ли создать градиент из одного цвета?

Да, выберите режим «Градиент» и укажите количество шагов, чтобы получить последовательность от светлых до темных оттенков.

### Что делает опция «Сохранить относительную насыщенность»?

Она позволяет изменять яркость цвета, не искажая его исходную интенсивность и чистоту оттенка.

### Какой диапазон регулировки яркости доступен?

Вы можете изменять яркость в диапазоне от -100% (полное затемнение до черного) до +100% (полное осветление до белого).

### Можно ли получить дополнительные цвета?

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

### В каком формате выдается результат?

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

## Связанные инструменты

- [Комплемент Цвета](https://elysiatools.com/ru/tools/color-complement): Нахождение комплементарных цветов и создание гармоничных цветовых схем с триадическими, тетрадическими и аналоговыми цветовыми отношениями
- [Сдвигатель Оттенка Цвета](https://elysiatools.com/ru/tools/color-hue-shifter): Сдвигайте оттенки цветов и создавайте вариации с управлением вращения по/против часовой стрелки
- [Инвертор Цветов](https://elysiatools.com/ru/tools/color-inverter): Инвертировать цвета и создавать негативные версии с методами RGB, HSL и инверсии яркости
- [Насыщенность/Обесцвечивание Цвета](https://elysiatools.com/ru/tools/color-saturate-desaturate): Настройте насыщенность цвета и создайте варианты с разной насыщенностью
- [Генератор Оттенков Цвета](https://elysiatools.com/ru/tools/color-shade): Создавайте более темные вариации цвета путем добавления черного, создавая богатые оттенки для глубины и контраста в дизайне
- [Генератор Оттенков Цвета](https://elysiatools.com/ru/tools/color-tint): Создавайте более светлые вариации цвета путем добавления белого, создавая яркие и воздушные тона для свежего дизайна
- [Генератор Неоновых Цветов](https://elysiatools.com/ru/tools/neon-colors): Создавайте яркие, светящиеся неоновые цвета с высокой насыщенностью и яркостью, создавая привлекающие внимание эффекты электрического света, идеальные для цифровых дисплеев и современного дизайна
- [Аналогичные Цвета](https://elysiatools.com/ru/tools/color-analogous): Генерировать гармоничные аналоговые цветовые схемы с соседними цветами на цветовом круге, создавая единые и спокойные комбинации

## Примеры

- [Примеры цветовых кодов](https://elysiatools.com/ru/samples/color-code): Коллекция цветовых кодов в различных форматах (Hex, RGB, HSL, именованные цвета) для тестирования валидации
- [Примеры Обработки Изображений Android Java](https://elysiatools.com/ru/samples/android-image-processing-java): Примеры обработки изображений Android Java включая чтение/сохранение, масштабирование и преобразование формата
- [Примеры Обработки Изображений Android Kotlin](https://elysiatools.com/ru/samples/android-image-processing-kotlin): Примеры обработки изображений Android Kotlin включая чтение/сохранение, масштабирование и преобразование формата
- [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата

## Связанные материалы

- [Инструменты для доступной цветовой системы](https://elysiatools.com/ru/hubs/color-design-tools): Создайте переиспользуемую цветовую систему: преобразуйте цвета, генерируйте гармонии, проверяйте контраст и цветовое зрение, документируйте токены.
- [Рабочий процесс для цветовой системы и CSS-эффектов](https://elysiatools.com/ru/hubs/design-generate): Izvlech palitru, postroit dostupnye cvetovye otnosheniya, sгенерirovat tokeny i primenit soglasovannye CSS-effekty k realnym sostoyaniyam interfeisa.