Преобразователь цветов HEX в RGB

Что такое цветовой код HEX?

Цветовой код HEX представляет собой шестизначную буквенно-цифровую строку, используемую в веб-дизайне и цифровой графике для представления определенного цвета.#RRGGBB, где каждая пара двух символов кодирует интенсивность одного из трех аддитивных первичных цветов - красного (RR), зеленого (GG) и синего (BB) - с использованием шестнадцатеричного обозначения (база 16).00(нулевой интенсивности) доFF(максимальная интенсивность, эквивалентная 255 в десятичных знаках).

Коды HEX возникли из необходимости определять цвета в HTML и CSS, не полагаясь на названные цветовые ключевые слова.rgb(), hsl(), иoklch(), HEX остается наиболее широко используемым обозначением в разработке фрон-энда, передаче дизайна и руководствах по брендингу. Практически каждый цветовой выборщик в таких инструментах, как Figma, Sketch, Adobe Photoshop и Canva, по умолчанию отображает значение HEX.

Общее количество уникальных цветов, представляемых шестизначными кодами HEX, составляет 16 777 216 (256 x 256 x 256). Это часто называют "истинным цветом" или "24-битным цветом", который соответствует цветовой глубине большинства современных дисплеев. Каждый канал получает 8 бит (один байт), а три канала вместе производят 24 бит цветовых данных.

Коды HEX не чувствительны к буквам, так что#ff8000и#FF8000Некоторые руководства по стилю предпочитают заглавные буквы для удобства чтения, в то время как CSS minifiers часто выводят заглавные буквы для сохранения байтов - хотя на практике разница незначительна.

Как преобразовать HEX в RGB шаг за шагом

Преобразование цветового кода HEX в его эквивалент RGB является простым. Процесс включает в себя разделение шестизначной строки на три пары и преобразование каждой пары из гексадецимального (база 16) в десятичный (база 10).

1. Удалить хэш-символ.Если код HEX начинается с#Например,#1A2B3Cстановится1A2B3C.
2. Разделитесь на три пары.Разделим оставшуюся строку на три группы из двух символов:1A, 2B, 3C.
3. Преобразуйте каждую пару в десятичную.Используйте шестнадцатеричную систему значений, где первая цифра умножается на 16 и добавляется вторая цифра:
   • Красный:1A-> (1 х 16) + 10 =26
   • Зеленый:2B-> (2 х 16) + 11 =43
   • Синий:3C-> (3 х 16) + 12 =60
4. Напишите значение RGB.Объедините три десятичных значения:rgb(26, 43, 60).

Шестидесятизначные цифры и их десятичные эквиваленты: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15.

Для программного преобразования большинство языков предлагают встроенные функции.parseInt("1A", 16)возвраты26В Python,int("1A", 16)сам CSS обрабатывает оба формата нативно, поэтому преобразование в первую очередь полезно, когда вам нужно манипулировать отдельными цветными каналами в коде, например, регулируя яркость, создавая градиенты программно или смешивая два цвета.

3-значные и 6-значные коды HEX

