🎨

FAQ Конвертер цветов (HEX, RGB, HSL)

Как преобразовать HEX в RGB?

Чтобы преобразовать шестнадцатеричный код цвета в RGB, разделите шестизначную HEX-строку #RRGGBB на три пары, затем преобразуйте каждую пару из шестнадцатеричной системы (основание 16) в десятичную (основание 10).

Пример: #FF5733

  • FF = 255 (Красный)
  • 57 = 87 (Зелёный)
  • 33 = 51 (Синий)
  • Результат: rgb(255, 87, 51)

Для сокращённого HEX (#F53) сначала разверните каждую цифру в пару: #F53 становится #FF5533. Цифры удваиваются: F превращается в FF, 5 в 55, 3 в 33.

Восьмизначный HEX (#RRGGBBAA) работает так же, но с дополнительной парой для альфа-канала. #FF573380 добавляет 80 (128, или ~50% непрозрачности) для альфа-канала.

Для мгновенных преобразований используйте наш конвертер цветов. Он поддерживает все форматы, включая короткий и длинный HEX, с альфа-каналом и без.

В чём разница между RGB и RGBA?

RGB определяет цвет с использованием красного, зелёного и синего каналов. RGBA — это RGB с дополнительным альфа-каналом, который управляет непрозрачностью. Значение альфа-канала варьируется от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

rgb(255, 0, 0)         /* Полностью непрозрачный красный */
rgba(255, 0, 0, 0.5)  /* Красный с 50% непрозрачностью */

В современном CSS (CSS Color Level 4) псевдоним rgba() больше не нужен. Функция rgb() теперь принимает опциональный альфа-канал:

rgb(255 0 0 / 0.5)  /* Современный синтаксис, красный с 50% непрозрачностью */

Все современные браузеры поддерживают этот синтаксис. Устаревшая функция rgba() работает везде и не будет удалена, но использование rgb() с синтаксисом через слеш рекомендуется для нового кода.

Как преобразовать RGB в HSL?

Преобразование RGB в HSL состоит из трёх шагов:

  1. Нормализуйте значения RGB в диапазон 0-1 (разделите на 255)
  2. Найдите минимум и максимум среди трёх нормализованных значений — среднее между минимумом и максимумом является светлотой (L)
  3. Вычислите оттенок и насыщенность в зависимости от того, какой канал является максимальным, и разницы между максимумом и минимумом

Формула зависит от того, какой цветовой канал доминирует:

  • Если красный максимален: оттенок = (зелёный - синий) / (макс - мин)
  • Если зелёный максимален: оттенок = 2 + (синий - красный) / (макс - мин)
  • Если синий максимален: оттенок = 4 + (красный - зелёный) / (макс - мин)
  • Насыщенность зависит от светлоты: если L > 0.5, насыщенность = (макс - мин) / (2 - макс - мин), иначе насыщенность = (макс - мин) / (макс + мин)

Математика нетривиальна и в ней легко ошибиться, поэтому для быстрого получения результатов рекомендуется использовать инструмент конвертации цветов.

Почему цвета выглядят по-разному на разных экранах?

Восприятие цвета на разных экранах различается по нескольким причинам:

Калибровка экрана — Большинство потребительских экранов не откалиброваны по цвету. Заводские настройки по умолчанию сильно различаются по яркости, контрасту и цветовой температуре.

Различия цветового охвата — Разные экраны поддерживают разные диапазоны цветов. sRGB является веб-стандартом, но многие современные телефоны и ноутбуки поддерживают DCI-P3 (на 25% шире). Цвет, выходящий за пределы гаммы sRGB, выглядит правильно на широкоформатном дисплее, но обрезается или смещается на стандартном дисплее.

Технология дисплея — OLED-экраны дают более глубокий чёрный и более насыщенные цвета, чем LCD-экраны. IPS-панели обладают лучшей цветопередачей, чем TN-панели.

Угол обзора — Цвета смещаются при просмотре под углом, особенно на недорогих дисплеях.

Яркость и внешнее освещение — Экран с яркостью 50% в тёмной комнате выглядит иначе, чем тот же экран со 100% яркостью под прямыми солнечными лучами.

Чтобы минимизировать различия: Работайте в цветовом пространстве sRGB, калибруйте монитор аппаратным калибратором и тестируйте дизайн на нескольких устройствах перед публикацией.

Для чего хороша цветовая модель HSL?

HSL (Оттенок, Насыщенность, Светлота) идеально подходит для программного управления цветом. Её ключевое преимущество в том, что один канал несёт информацию о «цвете» (оттенок), а два других управляют внешним видом независимо от значения оттенка.

Что HSL делает простым:

  • Цветовые палитры — Сохраняйте тот же оттенок, меняйте светлоту и насыщенность для создания полной цветовой шкалы
  • Состояния наведения и активные состояния — Изменяйте светлоту на фиксированный процент: hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
  • Тёмная тема — Уменьшайте светлоту для всех цветов: вычтите 30% из светлоты каждого цвета
  • Темы — Меняйте значения оттенка для создания совершенно новых цветовых схем на основе той же структуры насыщенности/светлоты
  • Неактивные состояния — Уменьшайте насыщенность для обесцвечивания элементов: hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

Для чего HSL не подходит:

HSL не является перцептивно равномерным. Два цвета с одинаковым значением светлоты (например, hsl(60, 100%, 50%) — ярко-жёлтый и hsl(240, 100%, 50%) — чисто синий) имеют очень разную воспринимаемую яркость. Для перцептивно равномерного управления цветом используйте OKLCH.

Что означает знак # в HEX-цветах?

Префикс # (решётка или знак фунта) сообщает парсеру CSS, что следующие символы представляют шестнадцатеричное значение цвета. Это стандартное обозначение в CSS и HTML для шестнадцатеричных цветовых кодов.

Полный формат: #RRGGBB или #RRGGBBAA:

| Компонент | Значение | Пример (#FF5733) | |-----------|---------|---------------------| | # | HEX-префикс | Обязательный индикатор | | RR | Красный канал | FF (255) | | GG | Зелёный канал | 57 (87) | | BB | Синий канал | 33 (51) |

В HTML знак # также используется для якорных ссылок (<a href="#section">), но в контексте CSS или атрибута style он всегда указывает на HEX-цвет. HTML также поддерживает устаревшие «именованные цвета» (140 предопределённых названий, таких как red, blue, rebeccapurple), которым знак # не требуется.

Что такое цветовая гамма и почему она важна?

Цветовая гамма — это диапазон цветов, который устройство может отображать или который может представлять цветовое пространство. Представьте её как «словарь» цветов, доступных экрану или формату файла.

Распространённые цветовые гаммы, от наименьшей к наибольшей:

| Цветовое пространство | Относительный размер | Где используется | |-------------|--------------|------------| | sRGB | Базовый | Веб-стандарт, большинство мониторов, все браузеры | | Adobe RGB | ~на 50% шире | Профессиональная фотография, печать | | DCI-P3 | ~на 25% шире | Современные телефоны, Mac, многие ноутбуки | | Rec. 2020 | ~на 75% шире | HDR-телевидение, дисплеи высокого класса |

Почему это важно: Цвет, выходящий за пределы гаммы экрана, не может быть отображён точно. Устройство обрежет цвет до ближайшего внутригаммового значения или аппроксимирует его. Вот почему яркий глубокий красный в дизайн-файле может выглядеть тусклым или грязным на стандартном экране ноутбука.

Для веб-дизайна: Всегда разрабатывайте в sRGB или проверяйте, что ваши цвета безопасны для sRGB. OKLCH и цветовое пространство display-p3 позволяют ориентироваться на более широкие гаммы, но следует предусмотреть fallback sRGB для стандартных экранов.

В чём разница между HEX и HEX с альфа-каналом?

Стандартный HEX (#FF5733) использует шесть цифр и не имеет альфа-канала — цвет всегда полностью непрозрачный. HEX с альфа-каналом (#FF573380) использует восемь цифр, добавляя ещё две HEX-цифры в конец для канала альфа (непрозрачности).

Значения альфа-канала в HEX:

| HEX-пара | Десятичное | Непрозрачность | |----------|---------|---------| | 00 | 0 | Полностью прозрачный | | 80 | 128 | ~50% непрозрачности | | FF | 255 | Полностью непрозрачный |

Примеры:

#FF5733     — Сплошной красно-оранжевый, без прозрачности
#FF5733FF   — Тот же цвет, полностью непрозрачный (избыточный FF)
#FF573380   — Тот же цвет, 50% прозрачности
#FF573300   — Тот же цвет, полностью невидимый

Существует также четырёхзначный сокращённый HEX с альфа-каналом: #F538 разворачивается в #FF553388 (50% непрозрачности).

Поддержка браузерами: Восьмизначный HEX поддерживается всеми современными браузерами. Для поддержки устаревших браузеров (Internet Explorer) используйте rgba().

Как подобрать доступные цвета для моего сайта?

Следуйте этому пошаговому процессу для создания доступной цветовой системы:

1. Начните с основного брендового цвета. Выберите оттенок, представляющий ваш бренд, затем используйте HSL или OKLCH для создания полной шкалы от очень светлого (фоны) до очень тёмного (текст).

2. Установите текст почти чёрным. Основной текст на белом фоне должен быть от #1A1A1A до #333333. Никогда не используйте чистый чёрный (#000000) на чисто белом — это вызывает напряжение глаз у некоторых читателей. Тёмно-серый на белом обеспечивает лучшую читаемость.

3. Проверьте каждую пару переднего плана и фона. Каждое сочетание текста и фона должно соответствовать стандартам WCAG:

  • Обычный текст: минимум 4.5:1 (WCAG AA)
  • Крупный текст: минимум 3:1 (WCAG AA)
  • Стремитесь к 7:1 для основного текста (WCAG AAA)

4. Никогда не используйте цвет как единственный различитель. Ссылки должны иметь подчёркивание (а не просто другой цвет). Состояния ошибок должны включать иконки или текст. Графики должны использовать узоры или подписи.

5. Тестируйте с симуляторами дальтонизма. Дейтеранопия (красно-зелёная) — самый распространённый тип. Убедитесь, что ваш дизайн работает без цветового восприятия.

6. Проверьте в оттенках серого. Если ваш дизайн теряет смысл при преобразовании в оттенки серого, вы слишком сильно полагаетесь на цвет для передачи информации.

Используйте наш конвертер цветов, чтобы мгновенно проверять коэффициенты контрастности между любыми двумя цветами.

FAQ Конвертер цветов (HEX, RGB, HSL) - CoolTool