Міксер кольорів — змішування двох кольорів
Змішуйте два кольори в обраній пропорції RGB та копіюйте отримані значення HEX, RGB і HSL прямо у браузері.
🔒 Працює повністю у вашому браузері — нічого не завантажуєтьсяЗмішайте два екранні кольори
Змішування кольорів корисне, коли потрібен стан hover між двома токенами, середина градієнта, перехідний колір для діаграми або швидке дослідження того, як співвідносяться два брендові кольори. Цей міксер кольорів поєднує два вибрані кольори, інтерполюючи їхні червоний, зелений і синій канали. Перемістіть повзунок пропорції до кольору B, щоб збільшити його частку, а потім скопіюйте результат як HEX, RGB або HSL для CSS, документації чи дизайн-токенів.
Змішування RGB описує, як екрани поєднують світло. Це робить його ідеальним для веброзробки, але воно не те саме, що змішування фарб чи чорнила: середина між синім і жовтим на екрані поводиться не так, як та сама суміш у фізичному пігменті. Для дизайну інтерфейсів змішування RGB, проте, практичне, адже браузер зрештою відображає кольори як екранні значення. Попередній перегляд оновлюється миттєво, тож ви можете оцінити результат перед копіюванням.
Використання пропорцій у дизайні інтерфейсів
Пропорція визначає баланс між двома вхідними кольорами. При 0 відсотків результатом є колір A, при 100 відсотках — колір B. Значення близько 10–25 відсотків часто корисні для ненав'язливих станів hover або тонованих поверхонь, адже початковий колір залишається домінантним. Значення ближче до 50 відсотків краще підходять для перехідних палітр, середин градієнтів і кольорових шкал діаграм. Якщо результат виглядає тьмяним, пізніше збільште насиченість у HSL або оберіть вихідні кольори з більшою різницею.
Копіювання надійних токенів кольору
Коли знайдете вдалу суміш, скопіюйте формат, що найкраще пасує до вашого робочого процесу. HEX компактний для передавання дизайну, RGB зручний, коли потрібні значення каналів чи накладання з альфою, а HSL легше коригувати за відтінком, насиченістю або світлотою після змішування. Оскільки інструмент працює локально, ви можете безпечно експериментувати з неопублікованими брендовими палітрами чи кольорами клієнтів. Завжди перевіряйте фінальний колір у контексті, особливо якщо він буде під текстом або поруч із важливими кольорами статусу.
Як користуватися
- Виберіть два кольориОберіть початковий і кінцевий кольори, які хочете змішати.
- Налаштуйте пропорціюПеремістіть повзунок, щоб задати, скільки другого кольору додати.
- Скопіюйте результатВикористайте вивід HEX, RGB або HSL у CSS і дизайн-токенах.