Вы нашли идеальный цвет в формате HEX, но дизайн-инструмент требует RGB. Или клиент прислал цвет в RGB, а вам нужно значение HSL для CSS. Конвертация цветовых форматов — ежедневная задача дизайнеров и разработчиков. Наш Конвертер цветов делает это мгновенно.
Что вам понадобится
- Значение цвета в любом формате (HEX, RGB, HSL или другом)
- Веб-браузер (Chrome, Firefox, Safari или Edge)
- Без регистрации и установки
Пошаговое руководство
Введите значение цвета
Откройте инструмент Конвертер цветов. Введите или вставьте значение цвета в любом поддерживаемом формате. Например, введите #3B82F6 как HEX-значение, rgb(59, 130, 246) как RGB или hsl(217, 91%, 60%) как HSL. Инструмент автоматически распознаёт формат.
Просмотрите все конвертации
Инструмент мгновенно отображает ваш цвет во всех поддерживаемых форматах: HEX, RGB, HSL и других. Вы можете увидеть предпросмотр цвета вместе со всеми эквивалентными значениями. Если нужно подкорректировать цвет, используйте палитру выбора цвета для визуальной настройки.
Скопируйте нужный формат
Нажмите кнопку копирования рядом с любым форматом, чтобы скопировать значение в буфер обмена. Вставьте его прямо в CSS-файл, дизайн-инструмент или куда вам нужно. Никакого ручного переписывания.
Полезно знать Конвертер цветов работает полностью в вашем браузере. Он работает офлайн после загрузки и не требует регистрации или установки.
Описание цветовых форматов
Разные инструменты и контексты используют разные цветовые форматы. Вот когда использовать каждый из них:
HEX
Самый распространённый формат в вебе. HEX-цвет начинается с #, за которым следуют шесть символов (буквы и цифры), например #FF5733.
- Используется в: CSS, HTML, дизайн-инструментах (Figma, Sketch, Photoshop)
- Формат:
#RRGGBB, где каждая пара — шестнадцатеричное значение от 00 до FF - Пример:
#3B82F6(средний синий)
RGB
Описывает цвет с помощью компонентов красного, зелёного и синего, каждый от 0 до 255.
- Используется в: CSS (функция
rgb()), языках программирования, LED-освещении - Формат:
rgb(red, green, blue) - Пример:
rgb(59, 130, 246)
HSL
Описывает цвет с помощью тона (Hue, 0-360 градусов на цветовом круге), насыщенности (Saturation, 0-100%) и светлоты (Lightness, 0-100%).
- Используется в: CSS (функция
hsl()), теории цвета, дизайн-системах - Формат:
hsl(hue, saturation%, lightness%) - Пример:
hsl(217, 91%, 60%)
Совет HSL — самый интуитивный формат для настройки цветов. Хотите светлее? Увеличьте значение светлоты. Хотите приглушённый тон? Уменьшите насыщенность. Это делает HSL идеальным для построения цветовых систем и создания вариаций базового цвета.
Когда использовать какой формат
| Ситуация | Рекомендуемый формат |
|---|---|
| Ручное написание CSS | HEX (короткий и знакомый) или HSL (легко настраивать) |
| Спецификации дизайн-инструментов | HEX (отраслевой стандарт) |
| Динамическое изменение цветов в коде | HSL (проще всего настраивать программно) |
| Передача цветов клиентам | HEX (наиболее узнаваемый) |
| Дизайн для печати | CMYK (отдельно от экранных форматов) |
За пределами отдельных цветов
После конвертации цвета вам могут пригодиться связанные инструменты:
- Генератор градиентов: создавайте плавные CSS-градиенты с вашими цветами. Введите два или более цвета и получите готовый код градиента для вставки в таблицу стилей.
- Генератор цветовых палитр: генерируйте гармоничные цветовые палитры на основе начального цвета. Автоматически получайте комплементарные, аналогичные, триадные и другие цветовые схемы.
Эти инструменты работают вместе с Конвертером цветов, помогая создать полную цветовую систему для вашего проекта.
Важно Цвета могут выглядеть по-разному на разных экранах из-за калибровки дисплея, цветовых профилей и настроек яркости. Когда точность цветопередачи критична (брендинг, дизайн для печати), всегда проверяйте цвета на целевом носителе, а не только на своём экране.
Часто задаваемые вопросы
В чём разница между HEX и RGB?
Они представляют одну и ту же информацию в разных нотациях. HEX использует шестнадцатеричную систему (основание 16), а RGB — десятичную (основание 10). #FF0000 и rgb(255, 0, 0) — это один и тот же чистый красный цвет.
Можно ли конвертировать в CMYK для печати? Экранные цветовые форматы (HEX, RGB, HSL) и форматы для печати (CMYK) — это принципиально разные цветовые модели. Математическая конвертация существует, но для точной цветопередачи при печати следует использовать профессиональный инструмент управления цветом.
Как насчёт прозрачности (альфа-канала)?
HEX поддерживает альфа-канал с дополнительными двумя символами (#3B82F680). RGB и HSL поддерживают его через функции rgba() и hsla(). Конвертер цветов также работает с этими форматами.
Следующие шаги
После конвертации цветов попробуйте Генератор градиентов, чтобы создать красивые CSS-градиенты, или используйте Генератор цветовых палитр, чтобы построить полную цветовую схему на основе выбранного цвета.