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

Шестнадцатеричный код основывается на шестнадцатеричной системе исчисления, в которой кроме цифр от 0 до 9 (привычным нам по десятеричной системе исчисления) также используются латинские буквы от A до F.

Перед шестнадцатеричным кодом ставится символ решетки (#), и он может состоять либо из трех, либо из шести цифр. Обычно запись из трех цифр является сокращенным вариантом записи из шести цифр (#f00 = #ff0000, #c96 = #cc9966 и т.д.). Запись из трех цифр легче расшифровать, однако шестицифровая запись предоставляет больший контроль над цветовым значением.

В CSS цвет можно задавать при помощи шестнадцатеричных значений в форме:

#rrggbb

Где rr (красный), gg (зеленый) и bb (синий) представляют шестнадцатеричное значение уровня интенсивности составного цвета в диапазоне от 00 до ff (что в десятичной системе будет соответствовать диапазону 0-255).

Например, #ff0000 отображается как красный цвет, потому что уровень красного здесь установлен в максимальное значение (ff), а уровень остальных составных цветов установлен в минимальное значение (00).

Чтобы получить черный цвет, установите все цветовые параметры в 00 - #000000.

Чтобы получить белый цвет, установите все цветовые параметры в ff - #ffffff.

Ниже вы можете поэкспериментировать, изменяя различные шестнадцатеричные (HEX) значения:

Примеры:

Различные оттенки серого обычно задают определяя одинаковые значения для всех трех составных цветов:

Шестнадцатеричные цветовые значения из трех цифр

Иногда в CSS можно увидеть трехцифровой шестнадцатеричный код.

Запись из трех цифр является сокращенным вариантом некоторых значений, записанных шестью цифрами.

Трехцифровая запись цвета имеет следующую форму:

#rgb

Где r, g и b представляют шестнадцатеричное значение уровня интенсивности красного, зеленого и синего цветов в диапазоне от 0 до f.

Запись из трех цифр может использоваться только в том случае, если для каждого составного цвета оба значения (RR, GG и BB) одинаковы. Так, если есть значение #ff00cc, то его можно записать как #f0c.

Пример:

body {
  background-color: #fc9; /* то же, что #ffcc99 */
}

h1 {
  color: #f0f; /* то же, что #ff00ff */
}

p {
  color: #b58; /* то же, что #bb5588 */
}