Что такое шестнадцатеричный код цвета?

Шестнадцатеричный код записывает цвет в виде шестнадцатеричных цифр — так, как это делают CSS и большинство инструментов для дизайна. В #3b82f6 каждая пара цифр обозначает один канал: 3b — красный, 82 — зелёный, а f6 — синий, в диапазоне от 00 (отсутствует) до ff (максимальное значение). Необязательная четвёртая пара задаёт альфа-канал, или непрозрачность, поэтому #3b82f6cc — это тот же синий цвет с непрозрачностью 80%. Коды, в которых каждая пара состоит из одинаковых цифр, можно сокращать до трёх или четырёх цифр, поэтому #ff8800 также записывается как #f80.

Описание инструмента

Этот инструмент позволяет редактировать пары шестнадцатеричного кода цвета. Введите или вставьте код, выберите цвет либо вставьте цвет в формате RGB, HSL или другом формате, затем измените пары красного, зелёного, синего и альфа-канала или непрозрачность и просмотрите результат на шахматной сетке прозрачности. Изменённый цвет отображается в шестнадцатеричных форматах, используемых CSS, Android и кодом, — каждый вариант готов к копированию.

Возможности

  • Редактирование шестнадцатеричных кодов из 3, 4, 6 и 8 цифр — с # или без него
  • Изменение каждого канала в виде двухзначной шестнадцатеричной пары, а альфа-канала — в виде шестнадцатеричной пары или процента
  • Выбор цвета или вставка цвета в формате RGB, HSL или другом формате с сохранением альфа-канала
  • Предварительный просмотр прозрачных цветов на шахматном фоне
  • Получение цвета в форматах 6-значного HEX, 8-значного HEX, сокращённого HEX, rgb() или rgba(), #AARRGGBB и 0xAARRGGBB
  • Переключение между строчными и прописными шестнадцатеричными цифрами
  • Работает в браузере

Как это работает

Код из 3 или 4 цифр расширяется путём удвоения каждой цифры, а код без пары альфа-канала считается полностью непрозрачным (ff). Одна цифра, введённая в поле канала, считается 0, за которым следует эта цифра, поэтому f превращается в 0f. Проценты непрозрачности округляются до ближайшего значения альфа-канала от 0 до 255, поэтому 80% превращаются в cc (204). Сокращённая форма существует только тогда, когда обе цифры каждой пары совпадают; в противном случае это поле остаётся пустым.

Советы

  • CSS считывает пару альфа-канала последней (#RRGGBBAA), а ресурсы цветов Android и .NET помещают её первой (#AARRGGBB), поэтому для них выбирайте поля ARGB.
  • Оставьте альфа-канал равным ff, чтобы получить обычный 6-значный код; в полях для 8-значного и ARGB-кодов он всё равно отображается полностью.