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. Чтобы узнать, подходит ли этот формат целевой аудитории вашего проекта, вы можете воспользоваться этой ссылкой.