TL
Tool Lab
💰Пожертвовать
💰Пожертвовать

Смешивание цветов

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

Цвет 1
Цвет 2
Соотношение смешивания — 50% Цвет 1 : 50% Цвет 2
Смешанный цвет
HEX: #A79C98
RGB: rgb(167, 156, 152)
HSL: hsl(16, 8%, 63%)
Шкала градиента (нажмите для копирования)
#FF6B6B
#E27B7A
#C48C89
#A79C98
#89ACA6
#6CBDB5
#4ECDC4

Об этом инструменте

Смеситель цветов смешивает два шестнадцатеричных цвета в пространстве RGB, создавая плавную смесь при любом соотношении от 0% до 100%. Шкала градиента показывает 7 равномерно распределённых шагов между двумя цветами.

Смешивание RGB — это та же операция, которую браузер выполняет при компоновке цветов: математически точная и предсказуемая. Смешанный цвет при 50% является истинной серединой между обоими цветами в пространстве RGB.

Как использовать

  1. Выберите два цвета с помощью палитры или введите коды hex напрямую.
  2. Используйте кнопки предустановок для проверки классических цветовых комбинаций.
  3. Перетащите ползунок соотношения для настройки смеси. 0% — Цвет 1; 100% — Цвет 2.
  4. Нажмите на любой образец градиента или кнопку «Копировать HEX», чтобы скопировать цвет.

Случаи использования

UI-дизайнеры смешивают основной цвет бренда с белым или чёрным для состояний наведения, активного и отключённого. Моушн-дизайнеры выбирают промежуточные цвета для ключевых кадров анимации. Фронтенд-разработчики генерируют промежуточные точки градиента без графического редактора.

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

  • Это то же самое, что CSS-градиент?Да. CSS linear-gradient также смешивает в sRGB по умолчанию. Показанные шаги точно соответствуют промежуточным точкам CSS-градиента.
  • Почему смешение красного и синего не даёт фиолетовый?В RGB красный (#ff0000) и синий (#0000ff) при 50% дают #7f007f (тёмно-пурпурный). Насыщенный фиолетовый требует смешения красного с сине-фиолетовым, например #8000ff.
  • Можно получить больше шагов градиента?Шкала всегда показывает 7 шагов. Используйте ползунок для проверки любой промежуточной точки.
  • Поддерживается ли альфа/прозрачность?Нет, этот инструмент работает только с непрозрачными цветами hex.