CodeKitHubЩо це за інструмент?
Змішувач кольорів лінійно інтерполює між червоним, зеленим і синім каналами двох кольорів при обраному співвідношенні — та сама математика, яку внутрішньо використовує градієнт. При 0% результатом є Колір A, при 100% — Колір B, а при 50% — арифметичне середнє кожного RGB каналу.
Це відрізняється від змішування фізичної фарби (яке є субтрактивним і залежить від пігменту), і це також не те саме, що усереднення в просторі HSL — лінійна інтерполяція RGB є тим, що використовують градієнти CSS, інструменти дизайну та більшість утиліт «колір між двома кольорами», тому результат відповідає тому, що ви побачили б у градієнті браузера між тими самими двома кольорами.
Навіщо його використовувати?
- Знайдіть природний колір hover або активного стану, який лежить між вашим базовим кольором та акцентом — замість того, щоб вгадувати випадкове коригування.
- Побачте точний HEX код при будь-якому співвідношенні, а не просто оцінюйте на око скріншот градієнта.
- Драбина з 11 кроків дає вам повну палітру від одного кольору до іншого одним кліком, корисно для візуалізації даних або багатоступеневого градієнта.
- Клацніть на будь-якому кроці, щоб миттєво скопіювати його HEX код.
- Безкоштовно, миттєво і повністю локально — без завантаження, без облікового запису.
Як користуватися
- Виберіть Колір A та Колір B за допомогою вибору кольорів або ввівши HEX код.
- Перетягніть повзунок співвідношення, щоб встановити, скільки Кольору B змішати.
- Прочитайте отримані значення HEX та RGB над зразком.
- Клацніть на будь-якому зразку в драбині з 11 кроків нижче, щоб скопіювати його HEX код.
Приклад
Введення
Колір A #3B82F6 (синій), Колір B #F59E0B (бурштиновий), співвідношення 50%Результат
#9B9E7D — rgb(155, 158, 125)Точно при 50% кожен RGB канал є арифметичним середнім каналів обох вхідних кольорів.
Часті запитання
Чому це не збігається з тим, що я отримав би, змішуючи справжню фарбу?
Змішування фарб є субтрактивним (пігменти поглинають світло) і залежить від конкретних задіяних пігментів — наприклад, змішування синьої та жовтої фарби дає зелений. Цей інструмент змішує світло (RGB канали) адитивно/лінійно, так само як екрани, градієнти CSS та більшість цифрових інструментів дизайну змішують кольори. Ці дві системи навмисно дають дійсно різні результати, а не через помилку.
Чи це те саме, що CSS linear-gradient між двома кольорами?
Так — CSS linear-gradient(colorA, colorB) інтерполює RGB канали так само, як і цей інструмент, тому колір, який ви побачили б у середині цього градієнта, збігається з результатом 50% тут.
Чому змішаний колір іноді виглядає каламутним або сірим?
Змішування двох насичених, але дуже різних відтінків (наприклад, синього та оранжевого, які майже комплементарні) у просторі RGB часто дає малонасичену, сіро-коричневу проміжну точку — це реальна властивість інтерполяції RGB, а не помилка. Якщо ви хочете живішу суміш, спробуйте змішати кольори, які знаходяться ближче один до одного на колірному колі, або змішуйте у просторі HSL, регулюючи відтінок і зберігаючи високу насиченість (те, чого цей прямий змішувач RGB не робить).
Чи можу я змішати більше двох кольорів одночасно?
Не за один крок — інструмент змішує рівно два кольори. Щоб об'єднати три, змішайте перші два в обраному співвідношенні, скопіюйте результат і вставте його як новий Колір A проти вашого третього кольору. Виконання цього поетапно також дає вам контроль над зважуванням, чого не дало б одноразове тристороннє усереднення.
Мені варто використовувати це чи Генератор відтінків кольору?
Якщо вам потрібен колір, який лежить між двома різними кольорами — скажімо, перехідний відтінок між синім кольором вашого бренду та бурштиновим акцентом — використовуйте цей змішувач. Якщо вам потрібні світліші та темніші варіанти одного кольору (стани hover, фони, драбина у стилі Tailwind від 50 до 900), використовуйте натомість Генератор відтінків кольору: він утримує відтінок і насиченість фіксованими та змінює лише світлість, тому кожен результат чітко залишається в тій самій колірній родині.
Які формати кольору я можу вводити в поля введення?
Текстові поля приймають 6-значні HEX коди, з провідним # або без нього (наприклад, 3B82F6 або #3B82F6). Скорочений 3-значний hex, нотація rgb() та назви кольорів CSS там не розпізнаються — але ви можете візуально вибрати будь-який колір за допомогою вбудованого вибору кольорів поруч із кожним полем, і поле HEX оновиться відповідно.