CSS поддерживает короткий трехзначный формат HEX (#RGB) для удобства, когда каждая из трех пар состоит из одинаковых цифр.

• #F80расширяется до#FF8800-> rgb ((255, 136, 0)
• #FFFрасширяется до#FFFFFF-> rgb ((255, 255, 255)
• #000расширяется до#000000-> rgb ((0, 0, 0)
• #09Cрасширяется до#0099CC-> rgb{0, 153, 204)
• #A3Fрасширяется до#AA33FF-> rgb{170, 51, 255)

Трехзначное обозначение уменьшает количество доступных цветов с 16,7 миллиона до всего 4,096 (16 x 16 x 16), поэтому оно не может представлять каждый цвет.

CSS также поддерживает четырехзначные цифры (#RGBA) и восьмизначные (#RRGGBBAA) Коды HEX, включающие альфа-канал (транспарентность).FFполностью непрозрачный и00является полностью прозрачным.#FF880080представляет цветrgb(255, 136, 0)Наш преобразователь фокусируется на стандартных 3- и 6-значных форматах; если вы вводите код с альфа-каналом, он будет обрабатывать только часть RGB.

Справочная таблица HEX к RGB

Ниже приведена справочная таблица распространенных цветов HEX и их эквивалентов RGB. Эта таблица охватывает наиболее часто используемые цвета в веб-дизайне, цвета с именем CSS и популярные варианты палитры брендов.

CSS определяет в общей сложности 147 именных цветов, каждый из которых имеет соответствующее значение HEX. В то время как именные цвета удобны для прототипирования, профессиональные проекты обычно полагаются на значения HEX или RGB для точности и согласованности в браузерах и инструментах проектирования.

Цвета популярных брендов - значения HEX и RGB

Разработчикам и дизайнерам часто нужны точные значения HEX и RGB популярных цветов брендов для макетов, интеграций и руководств по стилю.

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

Сравнение цветовых моделей: HEX, RGB, HSL и CMYK

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

HEX и RGB математически идентичны-- они представляют одно и то же цветовое пространство с использованием разных обозначений. Преобразование между ними - это простой перевод от 16-го до 10-го основания без потери точности или различия гаммы. HSL, с другой стороны, является преобразованием RGB в цилиндрическую систему координат, которая облегчает рассуждение о оттенке, насыщенности и легкости независимо. CMYK - это вычитающая цветовая модель, используемая в печати, и не может представлять все цвета RGB (и наоборот), поэтому преобразования между RGB и CMYK являются приблизительными.

В современном CSS (уровень 4)color()функции и новые цветовые пространства, такие какoklch()иdisplay-p3Тем не менее, HEX и RGB остаются основой для веб-совместимости и поддерживаются каждым браузером, используемым сегодня.

Использование HEX и RGB в CSS и JavaScript

Как значения HEX, так и RGB действительны в CSS и дают одинаковые результаты.

Декларации CSS:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

Функции преобразования JavaScript:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

При работе с HTML Canvas API, цвета часто должны быть установлены как строки."#FF8000"и"rgb(255, 128, 0)"Работа дляfillStyleиstrokeStyle. однакоgetImageData()метод возвращает данные пикселей в виде массива 0 - 255 целых чисел (RGBA), что делает RGB естественным форматом для манипулирования на уровне пикселей.

В пользовательских свойствах CSS (переменных) значения HEX обычно хранятся для простоты:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Эта модель хранения необработанных значений канала RGB в качестве переменной CSS является популярным методом, который позволяет применять непрозрачность динамически без преобразования между форматами во время выполнения.

Доступность и цветовой контраст

Преобразование HEX в RGB часто является первым шагом в расчете коэффициентов цветового контраста для соответствия требованиям доступности.4,5 к 1для обычного текста и3: 1для большого текста (18px+ bold или 24px+ regular).

Формула контрастности требуетотносительная яркостьКаждый цвет вычисляется из линейных значений RGB.

1. Преобразовать HEX в RGB (0 - 255 на канал).
2. Нормализация каждого канала до 0 - 1 путем деления на 255.
3. Применим формулу линеаризации sRGB: если значение <= 0,04045, делим на 12,92; в противном случае вычислим ((значение + 0,055) / 1,055) ^ 2.4.
4. Вычислить светимость: L = 0,2126 x R + 0,7152 x G + 0,0722 x B.
5. Вычислить соотношение контрастности между двумя цветами: (L1 + 0,05) / (L2 + 0,05) где L1 является более светлым цветом.

Как вы можете видеть, значения RGB являются основным входом для каждого расчета контраста доступности. Такие инструменты, как WebAIM Contrast Checker, Chrome DevTools Color Picker и Axe Accessibility Scanner, выполняют это преобразование внутри.

Для дизайнеров быстрое правило: темный текст на светлом фоне (или наоборот) с разницей яркости не менее 125 и цветовой разницей не менее 500 (используя сумму абсолютных различий по каналам R, G, B) обычно проходит стандарты WCAG AA.