Конвертер HEX RGB
Конвертируйте цвета между HEX, RGB(A) и HSL(A) с обновлением вживую, поддержкой альфа-канала и готовыми к копированию значениями CSS.
🔒 Работает полностью в вашем браузере — ничего не загружаетсяКонвертируйте форматы цветов без догадок
Значения цветов часто переходят между инструментами, которые предпочитают разные форматы. Дизайнер может передать токен HEX, для CSS-анимации могут понадобиться каналы RGB, а корректировать тему проще всего в HSL. Этот конвертер HEX RGB поддерживает синхронизацию распространённых веб-форматов: вводите имеющуюся версию и копируйте нужную. Предпросмотр вживую также делает ошибки очевидными: если канал введён неверно, предпросмотр сразу меняется.
Конвертер поддерживает повседневный рабочий процесс с CSS: шестизначный HEX, RGB, RGBA, HSL и HSLA. Альфа-канал управляется отдельно, потому что прозрачность обычно является дизайнерским решением, а не частью токена фирменного цвета. Установите альфа в единицу для непрозрачных цветов или уменьшите её, чтобы создавать наложения, кольца фокуса, тени и полупрозрачные фоны с тем же базовым оттенком.
Когда использовать RGB, RGBA, HSL или HSLA
RGB — это прямое описание цвета экрана, оно полезно, когда вы сверяете значения со снимков экрана, вывода canvas или старых дизайн-инструментов. RGBA добавляет прозрачность, что удобно для наложений и тонких границ. HSL описывает цвет через оттенок, насыщенность и светлоту, поэтому он естественнее, когда нужно создать родственные цвета: поверните оттенок для нового акцента, уменьшите насыщенность для приглушённого состояния или увеличьте светлоту для более светлого тона. HSLA добавляет тот же контроль альфа к этой более понятной модели.
Надёжные значения для CSS и дизайн-токенов
В дизайн-системах важна согласованность преобразований. Ошибки округления или скопированные опечатки могут порождать почти одинаковые цвета, которые трудно заметить, но сложно поддерживать. Этот инструмент ограничивает каналы RGB допустимым диапазоном 0–255, держит проценты HSL в диапазоне 0–100 и форматирует результат как готовый к вставке CSS. Поскольку всё работает локально, вы можете безопасно конвертировать цвета ещё не выпущенных продуктов, палитры клиентов или внутренние токены бренда, никуда их не загружая.
Как использовать
- Введите значениеВведите значение HEX или настройте каналы RGB и HSL.
- Проверьте форматыКонвертер поддерживает синхронизацию результатов HEX, RGB(A) и HSL(A).
- Скопируйте CSSИспользуйте кнопки копирования, чтобы вставить нужный формат в CSS, дизайн-токены или документацию.