Softonic

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

Шаг 1 / 2
Результаты

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

Как рассчитывается HEX-смешивание

  1. 1

    Введите два HEX-цвета

    Используйте HEX из 3 или 6 символов, с # или без него. Примеры: #FF6B35, #1E3A8A, F60.

  2. 2

    Выберите 2-20 шагов

    Первый образец: первый цвет, последний образец: второй; средние образцы рассчитываются между ними.

  3. 3

    Интерполируйте каналы RGB

    Инструмент переводит HEX в значения красного, зелёного и синего каналов, линейно интерполирует каждый канал и округляет до ближайшего целого.

  4. 4

    Смотрите HEX-точки

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

Что делает этот инструмент

Смешивание цветов работает только со стандартной HEX-нотацией. Инструмент принимает короткий HEX, например #F60, и полный HEX, например #FF6B35, нормализует значения внутри и выводит каждый результат как 6-значный HEX-код в верхнем регистре.

Смешивание это простая линейная интерполяция в каналах RGB/sRGB:

  1. Преобразовать каждый HEX-цвет в значения R, G и B от 0 до 255.
  2. Для каждого шага вычислить t от 0 до 1.
  3. Для каждого канала использовать начало + (конец - начало) * t.
  4. Округлить каждый канал до ближайшего целого и преобразовать результат обратно в HEX.

Так как крайние точки включены, 2 шага означает “только начало и конец”. Для 7 шагов от #FF6B35 до #1E3A8A результат будет таким:

Шаг Позиция HEX
1 0% #FF6B35
2 16,67% #DA6343
3 33,33% #B45B51
4 50% #8F5360
5 66,67% #694A6E
6 83,33% #44427C
7 100% #1E3A8A

Где это полезно

  • Шкалы состояний UI: создавайте промежуточные цвета для hover, active, selected или disabled.
  • Планирование градиентов: определяйте точные HEX-точки перед написанием CSS-градиента в другом инструменте.
  • Варианты иконок и иллюстраций: сохраняйте согласованность небольшого набора связанных цветов.
  • Проверка дизайна: сравнивайте рассчитанную по каналам середину вместо оценки на глаз.

Ограничения

Этот инструмент не принимает rgb(), hsl(), названия цветов, alpha-значения или 8-значный HEX. Он не экспортирует RGB, HSL, LAB, LCH, CSS-фрагменты, проверки контраста или оценки доступности. Если это нужно, используйте конвертер, проверку контраста или генератор градиентов после получения HEX-точек.

Часто задаваемые вопросы

Только HEX: 3 или 6 символов, с начальным # или без него. Инструмент не читает rgb(), hsl(), alpha-каналы и названия цветов.

Да. Первый шаг: первый цвет, последний шаг: второй цвет. Остальные шаги: интерполированные цвета между ними.

Смешивание рассчитывается поканально в RGB/sRGB. Это предсказуемо и удобно для повторного использования в коде, но не равно перцепционной интерполяции LAB или LCH.

Нет. Он показывает только образцы и HEX-коды. Используйте созданные HEX-значения в CSS или передайте их в проверку контраста, если важны коэффициенты доступности.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.