Насыщенность/Обесцвечивание Цвета

Настройте насыщенность цвета и создайте варианты с разной насыщенностью

-100 20 100

Величина регулировки насыщенности цвета (-100% до +100%)

Применяется только когда выбран "Градиент (полный диапазон)". Управляет количеством цветов в последовательности градиента насыщенности (2-20 шагов)

Ключевые факты

Категория
Дизайн и цвет
Типы входных данных
color, select, range, number, checkbox
Тип результата
html
Покрытие примерами
3
API доступен
Yes

Обзор

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

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

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

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

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

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

Создание цветовых схем для веб-сайтов.
Подготовка палитр для печатных материалов.
Генерация вариантов цвета для UI/UX дизайна.

Примеры

1. Регулировка насыщенности бренда

Графический дизайнер
Контекст
Дизайнер работает над ребрендингом и нужно создать варианты основного цвета бренда.
Проблема
Основной цвет слишком яркий для некоторых применений, нужно его обесцветить.
Как использовать
Введите базовый цвет #4A90E2, выберите 'Обесцветить', установите величину -30%.
Пример конфигурации
{"baseColor": "#4A90E2", "adjustmentType": "desaturate", "adjustmentValue": -30, "preserveHue": true}
Результат
Получен более приглушенный оттенок синего, сохраняя оттенок бренда.

2. Создание градиента насыщенности

Контекст
Разработчик создает интерфейс и нуждается в градиенте для фона кнопки.
Проблема
Нужно быстро сгенерировать серию цветов от насыщенного до обесцвеченного.
Как использовать
Выберите тип регулировки 'Градиент', введите базовый цвет, установите шаги на 5.
Пример конфигурации
{"baseColor": "#FF5733", "adjustmentType": "gradient", "steps": 5, "includeComplementary": false}
Результат
Сгенерировано 5 цветов с уменьшающейся насыщенностью для использования в градиенте.

Проверить на примерах

design
Примеры цветовых кодов
Коллекция цветовых кодов в различных форматах (Hex, RGB, HSL, именованные цвета) для тестирования валидации
title token color
sample
ICS Примеры Планировщика по Часовым Поясам
ICS-файлы в той же структуре, что и у Time Zone Workflow Scheduler, с несколькими VEVENT для кандидатов
task generate
sample
PDF Примеры
PDF примеры, созданные инструментами 2026-02-01..2026-02-10
task generate
sample

Связанные хабы

Инструменты Design для Generate
Изучите 19 инструментов design для сценариев generate и быстро сравните близкие утилиты.
Инструменты Design для Convert
Изучите 98 инструментов design для сценариев convert и быстро сравните близкие утилиты.
Инструменты Json для Generate
Изучите 33 инструментов json для сценариев generate и быстро сравните близкие утилиты.
Инструменты Pdf для Generate
Изучите 11 инструментов pdf для сценариев generate и быстро сравните близкие утилиты.

FAQ

Какой формат цвета используется для базового цвета?

Используйте HEX-формат, например, #4A90E2.

Могу ли я создать серию цветов с разной насыщенностью?

Да, выберите тип регулировки 'Градиент' и укажите количество шагов от 2 до 20.

Как работает опция 'Сохранить характеристики оттенка'?

Она сохраняет исходный оттенок цвета, изменяя только насыщенность.

Что делает опция 'Включить дополнительные цвета'?

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

Какова минимальная и максимальная величина регулировки?

Величина регулировки может быть от -100% до +100%.

Документация API

Конечная точка запроса

POST /ru/api/tools/color-saturate-desaturate

Параметры запроса

Имя параметра Тип Обязательно Описание
baseColor color Да -
adjustmentType select Да -
adjustmentValue range Нет Величина регулировки насыщенности цвета (-100% до +100%)
steps number Нет Применяется только когда выбран "Градиент (полный диапазон)". Управляет количеством цветов в последовательности градиента насыщенности (2-20 шагов)
includeComplementary checkbox Нет -
preserveHue checkbox Нет -

Формат ответа

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-color-saturate-desaturate": {
      "name": "color-saturate-desaturate",
      "description": "Настройте насыщенность цвета и создайте варианты с разной насыщенностью",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-saturate-desaturate",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]