Конвертер кольорів HEX ↔ RGB ↔ HSL
Миттєво конвертуйте кольори між форматами HEX, RGB і HSL з візуальним вибором кольору.
Введіть колір у форматі HEX, RGB або HSL — конвертер миттєво оновлює всі три формати одночасно. На вкладці HEX доступний нативний вибір кольору в браузері. Кнопка «Копіювати» поруч з кожним форматом копіює значення в буфер обміну. Підтримуються як 3-символьні (#ABC), так і 6-символьні (#AABBCC) HEX-коди.
Інструмент використовується веб-розробниками, UI/UX-дизайнерами та всіма, хто працює з CSS, HTML, Figma або дизайн-системами. Конвертація між HEX, RGB та HSL — щоденне завдання при розробці сайтів. Всі обчислення відбуваються миттєво в браузері.
Часті запитання
Що таке HEX-код кольору?
HEX-колір — шестизначне шістнадцяткове значення (наприклад, #1565C0), що кодує червоний, зелений та синій компоненти. Кожна пара символів — від 00 до FF (0–255 у десятковій). HEX — найпоширеніший формат у CSS, HTML та дизайн-інструментах.
Яка різниця між RGB і HSL?
RGB описує колір через інтенсивність червоного, зеленого та синього каналів (0–255). HSL (відтінок, насиченість, світлість) інтуїтивніший для дизайнерів: відтінок — кут 0–360°, насиченість — 0–100%, світлість — 0–100%. HSL зручний коли потрібно зробити колір світлішим, темнішим або змінити насиченість.
Як перевести HEX у RGB?
Розділіть 6-символьний HEX на три пари: перша — червоний, друга — зелений, третя — синій. Переведіть кожну пару з шістнадцяткової в десяткову. Наприклад: #1565C0 → 15=21, 65=101, C0=192 → RGB(21, 101, 192). Конвертер робить це автоматично.
Чи підтримується трисимвольний HEX?
Так. Запис #1AC рівнозначний #11AACC — кожен символ подвоюється. Конвертер приймає обидва формати. Для максимальної сумісності рекомендую використовувати 6-символьний варіант.
Де використовуються HEX-кольори?
HEX використовується у CSS (color: #1565C0), HTML, SVG та більшості дизайн-інструментів (Figma, Adobe XD, Sketch, Photoshop). HEX компактний і читаний. RGB кращий для RGBA (з прозорістю) та програмного керування кольором.
Як знайти HEX-код кольору у Figma?
У Figma: виберіть елемент, відкрийте панель Fill праворуч, натисніть на кольоровий прямокутник — HEX-код буде показаний і його можна скопіювати. Піпетка дозволяє зняти колір з будь-якого місця екрана. У VS Code: встановіть розширення "Color Highlight" для відображення кольорових квадратиків поруч з кодами.
Що таке RGBA?
RGBA додає до RGB канал прозорості: RGBA(21, 101, 192, 0.8) — той самий колір з непрозорістю 80%. Значення alpha від 0 (повністю прозорий) до 1 (непрозорий). Для RGBA візьміть RGB-значення звідси і додайте потрібне alpha у CSS: rgba(R, G, B, alpha).
Як перевести HSL у HEX?
Конвертація HSL → HEX проходить через проміжний RGB. Спочатку обчислюється RGB за формулою HSL-to-RGB, потім кожен компонент переводиться у двозначний шістнадцятковий. Цей конвертер робить все автоматично.
Що таке веб-безпечні кольори?
Веб-безпечні кольори — набір з 216 кольорів, що гарантовано відображались однаково на старих моніторах. Сучасні дисплеї підтримують понад 16 млн кольорів, тому веб-безпечна палітра втратила актуальність. Використовуйте будь-які HEX/RGB/HSL без обмежень.
Як задаються кольори у CSS?
CSS підтримує: HEX (#1565C0), RGB (rgb(21, 101, 192)), RGBA, HSL (hsl(213, 80%, 42%)), HSLA, іменовані кольори (blue, red) та нові формати oklch(). HEX і RGB найбільш сумісні. HSL зручний для програмного налаштування світлості та насиченості через CSS custom properties.