Конвертер цветовых кодов
Введите цвет и скопируйте значения HEX, RGB и HSL.
#624DE3CC
Об этом инструменте
Инструмент «Конвертер цветовых кодов» показывает один и тот же цвет сразу в форматах HEX, RGB и HSL и позволяет конвертировать между ними. Выберите цвет, введя значение, выбрав готовый цвет из набора или используя пипетку, а также настройте прозрачность. Подойдёт, когда нужно перевести цвет в код, требуемый для веб-дизайна, работы с интерфейсами, CSS или редактирования изображений.
Как использовать
Выберите цвет
Введите значение в поле HEX, RGB или HSL либо выберите готовый цвет. В средах с поддержкой можно также воспользоваться кнопкой «Пипетка», чтобы выбрать цвет прямо с экрана.
Настройте прозрачность
Передвиньте ползунок прозрачности, чтобы задать непрозрачность цвета. Настройка отражается в предпросмотре сверху и в кодах цвета.
Проверьте и скопируйте результат
Посмотрите цвет в предпросмотре и нажмите кнопку копирования рядом с полем HEX, RGB или HSL, чтобы скопировать нужное значение в буфер обмена.
Возможности
HEX, RGB и HSL вместе
Введите цвет в одном формате и сразу увидите его значения в HEX, RGB и HSL.
Предпросмотр в реальном времени и прозрачность
Предпросмотр обновляется мгновенно при изменении цвета или прозрачности, а ползунок позволяет создавать полупрозрачные цвета.
Пипетка и готовые цвета
В поддерживаемых браузерах выбирайте цвет с экрана пипеткой или кликайте по распространённым готовым цветам, чтобы быстро применить их.
Копируйте каждый формат отдельно
Копируйте значения HEX, RGB или HSL по отдельности, чтобы сразу использовать их в CSS, инструментах дизайна и документах.
Ввод значений вручную
Если код цвета уже известен, просто введите его в поле, чтобы увидеть результат конвертации.
Обработка в браузере
Ваши значения цвета и результаты конвертации остаются в браузере — на сервер ничего не отправляется.
Примеры использования
Конвертация кодов для CSS
Переведите цвет HEX из макета в RGB или HSL, чтобы использовать его в стилях CSS.
Перенос цветов между инструментами дизайна
Когда форматы различаются, переводите один и тот же цвет в тот формат, который требуется каждой программе.
Создание полупрозрачных фонов
Настройте прозрачность, чтобы получить полупрозрачные цвета для оверлеев, фонов, кнопок и рамок.
Выбор цвета с экрана
Используйте пипетку, чтобы выбрать цвет на веб-странице, изображении или в интерфейсе приложения и посмотреть его в виде кода.
Управление цветами бренда
Держите значения HEX, RGB и HSL фирменных цветов вместе, чтобы согласованно использовать их в вебе, печати и дизайн-документах.
Часто задаваемые вопросы
Чем отличаются HEX, RGB и HSL?
HEX представляет цвет в шестнадцатеричном виде, например #8AD0FF. RGB выражает интенсивность красного, зелёного и синего числами, а HSL описывает цвет через тон, насыщенность и светлоту.
Какой формат использовать?
HEX прост и широко используется в вебе и дизайн-документах. RGB удобен для прямой настройки цветовых каналов, а HSL — для интуитивного изменения тона или светлоты.
Как прозрачность отражается в коде цвета?
Значение HEX с прозрачностью выводится как 8-значный код, где к обычным 6 знакам добавляется значение альфы. Например, в #8AD0FFCC последние две цифры обозначают прозрачность.
Чем отличаются 6-значный и 8-значный HEX?
6-значный HEX содержит только значения красного, зелёного и синего. 8-значный HEX добавляет в конец значение альфы, отвечающее за прозрачность.
Что означают прозрачность 100% и 0%?
100% — полностью непрозрачный цвет, 0% — полностью прозрачный. Промежуточные значения дают полупрозрачные цвета, сквозь которые виден фон.
Каков диапазон значений RGB?
Значения RGB лежат в диапазоне от 0 до 255 для каждого компонента: красного, зелёного и синего. Чем больше значение, тем сильнее выражен этот компонент.
Что означают значения HSL?
H — это тон, обычно значение от 0 до 359 градусов. S — насыщенность, L — светлота; обе выражаются в процентах.
Работает ли пипетка во всех браузерах?
Поддержка зависит от браузера и окружения. В средах без поддержки воспользуйтесь полями цвета или готовыми цветами.
Можно ли изменить цвет после выбора готового?
Да. После выбора готового цвета скорректируйте значения HEX, RGB или HSL либо прозрачность, чтобы точно настроить цвет.
Что копирует кнопка копирования?
Каждая кнопка копирует текущее значение цвета в своём формате. Вы можете скопировать только нужное значение HEX, RGB или HSL.
Отправляется ли введённый цвет на сервер?
Нет. Вся обработка происходит локально в браузере. Ваши цвета и результаты конвертации никогда не передаются на сервер.
Связанные инструменты
