Как пользоваться: Смеситель цветов
- Введите или выберите Цвет A и Цвет B.
- Укажите, сколько шагов нужно получить (включая крайние цвета).
- Выберите цветовое пространство для интерполяции. OKLab дает самое плавное и равномерное смешивание.
- Нажмите на образец, чтобы скопировать один цвет, или скопируйте весь набор как CSS-переменные,
color-mix()или JSON.
Что делает смеситель цветов?
Он вычисляет равномерно распределенные цвета между двумя крайними точками. Если взять 5 шагов между синим и янтарным, вы получите синий, три переходных цвета и янтарный. Это полезно для градиентов с несколькими опорными точками, шкал в визуализации данных, индикаторов прогресса, тонких границ между двумя цветами поверхности и тем для состояний при наведении.
Почему важно цветовое пространство интерполяции
| Пространство | Результат | Лучше всего подходит для |
|---|---|---|
| OKLab | Перцептивно равномерные шаги, без мутной середины | Большинства задач интерфейса, градиентов, шкал диаграмм |
| OKLCH | Движется по цветовому кругу и сохраняет яркость цветов | Радужных и фирменных градиентов |
| sRGB | Классический вариант браузеров по умолчанию; средние точки могут становиться серыми или темными | Совпадения с устаревшими дизайнами |
| Linear sRGB | Физически корректное смешивание света, более светлые средние точки | Имитации реального смешивания света |
| HSL | Основан на оттенке, неравномерная воспринимаемая светлота | Быстрых переходов по оттенку |
Смешивание дополнительных цветов, например синего и желтого, в sRGB дает тусклый серый в середине. OKLab сохраняет чистый переход. Поэтому современный CSS позволяет явно выбирать цветовое пространство.
Смешивание цветов средствами CSS
Все современные браузеры поддерживают color-mix() и подсказки интерполяции в градиентах, поэтому часто можно вообще обойтись жестко заданными значениями:
.border { border-color: color-mix(in oklab, var(--surface), var(--text) 15%); }
.hero { background: linear-gradient(in oklch 90deg, #2563eb, #f59e0b); }Сгенерированные шаги также полезны в дизайн-инструментах, email-шаблонах, диаграммах на canvas или SVG и везде, где CSS-функции недоступны. Чтобы построить полную шкалу от светлого к темному на основе одного цвета, используйте генератор цветов Tailwind, а для кода градиентов с несколькими опорными точками — генератор CSS-градиентов.
Также ищут как: color-mix.
Инструменты, которые хорошо сочетаются с Смеситель цветов
- Конвертер цвета OKLCH — Изучайте перцептивно равномерное цветовое пространство OKLCH с ползунками в реальном времени, проверяйте, входит ли цвет в sRGB, и копируйте соответствующие запасные значения HEX, RGB и HSL.
- Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
- Поиск названия цвета — Вставьте HEX-код, чтобы получить ближайшее понятное название цвета и корректные имена токенов для вашего CSS, SCSS, JavaScript или конфигурации Tailwind.
- Конвертер HEX в OKLCH — Вставьте HEX-цвет и получите его значение OKLCH для CSS.
Часто задаваемые вопросы
Какую интерполяцию выбрать?
Входят ли крайние цвета в количество шагов?
Что такое color-mix() в CSS?
color-mix(in oklab, red, blue 30%) смешивает два цвета прямо в браузере. Функция поддерживается во всех современных браузерах и работает с CSS-переменными, поэтому смеси автоматически обновляются вместе с вашей темой.