Конвертер кольорів

Що робить конвертер кольорів

Конвертер кольорів перетворює один колір між трьома форматами, на які спирається фронтенд-робота: HEX (#3b82f6), RGB чи RGBA (rgb(59, 130, 246)) та HSL чи HSLA (hsl(217, 91%, 60%)). Введіть значення в будь-якому з них або скористайтеся вбудованим засобом вибору кольору, і він покаже еквіваленти в інших форматах поряд із живим зразком, щоб ви точно бачили, з чим працюєте. Це інструмент для того, щоб перенести колір із дизайн-макета в CSS, узгодити фірмовий відтінок між форматами, підкоригувати відтінок у HSL, де правки відчуваються інтуїтивно, або додати прозорість через альфа-канал.

Як формати відповідають один одному

Кожна модель описує той самий колір по-різному. HEX пакує канали червоного, зеленого й синього у пари шістнадцяткових цифр; RGB перелічує ті самі канали як значення 0–255; HSL натомість використовує відтінок (кут від 0 до 360° навколо колірного кола), насиченість і світлість у відсотках, і саме тому в HSL набагато простіше «зробити це трохи світлішим» чи «зсунути до зеленого». Конвертер читає всі поширені скорочення й розгортає їх для вас:

• 3-значний HEX, як-от #f00, розгортається подвоєнням кожної цифри до #ff0000.
• 4- і 8-значний HEX та форми rgba() й hsla() несуть альфа-канал (непрозорість), який зберігається під час перетворення.
• Введення у відсотках приймається там, де формат це дозволяє, і кожен результат округлюється до розумної, готової до копіювання точності.

Усередині інструмент перетворює будь-що, що ви вводите, на RGB як спільну основу, а потім виводить HSL за стандартною математикою відтінку, кольоровості й світлості, зберігаючи по дорозі будь-яке значення альфа. Зверніть увагу, що він працює з цими числовими форматами, а не з ключовими словами кольорів CSS, тож вставляйте #ff69b4, а не слово «hotpink», і всі значення інтерпретуються у стандартному просторі sRGB, який використовують ваш браузер і монітори.

Навіщо взагалі перемикатися між форматами

Різні завдання потребують різних моделей. HEX — це компактна форма, яку ви вставляєте просто в таблицю стилів. RGB — те, що потрібно, коли ви робите композитинг, працюєте з полотном чи перевіряєте коефіцієнт контрастності для доступності, адже розрахунки WCAG починаються з каналів червоного, зеленого й синього. HSL — улюбленець дизайнерів для побудови теми: зафіксуйте відтінок, а потім крокуйте світлістю вгору й униз, щоб згенерувати послідовний набір світліших і темніших відтінків, або обертайте відтінок, щоб вивести додаткові акценти. Можливість миттєво конвертувати означає, що ви можете думати в тій моделі, яка підходить для завдання, і все одно видавати той формат, якого очікує ваш код.

Приклади, підводні камені та приватність

Практичні застосування: перетворіть дизайнерський #3b82f6 на hsl(217, 91%, 60%), щоб згенерувати світліший стан наведення, або оберніть накладення rgba(0,0,0,0.5) на 8-значний hex для лаконічнішої таблиці стилів. Варто відзначити два підводні камені. Оскільки HSL зберігає відтінок як цілий градус, а насиченість і світлість — як цілі відсотки, перетворення RGB → HSL → RGB може зсунути канал на одну одиницю через округлення; видима різниця непомітна, але сувора перевірка на рівність може її помітити. А вбудований у браузер засіб вибору кольору розуміє лише 6-значний hex, тож він не може представити значення альфа — задавайте непрозорість у текстовому полі натомість. Усе обчислюється локально у вашому браузері: кольори, які ви вставляєте, зокрема ще не випущені фірмові палітри, ніколи не залишають ваш пристрій і ніколи не завантажуються й не логуються. Досліджуйте решту наших безкоштовних браузерних мережевих та інструментів для розробників, коли вам знадобиться допоміжна утиліта.