Шестнадцатеричные цветовые коды в CSS

Development | Amber | Комментировать запись

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

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

Требования

• Базовое знакомство с CSS. Вы можете ознакомиться с серией руководств Как создать веб-сайт с помощью CSS, если хотите освежить свои знания.
• Современный веб-браузер, поддерживающий шестнадцатеричные обозначения #rrggbbaa.

Настройка цвета с помощью ключевых слов

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

В CSS существует около 140 именованных цветов (например, red, blue, lavender).

Допустим, если мы хотим, чтобы текст был красный, мы будем использовать ключевое слово red:

div {
 color: red;
}

Это довольно простой, но не очень гибкий метод – что, если вы не знаете точного названия нужного вам цвета?. Шестнадцатеричные цветовые коды позволят вам настроить любой цвет, не ограничиваясь 140 наименованиями.

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

Вероятно, как и большинство людей, вы привыкли считать в рамках десятка:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Другими словами, однозначное число имеет только 10 возможных значений (от 0 до 9), а после этого оно должно увеличиться до двух цифр (10).

Шестнадцатеричные значения основаны на следующем порядке счета:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Кроме десяти цифр, для обозначения дополнительных значений здесь используются буквы A, B, C, D, E и F.

Например, так выглядят валидные шестнадцатеричные значения:

00, 01, 99, 9D, 1D, CC, E4, F5

Давайте посмотрим, как использовать шестнадцатеричные значения в стилях CSS.

Использование шестнадцатеричных значений в CSS

При стилизации элемента с помощью CSS вы часто будете изменять значения цвета для таких свойств, как color, background-color, border-color и т.п.

Чтобы создать собственные цвета, вы можете использовать комбинации шестнадцатеричных чисел, описанных выше, и собирать их в шестнадцатеричные коды, которые представляют определенные цвета.

Шестнадцатеричный код CSS должен начинаться со знака номера (#, который также известен как диез или решетка). Затем идут шесть цифр шестнадцатеричного значения. Шаблон выглядит так:

 #RRGGBB

То есть каждая пара чисел представляет красный (R), зеленый (G) и синий (B) соответственно.

Итак, получается, что цвета представлены через комбинацию красного, зеленого и синего цветов. Наименьшее значение (00) будет самой темной версией цвета (ближайшей к черному), а максимальное значение (FF) будет самой светлой версией цвета (самой близкой к белому).

Установив все три пары на самое низкое значение (00), вы получите сплошной черный:

div {
  color: #000000;
}

Максимальное значение для всех трех пар (FF) в результате выдаст сплошной белый цвет:

div {
  color: #FFFFFF;
}

Допустим, нам нужен ярко-красный заголовок. Для этого можно установить максимально возможное значение красного (код должен начинаться с FF). Поскольку тут нам не нужны ни зеленый, ни синий, мы можем установить для каждого из них минимально возможное значение (00).

div {
  color: #FF0000;
}

Этот код будет отображаться как:

Red Text

Изменяя соотношение красного, синего и зеленого, вы можете получить самые разные цвета. #DC143C содержит большое количество красного (DC) – в результате получится малиновый. Цвет #EE82EE содержит большое количество красного (EE) и синего (EE) – так получается фиолетовый. В #40E0D0 много зеленого (E0) и синего (D0) – будет бирюзовый.

Примечание: Шестнадцатеричные коды CSS не чувствительны к регистру. Буквенные символы могут быть записаны в верхнем или в нижнем регистре, то есть #ff0000 эквивалентно #FF0000. CSS также поддерживает сокращенные значения: #F00 эквивалентно #FF0000. Помните, что выбранный вами подход должен соответствовать стандартам кодирования, используемым в вашем проекте.

Добавление альфа-значения в шестнадцатеричные коды CSS

Альфа-значения предназначены для определения прозрачности цвета. Шестнадцатеричный цветовой код альфа-значениями выглядит так:

#RRGGBBAA

Первые три пары нам уже знакомы, а последняя пара, АА, представляет альфа-значения.

Значение AA в #RRGGBBAA может варьироваться от наименьшего (00) до максимально возможного значения (FF). Чем меньше альфа-значение, тем прозрачнее цвет. Увеличение альфа-значения приведет к увеличению видимости цвета.

Допустим, нам нужен достаточно прозрачный синий цвет. Сначала мы определим шестнадцатеричный код синего цвета:

div {
  background-color: #0080FF;
}

В итоге получится:

Background Color #0080FF

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

div {
  background-color: #0080FF80;
}

Этот код будет отображаться так:

Background Color #0080FF80

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

Выбор цветов с помощью Chrome DevTools

Быстрый способ просмотреть выбранные вами цвета цветов в разных форматах – использовать для этого Chrome DevTools.

Откройте панель DevTools и поищите нужный вам цвет в разделе styles. Найдя его, вы можете кликнуть в поле слева от цвета, чтобы напрямую настроить соотношение красного, зеленого и синего. Также можно удерживать SHIFT и кликнуть на это поле, чтобы прокрутить различные параметры цвета с правильно преобразованным соотношением.

Узнать о палитре цветов Chrome DevTools больше можно здесь.

Заключение

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

Для поддержки шестнадцатеричных кодов #RRGGBBAA требуются современные браузеры. Онb недоступysв старых версиях Internet Explorer. Чтобы узнать, подходит ли этот формат целевой аудитории вашего проекта, вы можете воспользоваться этой ссылкой.