Что такое Смешиватель цветов?

Смешайте два цвета с помощью ползунка пропорций и смотрите результат в реальном времени. Выводит значения HEX, RGB и HSL, которые можно скопировать прямо в код или дизайн-инструмент.

Выберите два цвета, режим смешивания — RGB, RYB, LAB, LCH, HSL или OKLCH — и сдвиньте ползунок от 0% к 100%. RGB усредняет прямо в экранном пространстве, это быстрее всего, но средняя точка может оказаться грязной. RYB смешивает как настоящая краска, поэтому синий с жёлтым дают зелёный, а красный с жёлтым — оранжевый. LAB и LCH смешивают в перцептивном пространстве и дают более плавные переходы между тонами; OKLCH — самая свежая перцептивная модель, согласованная со спецификацией CSS color-mix, и обычно даёт самый натуральный средний оттенок. На выходе — HEX, RGB, HSL, CMYK и ближайшее имя цвета, плюс показатель контраста WCAG на белом и чёрном фоне и готовый к копированию линейный CSS-градиент. Кнопки 25, 50 и 75 процентов мгновенно переводят на распространённые точки смешивания без точной протяжки ползунка.

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

1. Шаг 1 — Выберите первый цвет с помощью палитры или введите его HEX-значение.
2. Шаг 2 — Выберите второй цвет, затем настройте ползунок соотношения смешения (0% = чистый первый цвет, 100% = чистый второй цвет).
3. Шаг 3 — Просмотрите результат смешения с цветовыми кодами и скопируйте нужные значения.

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

• Создавать состояния hover и disabled, смешивая фирменный цвет с белым или серым.
• Подбирать промежуточные стопы для CSS-градиента, чтобы середина не получилась мутной.
• Получать мягкий акцент, смешивая два бренд-цвета в небольшой пропорции для тонких выделений.

Результат

Дизайнер смешивает фирменный синий (#2196F3) с белым (#FFFFFF) в пропорции 30% и получает лёгкий оттенок (#A1C9F8) для состояний наведения в UI-ките.

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

Какой режим смешивания брать по умолчанию?

Если ваша сборка это поддерживает — берите OKLCH: перцептивно он самый ровный и совпадает с современной спецификацией CSS color-mix. Дальше идёт LAB — поддержка широкая в дизайн-инструментах. RGB годится, когда у цветов близкая светлота; LCH лучше всех сохраняет насыщенность; HSL уместен, когда нужна ротация оттенка, а не плавная интерполяция.

Почему середина в RGB порой получается серой и мутной?

RGB усредняет числа, а не восприятие. Дополнительные цвета вроде синего и оранжевого взаимно гасят каналы R, G, B, и средняя точка превращается в ненасыщенный серый. Переход к LAB или LCH сохраняет насыщенность середины. Чтобы получить результат как при смешивании настоящей краски, используйте режим RYB — он смешивает синий и жёлтый в зелёный, а не в серый.

Чем это отличается от CSS-функции `color-mix()`?

color-mix() работает в современных браузерах в пространствах srgb, lab, oklab, lch и oklch. Этот инструмент выдаёт HEX, который можно вставить в старые таблицы стилей, и даёт ползунок: пропорцию задаёшь вручную, не подбирая процент на глаз.

Можно смешать больше двух цветов?

За один шаг — нет, но можно по цепочке: смешать A и B, получить C, затем смешать C с D. Для плавного трёхцветного градиента смешайте A→B при 50% и B→C при 50%, а две полученные средние точки используйте как остановки по обе стороны от исходного B.

Что значит соотношение 0% и 100%?

0% даёт чистый Цвет 1, 100% — чистый Цвет 2, 50% — середина. Ползунок шагает по 1%, поэтому оттенки и тонировки можно настраивать тонко: для состояний интерфейса разница между 10% и 15% уже ощущается.

Похожие инструменты