Конвертер цветов 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" — оно отображает цветные квадратики рядом с HEX/RGB в CSS-файлах.
Что такое RGBA?
RGBA добавляет к RGB канал прозрачности: RGBA(21, 101, 192, 0.8) — тот же цвет с непрозрачностью 80%. Значение alpha от 0 (полностью прозрачный) до 1 (непрозрачный). Данный конвертер работает с RGB без alpha — для RGBA возьмите RGB-значения отсюда и добавьте нужное alpha в CSS: rgba(R, G, B, alpha).
Как перевести HSL в HEX?
Конвертация HSL → HEX проходит через промежуточный RGB. Сначала вычисляется RGB по формуле HSL-to-RGB, затем каждый компонент переводится в двузначный шестнадцатеричный. Этот конвертер делает всё автоматически — введите HSL, и HEX обновится мгновенно.
Что такое веб-безопасные цвета?
Веб-безопасные цвета — набор из 216 цветов (6 значений на канал: 00, 33, 66, 99, CC, FF), гарантированно отображавшихся одинаково на старых мониторах. Современные дисплеи поддерживают более 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.