Шестнадцатеричный формат цвета в CSS

Дата публикации: 2016-07-28

От автора: в CSS насчитывается 149 ключевых слов стандартных цветов. При помощи же шестнадцатеричной системы счисления (или hex) можно получить доступ ко всей RGB гамме цветов. Понимание принципов работы шестнадцатеричной системы счисления лежит в основе изучения hex системы цветов.

В отличие от десятеричной системы с ее значениями от 0 до 9 в шестнадцатеричной системе счисления 16 разрядов: от 0 до 9 и до буквы f. В самом общем случае компоненты hex цвета (красный, зеленый и синий) представляются парой разрядов.

Минимальным значением цвета в паре считается 00. На один выше будет 01, 02 и т.д. После 09 пара записывается в форме 0a, 0b и так до 0f. Достигнув последнего возможного значения во втором разряде, первый разряд переключается на одно значение, как в обычных счетчиках, а второй разряд сбрасывается. В итоге мы получаем 10, после чего крайний разряд начинает заново подниматься вверх.

Чем больше значение компонента, тем больший вес он будет иметь в конечном цвета, где 00 – полное отсутствие данного компонента, а ff – максимальное присутствие в конечном варианте. Шестнадцатеричный цвет записывается со знаком #. То есть #000000 – черный цвет (отсутствие красного, зеленого и синего), #ffffff – белый, а #ffff00 – зеленый.

Обратите внимание на то, что hex цвета в CSS представляют собой аддитивную систему цвета, где отсутствие оттенка распознается как черный цвет (то есть цвет экрана по умолчанию).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как запомнить hex цвета

Простой способ запомнить шестнадцатеричные цвета – думать о каждом цветовом компоненте (красный, зеленый и синий), как об отдельном фонарике с фильтром. В hex 00 означает «выключен», а ff означает «фонарик включен на полную».

Если в темной комнате включить только красный фонарик (#ff0000), вся комната озарится красным цветом. Если включить красный и зеленый фонарики и скрестить лучи (#ffff00), комната станет желтой.

Кроме того, можно представить не просто фонарики, а переключатели света с регулировкой освещения (от 00 до ff). #777777 будет средне-серым, а #440000 будет темно-красным.

Сокращения

Безопасные цвета – цвета, в которых разряды компонентов имеют одинаковое значение (00, 77, ee и т.д.). Такие цвета используются в случае, если монитор имеет крайне ограниченный диапазон цветов. Это необязательные цвета.
Если вы решили воспользоваться безопасными цветами, то вы получаете одно преимущество – шестнадцатеричную запись безопасных шрифтов можно сократить. К примеру, черный можно записать в виде #000, красный — #f00 и т.д. К примеру:

p {
    color: #000;
}

p {

color: #000;

}

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В шестнадцатеричных цветах необязательно значения пар должны совпадать: #3fa027 – хороший цвет, но его нельзя сократить.

Важно понимать, что hex система открывает вам доступ ко всей цветовой гамме, так же как и две другие основные системы цветов в CSS (RGB и HSL). Цветов в данной системе ровно столько же.