Змішування кольорів
FreeЗмішайте два кольори з регульованим балансом, використовуючи просте RGB-змішування, гамма-коректне чи HSL-змішування.
Градієнт змішування (0% до 100%)
Недавня Активність
Видно всім. Останні 20 використань серед усіх відвідувачів, найновіші спочатку.
#FF0000 + #0000FF → #800080
3 дні тому
#FF0000 + #0000FF → #800080
5 днів тому
#FF0000 + #0000FF → #800080
5 днів тому
#FF0000 + #0000FF → #800080
6 днів тому
#FF0000 + #0000FF → #800080
6 днів тому
#FF0000 + #0000FF → #800080
6 днів тому
#FF0000 + #0000FF → #800080
6 днів тому
#FF0000 + #0000FF → #800080
6 днів тому
#FF0000 + #0000FF → #800080
6 днів тому
#FF0000 + #0000FF → #800080
6 днів тому
#FF0000 + #0000FF → #800080
6 днів тому
#FF0000 + #0000FF → #800080
6 днів тому
#FF0000 + #0000FF → #800080
6 днів тому
#FF0000 + #0000FF → #800080
1 тиждень тому
Що робить цей інструмент
Змішує два кольори разом і показує результуючий колір, з регульованим балансом між ними і вибором трьох методів змішування: просте усереднення RGB, гамма-коректне (лінійне світло) змішування, чи змішування HSL через відтінок і насиченість.
Як Це Працює
Кожен колір спочатку конвертується з hex у значення червоного, зеленого, і синього (0-255). Простий режим RGB лінійно інтерполює кожен канал безпосередньо: результат = колір1 + (колір2 - колір1) × баланс. Гамма-коректний режим спочатку конвертує кожен канал зі значень sRGB, які відображає ваш екран, у лінійне світло за допомогою стандартної передавальної функції sRGB, інтерполює в цьому лінійному просторі, потім конвертує назад, що відповідає тому, як фізично поєднується світло, і уникає штучно темної середньої точки. Режим HSL конвертує обидва кольори у відтінок/насичення/світлоту, інтерполює відтінок навколо колірного кола найкоротшим кутовим шляхом (тому він правильно обгортається, наприклад змішування відтінку близько 350° з відтінком близько 10° проходить через 0°, а не довгим шляхом через 180°), нормально інтерполює насичення і світлоту, і конвертує результат назад у RGB.
Проблеми, які це вирішує
- Знаходження проміжного кольору для градієнта, палітри теми, чи дизайн-системи без ручного вгадування значень hex.
- Порівняння того, як виглядають ті самі два кольори при змішуванні різними методами, оскільки "правильний" спосіб змішування кольорів залежить від того, що ви створюєте.
- Попередній перегляд повного градієнта між двома кольорами бренду чи інтерфейсу одним поглядом перед вибором точки зупинки.
Часті запитання
›Який режим змішування мені використовувати?
Простий RGB добре підходить для швидких, передбачуваних сумішей і відповідає тому, що роблять більшість базових інструментів. Гамма-коректний - кращий вибір, коли ви хочете суміш, що виглядає фізично природно, особливо між темними і світлими кольорами, оскільки уникає каламутного, занадто темного вигляду, який виробляє просте усереднення RGB. HSL варто спробувати, коли ви хочете результат, ближчий до змішування пігментів чи фарби, де червоний і зелений схиляються до жовтого, а не тьмяного коричневого.
›Чому змішування чорного та білого дає темніший сірий у «Простому RGB», ніж у «Гамма-коректному»?
Простий RGB безпосередньо усереднює сирі числа 0-255, тому 50% чорного і білого дає точно 127,5, середній сірий. Гамма-коректний спочатку конвертує обидва кольори в лінійне світло (скасовуючи криву гамми sRGB, яку очікує ваш екран), усереднює там, потім конвертує назад, що виробляє помітно світліший результат (приблизно 188), тому що рівні кроки у збережених значеннях кольору не відповідають рівним крокам у сприйнятій яскравості.
›Що робить повзунок «Баланс»?
Це встановлює зважування між двома кольорами: 0% - це 100% перший колір, 100% - це 100% другий колір, а 50% - рівна суміш. Переміщення дозволяє переглянути будь-яку точку вздовж суміші, не лише середню точку.
›Чому змішування HSL іноді дає несподіваний колір, наприклад, червоний і синій змішуються через фіолетовий, а червоний і зелений через жовтий?
Змішування HSL інтерполює кут відтінку на 360-градусному колірному колі, використовуючи найкоротший шлях між двома відтінками, а не безпосередньо усереднюючи значення червоного, зеленого, і синього. Червоний (0°) і зелений (120°) відносно близькі на цьому колі, проходячи через жовтий (60°) по дорозі, тому суміш схиляється до жовтого замість того, щоб стати пласким коричневим, як це робило б просте усереднення RGB.
›Чи цей інструмент підтримує прозорість чи значення альфа?
Ні, це змішує два повністю непрозорих кольори разом. Якщо вам потрібно накласти напівпрозорий колір на інший (альфа-композитинг), це інша операція, ніж змішування двох суцільних кольорів, і потребувала б спеціального інструмента.
Пов'язані Інструменти
Зображення
Вилучення кольорів зображення
Вилучіть домінуючу колірну палітру із зображення за допомогою квантизації медіанного розрізу, з копіюванням як hex чи CSS-змінних.
FreeЗображення
Фільтри зображення
Застосуйте фотофільтри в стилі Instagram на кшталт «Вінтаж», «Ломо» чи «Світанок», з керуванням інтенсивністю, віньєткою та відтінками сірого безпосередньо у вашому браузері.
FreeЗображення
Гістограма зображення
Переглядайте гістограму червоного, зеленого, синього чи яскравості фото, з режимом накладення та статистикою Мін/Макс/Середнє/Медіана/СтдВідх безпосередньо у вашому браузері.
FreeЗображення
Генератор випадкового растру
Генеруйте випадковий растровий патерн із сірих чи кольорових квадратів, з відтворюваним seed та пакетним завантаженням ZIP безпосередньо у вашому браузері.
FreeЗображення
Канали RGB зображення
Розділіть фото на його червоний, зелений та синій канали у відтінках сірого чи кольоровому вигляді, об'єднайте їх назад та завантажте як ZIP безпосередньо у вашому браузері.
FreeЗображення
Перегляд та конвертація SVG
Конвертуйте SVG у PNG, JPEG, WEBP, BMP, ICO чи AVIF, чи обгорніть PNG/JPEG/WEBP/BMP/GIF/ICO в дійсний SVG, з автоматичним визначенням напрямку, безпосередньо у вашому браузері.
FreeЗображення
Створення плаката
Розбийте будь-яке зображення на друковані сторінки A4/Letter/A3, які можна склеїти скотчем в один великий плакат, з регульованим перекриттям для легкого вирівнювання, повністю у вашому браузері.
FreeЗображення
Генератор фавіконок
Завантажте зображення й отримайте повний пакет favicon: favicon.ico, кожен розмір PNG, якого очікують браузери та пристрої, apple-touch-icon, значки Android, site.webmanifest і HTML для вставлення, усе в одному ZIP.
Коментарі (0)
Знайшли цей інструмент корисним? Залиште коментар, поділіться порадою, чи скажіть нам, як ми можемо покращити його.
Ще немає коментарів. Будьте першим, хто поділиться думками!