Смешивание цветов
НовоеСмешивайте два цвета в любой пропорции и копируйте результат или любой шаг.
Click a swatch to copy its hex.
Mix colors from an image
Upload an image, choose a target color above, then click the image to sample that pixel. Images are decoded in your browser and never uploaded.
Paint (subtractive) results are realistic approximations of pigment mixing, not exact recipes — real paints and inks vary by brand and opacity.
Runs entirely in your browser. Nothing is uploaded.
Бесплатный онлайн смеситель цветов для краски или света
Этот смеситель цветов объединяет два цвета — или больше — в новый и показывает полный градиент шагов между ними. Выбирайте цвета с помощью образцов, вводите код hex или извлекайте их прямо из загруженного изображения; затем читайте смешанный результат в форматах HEX, RGB, HSL и CMYK. Всё работает в вашем браузере, это мгновенно, и ничто из загружаемого не отправляется на сервер.
В то время как большинство инструментов выполняют лишь простое линейное смешение, этот позволяет смешивать два цвета онлайн тремя разными способами и показывает разницу в режиме реального времени — чтобы вы получили результат, который ожидает художник, результат экрана или чистую математическую середину для градиентов и дизайн-систем.
Субтрактивное, аддитивное или простое смешение — три модели
Субтрактивное смешение моделирует краску и пигменты: цвета поглощают (вычитают) свет, поэтому синий + жёлтый = зелёный, красный + жёлтый = оранжевый, красный + синий = фиолетовый — интуитивные результаты «какие два цвета дают X», соответствующие физическим краскам, чернилам и печати CMYK. Аддитивное смешение моделирует свет: красный, зелёный и синий складываются, поэтому красный + зелёный = жёлтый, а все три вместе дают белый — именно так работают экраны, проекторы и сценическое освещение.
Третий режим, Смешение, — это прямая линейная интерполяция, которая усредняет каналы RGB для нахождения точной числовой середины — идеально для градиентов, оттенков интерфейса и генерации дизайн-токенов. Одна кнопка переключает между тремя режимами, и полоса смешения мгновенно перерисовывается.
Какие два цвета дают зелёный, оранжевый, фиолетовый и коричневый?
Встроенная таблица смешивания цветов отвечает на самые популярные вопросы о пигментах одним нажатием: зелёный из синего + жёлтого, оранжевый из красного + жёлтого, фиолетовый из красного + синего, бирюзовый из синего + зелёного, и реалистичный коричневый из двух дополнительных цветов, например оранжевого + синего. Нажмите на любую пару в таблице, чтобы загрузить её в смеситель в субтрактивном режиме.
Поскольку субтрактивный движок смешивает так же, как реальные пигменты, вторичные цвета получаются натуральными, а третичные естественно темнеют к коричневому — то же «замутнение», что возникает при избыточном смешивании настоящей краски. Ползунок соотношения позволяет точно контролировать пропорции.
Смешивание из изображения — и смешивание более двух цветов
Загрузите любую фотографию и используйте пипетку для извлечения цветов прямо из неё — идеально для подбора цвета бренда из фотографии продукта, образца краски или вдохновляющего изображения. Выберите два или более пикселя и смешайте их. Изображение декодируется локально на HTML-холсте, поэтому смеситель цветов из изображения означает, что ваш файл никогда не покидает устройство — подходит для конфиденциальных активов бренда и нераскрытых дизайн-макетов.
Нужно объединить больше двух? Нажмите «Добавить цвет», чтобы добавить третий, четвёртый, пятый или шестой образец, каждый со своим ползунком веса. Инструмент возвращает взвешенное смешение всех входных данных — полезно для усреднения палитры, воссоздания многопигментной смеси красок или нахождения визуального центра набора фирменных цветов.
Сравнение с Adobe Color, Coolors и colordesigner.io
Adobe Color (color.adobe.com) создан для исследования цветовой гармонии — дополнительные, триадные, аналоговые схемы — и требует учётной записи Adobe, которая синхронизирует данные с серверами Adobe. В нём нет субтрактивной (краска) или аддитивной (свет) модели смешивания и нет ползунка соотношения для смешивания конкретных hex-кодов. Coolors (coolors.co) отлично подходит для генерации палитр, но его смеситель цветов выполняет лишь базовое линейное смешение — эквивалент режима «Смешение» этого инструмента.
colordesigner.io предлагает линейное смешение двух цветов и градиентную полосу, но выводит только hex-значения — без RGB, HSL или CMYK. Этот инструмент восполняет пробел: три модели смешения, четыре одновременных формата вывода, выборка цветов из изображений, до шести цветов с индивидуальными ползунками весов и URL для совместного использования. Без аккаунта, без ограничений, без загрузки на сервер.
Каждый код готов к копированию — и ссылка для совместного использования
Карточка результата показывает значения HEX, RGB, HSL и CMYK смешанного цвета плюс ближайший именованный цвет CSS, и один клик копирует любое из них в буфер обмена. Сгенерируйте 2–20 равномерно распределённых промежуточных образцов между двумя цветами, скопируйте отдельный шаг или возьмите всю последовательность сразу для CSS-градиента или цветовой рампы дизайн-системы.
Ничего не нужно устанавливать, нет необходимости создавать аккаунт. Смешивание цветов, выборка изображений и преобразование кода происходят локально в вашем браузере — ваши цвета и изображения остаются на вашем устройстве. Добавьте онлайн смеситель цветов в закладки и используйте его вместе с Генератором цветовых палитр и Проверкой контраста на UtiloKit.
Frequently asked questions
Как смешать два цвета онлайн?
Выберите два цвета с помощью образцов или введя hex-коды, выберите модель смешения (краска/субтрактивная, свет/аддитивная или простое линейное смешение) и перетащите ползунок соотношения — например 30%/70% — чтобы контролировать вклад каждого цвета в результат. Смешанный цвет и его коды HEX, RGB, HSL и CMYK обновляются мгновенно; нажмите на любую строку формата, чтобы скопировать её в буфер обмена.
Какие два цвета дают зелёный?
Синий и жёлтый дают зелёный при смешивании краски или пигмента (субтрактивное смешение). Установите модель на Субтрактивную и смешайте синий вроде #2563EB с жёлтым вроде #FACC15, чтобы получить зелёный около #61A73A. На экране, где вы смешиваете свет (аддитивное), правила другие — красный + зелёный свет = жёлтый, а все три при максимальной интенсивности = белый.
В чём разница между аддитивным и субтрактивным смешением цветов?
Аддитивное смешение объединяет свет: каналы красного, зелёного и синего складываются, поэтому красный + зелёный = жёлтый, а все три при полной мощности = белый. Экраны, проекторы и телевизоры работают именно так. Субтрактивное смешение объединяет пигменты или красители, которые поглощают (вычитают) длины волн света; чем больше пигмента, тем темнее. Синий + жёлтый = зелёный, а все три основных цвета вместе дают коричневый. Печать CMYK — субтрактивная.
Как смешать два hex-цвета?
Введите или вставьте каждый hex-код в соответствующее поле — с символом # или без — например #FF5733 и #33C1FF. Смеситель немедленно смешивает их в текущем соотношении и возвращает результирующий hex-код вместе с эквивалентами RGB, HSL и CMYK. Трёхзначный сокращённый hex вроде #F53 тоже принимается. Нажмите на любую строку результата, чтобы скопировать.
Могу ли я смешивать цвета из изображения?
Да. Откройте панель «Смешивание из изображения», загрузите любую фотографию или снимок экрана дизайна, затем щёлкните по холсту, чтобы взять образцы цветов прямо из изображения. Изображение декодируется локально на HTML-холсте в вашем браузере с помощью JavaScript — никакие данные не отправляются на сервер, а ваши изображения остаются полностью конфиденциальными на вашем устройстве.
Сколько шагов градиента можно сгенерировать между двумя цветами?
Элемент управления шагами позволяет генерировать от 2 до 20 равномерно распределённых образцов между двумя входными цветами. Одиннадцать шагов дают две конечные точки и девять средних точек — идеально для создания CSS-градиента или полной цветовой рампы для дизайн-системы. Нажмите на отдельный образец, чтобы скопировать его hex-код, или используйте «Копировать всё», чтобы взять всю последовательность.
Это бесплатно? Нужно ли регистрироваться?
Нет. Смеситель цветов полностью бесплатен, без аккаунта, без регистрации, без платного доступа и без ограничений использования. Откройте страницу и начните смешивать сразу. В отличие от некоторых дизайн-платформ, которые скрывают расширенное смешение цветов за подпиской, каждая функция здесь — субтрактивные и аддитивные модели, выборка изображений, смешение нескольких цветов, шаги градиента и все форматы вывода — доступна бесплатно при первом посещении.
Related tools
Все инструменты
Новое Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Пипетка и конвертер цвета
Выбирайте цвет и конвертируйте между HEX, RGB, HSL и OKLCH.
Новое Проверка контраста цвета
Проверяйте контраст по WCAG AA/AAA между цветом текста и фоном.
Новое Генератор CSS-градиентов
Создавайте линейные, радиальные и конические CSS-градиенты с предпросмотром.
Новое Генератор CSS box-shadow
Создавайте многослойные CSS box-shadow с пресетами и предпросмотром. Копируйте CSS, значение или стиль React мгновенно.
Новое Генератор палитр
Генерируйте комплементарные, аналоговые, триадные и монохромные палитры.