2 ЦВЕТА · 3 ПРОСТРАНСТВА · 7 ШАГОВ · ЛОКАЛЬНО
Смешайте два HEX-цвета в точной пропорции от 0 до 100, сравните три пространства интерполяции, изучите полученные значения и скопируйте готовое выражение CSS color-mix(). Всё смешивание цветов выполняется в браузере, а промежуточные оттенки видны до того, как вы примените их в палитре, интерфейсе, иллюстрации или исследовании цвета персонажа.
Обновлено 11 августа 2026 года
смешивание цветов
Смешивание цветов здесь означает математическую интерполяцию между двумя непрозрачными конечными цветами sRGB. Выберите вклад каждой стороны, затем sRGB для привычного веб-результата, линейный sRGB для смешения по интенсивности света или OKLCH для более упорядоченного по восприятию пути. Итог различается, потому что пространства усредняют разные координаты.
При стандартной пропорции 50/50 цвета #FF5A5F и #2F80ED дают #976DA6 в sRGB, #BE6FB8 в линейном sRGB и #C060D6 в OKLCH. Все три результата верны для выбранного метода. Инструмент также строит семь равно расположенных образцов и преобразует выбранную точку в HEX, RGB и HSB.
смешивание цветов
Один средний оттенок скрывает главное решение: по какой системе координат проходит путь между крайними цветами. Сравнение помогает выбрать результат для конкретной визуальной задачи, а не принять необъяснённое значение по умолчанию.
смешивание цветов
Смешивание цветов сопровождается названием пространства рядом с каждым результатом. Вы меняете метод, не двигая конечные цвета и пропорцию, поэтому визуальная разница происходит именно из расчёта. Такой контролируемый тест легче объяснить на дизайн-ревью и при передаче макета разработчикам.
смешивание цветов
Каждый результат доступен как HEX в верхнем регистре, современный RGB, округлённый HSB и CSS color-mix(). Смешивание цветов также создаёт шкалу из семи шагов для состояний, графиков, переходов иллюстрации и поиска палитры, поэтому промежуточные доли не приходится рассчитывать вручную.
смешивание цветов
Конечные цвета, пропорция, результаты и скопированные значения остаются в текущей сессии браузера. Инструмент не загружает файлы и не требует аккаунта. Это удобно для неопубликованных фирменных цветов, клиентских палитр и ранних направлений в дизайне персонажа.
смешивание цветов
Задайте два HEX-цвета и пропорцию, затем сравните одну смесь в трёх пространствах.
смешивание цветов
CSS COLOR 5
color-mix(in srgb, #FF5A5F 50%, #2F80ED 50%)Используйте рассчитанный HEX как резервный вариант, если этого требует поддержка браузеров.
смешивание цветов
Нажмите образец, чтобы скопировать его HEX.
#FF5A5F#DC6077#BA678E#976DA6#7473BE#527AD5#2F80EDКонфиденциально по замыслу: все цвета смешиваются только в этом браузере.
смешивание цветов
Рассматривайте итог как воспроизводимое дизайн-решение: сначала зафиксируйте конечные цвета, затем сравните пространства и только после этого проверяйте оттенок в реальном контексте.
смешивание цветов
Вставьте трёх- или шестизначный HEX для каждой стороны либо используйте системные селекторы. Назовите семантические роли, например поверхность и акцент, а не только левый и правый. Стабильные роли упрощают обсуждение и документирование последующих изменений пропорции.
смешивание цветов
Начните с 50/50, переключите sRGB, линейный sRGB и OKLCH, а затем двигайте пропорцию по одному пункту. Отдельно наблюдайте светлоту, насыщенность и тон. Смешивание цветов сохраняет обе конечные точки, поэтому условия эксперимента остаются одинаковыми.
смешивание цветов
Скопируйте значение в настоящий компонент, иллюстрацию или диаграмму. До выпуска проверьте контраст, соседние цвета, светлую и тёмную темы и целевые браузеры. Привлекательный средний оттенок не становится автоматически доступным цветом текста или надёжным производственным токеном.
смешивание цветов
Одинаковые конечные цвета и проценты способны дать заметно разные середины. Таблица показывает, что интерполирует каждый метод, где он полезен и что проверить перед использованием.
| Метод | Что интерполируется | Когда полезен | Что проверить |
|---|---|---|---|
| sRGB | Гамма-кодированные красный, зелёный и синий каналы | Историческое веб-поведение и привычные быстрые смеси | Середина может выглядеть слишком тёмной или серой |
| Линейный sRGB | Красный, зелёный и синий, линейные по интенсивности света | Светоподобная композиция и энергетические переходы | Результат может быть ярче привычной UI-смеси |
| OKLCH | Перцептивная светлота, хрома и кратчайший путь тона | Равномерные шкалы и палитры с сохранением хромы | Насыщенный цвет может обрезаться при выводе в sRGB |
смешивание цветов
смешивание цветов
Пропорция кажется самой простой частью смешивания цветов, но её нужно понимать точно. При 0% возвращается первый цвет, при 100% — второй, а при 50% оба имеют одинаковый вес. Переход от 50% к 60% не делает результат на 60% светлее или насыщеннее. Он означает, что второй цвет даёт 60% интерполируемых координат в выбранном пространстве.
смешивание цветов
Используйте небольшие изменения, когда смесь уже близка к нужной роли. Два или три пункта могут отделить состояние наведения от обычного, а десять пунктов легче заметить на шкале из семи образцов. Смешивание цветов показывает оба веса и всегда сохраняет сумму 100%. В формуле для ревью или документации токенов не возникает неясности о вкладе сторон.
смешивание цветов
При несимметричной пропорции конечные цвета нельзя считать взаимозаменяемыми. Добавить 20% синего к коралловому — не то же самое, что 20% кораллового к синему. Кнопка обмена переворачивает цвета и дополняет процент, сохраняя видимый результат. Так формулу можно привести к порядку переменных проекта, не меняя незаметно уже утверждённый оттенок.
смешивание цветов
смешивание цветов
Обычные HEX и rgb() — это кодированные значения sRGB. Их числовые каналы предназначены для отображения и совместимости, а не для равных шагов излучаемого света. Если смешивание цветов усредняет такие каналы напрямую, середина часто выглядит темнее, чем после перехода к линейному свету. Ни один ответ не является ошибкой ввода: методы по-разному определяют путь между краями.
смешивание цветов
Линейный sRGB сначала удаляет передаточную кривую, интерполирует значения пропорционально интенсивности света и затем снова кодирует итог для дисплея. Метод подходит модели цветного света или энергетической композиции. Для стандартных кораллового и синего 50% даёт #BE6FB8, заметно ярче #976DA6 в sRGB. Такая разница влияет на контраст и иерархию палитры.
смешивание цветов
Выбирайте sRGB, если важнее соответствие исторической смеси или гамма-кодированному процессу. Выбирайте линейный sRGB, если важно поведение света. Не называйте один метод универсально правильным. Записывайте пространство вместе со значением: один HEX не показывает происхождение, а другое смешивание цветов может использовать иной метод по умолчанию.
смешивание цветов
До превращения результата в производственное значение проверьте входы, метод, условия вывода и семантическую роль. Так привлекательный эксперимент не станет необъяснимым токеном.
смешивание цветов
Смешивание цветов здесь интерполирует экранные координаты. Реальные пигменты взаимодействуют через поглощение, рассеяние, непрозрачность, связующее, концентрацию и основу, поэтому две краски способны дать результат, которого не предскажет середина RGB или OKLCH. Для материалов используйте физические выкрасы и данные производителя.
смешивание цветов
Методы и термины страницы следуют опубликованной модели цветовой интерполяции веб-платформы. Числовые примеры воспроизводятся с видимыми конечными цветами и позволяют проверить выбор метода.
CSS Color Module Level 4 поясняет:
Mixing or otherwise combining colors has different results depending on the interpolation color space used.
смешивание цветов
смешивание цветов
смешивание цветов
Универсального лучшего нет. Используйте sRGB для привычного исторического веб-поведения, линейный sRGB для учёта интенсивности света и OKLCH для перцептивной равномерности или хромы. Сравните все три с одинаковыми конечными цветами.
смешивание цветов
Режимы усредняют разные координаты. Гамма-кодированные каналы sRGB, линейные световые каналы RGB и светлота, хрома и тон OKLCH описывают разные пути, поэтому одинаковые веса дают разные видимые середины.
смешивание цветов
Да. Введите трёх- или шестизначные HEX. Всё смешивание цветов выполняется в браузере, палитра не хранится на сервере, загрузка изображения и аккаунт не нужны.
смешивание цветов
Оно сообщает поддерживающему браузеру пространство интерполяции, конечные цвета и проценты. Вставьте значение в цветовое свойство CSS и добавьте проверенный статический вариант, если этого требует политика поддержки браузеров.
смешивание цветов
Используйте их как отправную точку. Назначьте каждой сохранённой ступени реальную роль, проверьте контраст и соседние состояния, удалите неиспользуемые значения. Равный шаг в модели не гарантирует доступную и удобную систему токенов.
смешивание цветов
Нет. Он интерполирует цифровые координаты и не моделирует химию пигментов, спектральное отражение, непрозрачность и основу. Если итогом будет краска, чернила или краситель, смешивайте и проверяйте реальные материалы.