Конвертер RGB в HEX

Конвертер RGB в HEX мгновенно преобразует значения цветов RGB (Red, Green, Blue) в шестнадцатеричные цветовые коды, используемые в веб-дизайне, CSS и графических приложениях. Он обеспечивает вывод в нескольких форматах, включая HSL, HSV и CMYK, а также предоставляет фрагменты кода CSS, палитры цветовой гармонии, проверку контрастности доступности WCAG и поиск ближайшего именованного цвета.

Как работает преобразование RGB в Hex

RGB (Красный, Зеленый, Синий) и Hex — это две разные нотации для одной и той же аддитивной цветовой модели, используемой электронными дисплеями. Каждый цветовой канал находится в диапазоне от 0 до 255 в десятичной системе. Чтобы преобразовать значение в Hex, каждое десятичное значение канала выражается как двузначное шестнадцатеричное число (основание 16), и три пары объединяются с префиксом #.

Формула преобразования

Для каждого значения канала V (0–255):

1. Разделите V на 16. Частное — это первая шестнадцатеричная цифра, остаток — вторая.
2. Сопоставьте цифры 10–15 с буквами A–F.
3. Объедините: #RRGGBB

Пример: RGB(255, 165, 0) → 255 = FF, 165 = A5, 0 = 00 → #FFA500 (Оранжевый)

Объяснение форматов цвета

HEX (Шестнадцатеричный)

Самая распространенная цветовая нотация в веб-разработке. Символ #, за которым следуют 6 шестнадцатеричных цифр, представляющих RR, GG, BB. Сокращенная запись (#RGB) доступна, когда в каждой паре цифры идентичны, например, #FF0000 → #F00.

HSL (Hue, Saturation, Lightness — Тон, Насыщенность, Светлота)

Более интуитивно понятная модель для дизайнеров. Тон (Hue) — это угол на цветовом круге (0°–360°), Насыщенность (Saturation) — это яркость (0–100%), а Светлота (Lightness) варьируется от черного (0%) через чистый цвет (50%) до белого (100%). HSL позволяет легко создавать вариации цвета, настраивая всего один параметр.

HSV / HSB (Hue, Saturation, Value / Brightness — Тон, Насыщенность, Значение / Яркость)

Похожа на HSL, но определяет яркость по-другому. Значение 100% означает, что цвет находится в самом ярком состоянии для данного тона и насыщенности. Эта модель используется во многих приложениях для графического дизайна, таких как Photoshop и Figma.

CMYK (Cyan, Magenta, Yellow, Key/Black — Голубой, Пурпурный, Желтый, Ключевой/Черный)

Субтрактивная цветовая модель, используемая в печати. В то время как экраны добавляют свет (RGB), принтеры смешивают чернила, которые поглощают свет (CMYK). Преобразование в CMYK необходимо при подготовке цифровых макетов для физической печати для обеспечения точности цветопередачи.

Типы цветовой гармонии

Цветовые гармонии — это комбинации цветов, основанные на их положении на цветовом круге. Этот инструмент генерирует четыре типа:

• Дополнительные (Complementary): Цвет, находящийся прямо напротив на круге (на расстоянии 180°). Создает максимальный контраст и визуальный эффект.
• Аналогичные (Analogous): Цвета, расположенные рядом на круге (±30°). Создают гармоничные, комфортные дизайны, часто встречающиеся в природе.
• Триадические (Triadic): Три цвета, равномерно распределенные на круге (на расстоянии 120°). Предлагают яркий контраст при сохранении баланса.
• Сплит-дополнительные (Split-Complementary): Два цвета, прилегающие к дополнительному (150° и 210°). Более мягкая альтернатива дополнительной схеме с большим разнообразием.

Доступность по контрасту WCAG

Руководство по доступности веб-контента (WCAG) определяет коэффициенты контрастности для обеспечения читаемости:

Распространенные преобразования RGB в Hex

Часто задаваемые вопросы

Как перевести RGB в Hex?

Чтобы перевести RGB в Hex, возьмите значение каждого цветового канала (0-255), разделите на 16, чтобы получить частное и остаток, а затем сопоставьте каждое значение с шестнадцатеричными цифрами (0-9, A-F). Объедините все три 2-значных шестнадцатеричных значения с префиксом #. Например, RGB(255, 165, 0) превращается в #FFA500: 255→FF, 165→A5, 0→00.

В чем разница между цветовыми кодами RGB и Hex?

RGB и Hex представляют одни и те же цвета, используя разную нотацию. RGB использует три десятичных числа (0-255) для каналов Красного, Зеленого и Синего, например rgb(255, 0, 0). Hex использует #, за которым следуют шесть шестнадцатеричных цифр, например #FF0000. Оба кодируют идентичную информацию о цвете.

Какую цветовую модель использует Hex?

Цветовые коды Hex используют аддитивную цветовую модель RGB (Red, Green, Blue), ту же модель, которая используется компьютерными дисплеями. Шесть шестнадцатеричных цифр представляют три пары для красного, зеленого и синего каналов.

Что такое коэффициент контрастности WCAG?

Коэффициент контрастности WCAG измеряет разницу в яркости между двумя цветами, что важно для обеспечения читаемости текста людьми с нарушениями зрения. Коэффициент варьируется от 1:1 до 21:1.

Как перевести RGB в HSL?

Для перевода RGB в HSL: нормализуйте R,G,B до диапазона 0-1, найдите max и min значения, рассчитайте Светлоту как (max+min)/2, Насыщенность в зависимости от светлоты, а Тон — на основе того, какой канал является доминирующим.

Что такое CMYK и когда его следует использовать?

CMYK — это субтрактивная цветовая модель, используемая для печати (Голубой, Пурпурный, Желтый, Черный). Конвертация в CMYK важна при подготовке макетов для печати на бумаге или других физических носителях.

Дополнительные ресурсы

• Руководство WCAG 2.1 по контрасту