Что такое шестнадцатеричный код? Все, что Вам нужно знать

Работать с цветами в HTML относительно просто. С помощью нескольких простых объявлений CSS вы можете изменить цвет любого текста или фона на своей веб-странице. Но как указать цвет? Ответ на этот вопрос приведет нас в кроличью нору, которая в конечном итоге приведет нас к концепции шестнадцатеричных цветовых кодов.

Если вы раньше работали с HTML или CSS, вы, вероятно, слышали термин шестнадцатеричный код. Но что такое шестнадцатеричный код? Какие есть примеры шестнадцатеричных кодов? В чем разница между шестнадцатеричным кодом и цветовым кодом RGB?

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

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

#FF0092

Связанный: Основные термины графического дизайна, которые вам нужно знать

Вы можете указать цвета в CSS несколькими различными способами. Вы можете использовать названия некоторых предопределенных цветов, таких как красный а также темно-пурпурный. Однако, чтобы указать точные оттенки цвета, вам нужно использовать более точное измерение: что-то числовое.

CSS предлагает два основных варианта: RGB и шестнадцатеричный. В обоих форматах вы указываете количество красного, зеленого и синего, составляющих окончательный цвет. RGB использует три числа от 0 до 255. Hex делает то же самое, только с другим основанием (16), чем десятичное число (10), к которому вы привыкли.

Hex использует буквы AF в дополнение к цифрам 0-9, всего 16 символов. A в шестнадцатеричном формате эквивалентно 10 в десятичном формате. F в шестнадцатеричном формате — это 15 в десятичном формате.

Как работают шестнадцатеричные цветовые коды?

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

Имея 16 × 16 (256) значений для каждого компонента цвета, можно получить 256 × 256 × 256 возможных комбинаций. В шестнадцатеричном формате они варьируются от #000000 (чисто черный) до #FFFFFF (чисто белый).

Как читать шестнадцатеричные цветовые коды

Разобраться в шестнадцатеричных цветовых кодах легко. Возьмем пример #FF5733. Сначала разделите шесть символов на три части по два символа в каждой. Как вы знаете, первые две части представляют красный цвет, вторые две части — зеленый, а третьи две части — синий. Итак, в нашем примере:

• Красная составляющая RR имеет значение FF.
• Зеленый компонент, GG, равен 57.
• Синий компонент, BB, равен 33.

Теперь, чтобы найти интенсивность этих цветовых сегментов, вам нужно вычислить шестнадцатеричное число, используя следующие три шага:

1. Умножьте первый шестнадцатеричный символ RR на 16. Если символ является буквой, преобразуйте его в соответствующее значение. В этом случае первый символ — F, что равно 15. Итак, в нашем примере вы умножаете 15 × 16, что равно 240.
2. Затем добавьте второй символ RR. Опять же, преобразовать букву в соответствующее значение, если возникнет необходимость. В нашем примере вторым символом является F, что равно 15.
3. После этого добавьте итоги, чтобы получить одно значение. Если вы добавите 240 и 15 из нашего примера, вы увидите, что значение FF равно 255.

Повторите ту же формулу для оставшихся двух сегментов, GG обозначается как 57, а BB обозначается как 33. Если ручные вычисления кажутся слишком громоздкими, вы всегда можете использовать инструмент преобразования шестнадцатеричного формата в RGB (например, Двоичный шестнадцатеричный конвертер), чтобы прочитать цвет. Вы должны обнаружить, что шестнадцатеричное значение #FF5733 эквивалентно RGB (255, 87, 51).

Почему шестнадцатеричный код цвета так популярен?

Хотя существует несколько различных цветовых моделей (RGB, CMYK, HSL), шестнадцатеричные цветовые коды, возможно, являются наиболее широко используемым представлением. Это потому, что они просты и понятны.

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

Шестнадцатеричные цвета очень эффективны, используя только эти семь символов для представления более 16 миллионов цветов. И различение этих цветов — простой процесс.

Шестнадцатеричный против. RGB: есть ли разница?

Система цветового кодирования RGB использует три десятичных числа для обозначения относительной интенсивности красного, зеленого и синего цветов. Он использует цифры 0-9.

Hex также использует три числа для представления красного, зеленого и синего, но использует дополнительные цифры (A-F) для соответствия основанию 16. Нет никакой разницы в результирующих цветах, это просто разные форматы для передачи одной и той же информации.

Связанный: Основы CSS: работа с цветами

Для чего используется шестнадцатеричный код?

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

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

Шестнадцатеричный код цвета — это не ракетостроение

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

Шестнадцатеричные цветовые коды — не самая захватывающая вещь в мире, но очень важно понимать их, если вы работаете в веб-дизайне. Возможность работать с шестнадцатеричными цветовыми кодами значительно облегчит работу над дизайном.

Как найти шестнадцатеричное значение любого цвета на экране

Узнайте, как выбрать любое значение цвета на экране за считанные секунды. Особенно полезно для веб-дизайнеров!

Читать далее

Об авторе