Шестнадцатеричные цветовые коды в CSS
17 января, 2022 11:41 дп 300 views | Комментариев нет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), вы получите сплошной черный:
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. Чтобы узнать, подходит ли этот формат целевой аудитории вашего проекта, вы можете воспользоваться этой ссылкой.
Tags: Chrome Dev Tools, CSSЦветовая модель HSL в CSS 3.
Дизайнер: — Цвет фона на плакате каким будет?
Клиент: — А какие цвета у вас есть?
Дизайнер: — Три: красный, зелёный и синий остальные — оттенки
Клиент: — Странно, в прошлый раз мне оранжевым напечатали.
.
Глава 4
Ранее в ходе обучения HTML и CSS 2.1 мы с Вами уяснили что цвет того или иного элемента сайта может быть определён следующими способами:
- Именным значением, например: red — красный.
- Значением цвета RGB, например: RGB(255,0,0) — опять таки красный.
- Шестнадцатеричным значением цвета
Об этих методах определения цвета я писал в главе «Цвет и фон» учебника CSS поэтому повторятся не стану а расскажу о ещё одном способе определения цвета, который предлагает спецификация CSS 3.
В CSS 3 вошёл ещё один способ определения цвета с помощью HSL (от англ. Hue, Saturation, Lightness). — это модель, в которой цвет определяется тремя параметрами: Оттенком (тоном), насыщенностью и светлотой. Давайте рассмотрим каждый параметр отдельно:
Оттенок.
Для того чтобы определить тон (Hue) нужно указать градус поворота (от 0° до 360°) цветового спектра замкнутого в цветовой круг — во сказанул!! )) В общем, смотрите на рисунок там наглядно показано откуда берётся этот угол.. Имеется, значит, радуга замкнутая в круг в котором красный всегда ориентирован на север и равен 0 градусам (ну и 360° тоже), 120 градусов это зелёный, 240° синий — это основные три цвета которые, смешиваясь, образуют ещё три дополнительных 60° жёлтый 180° голубой и 300° фиолетовый.. Ну а между этими шестью основными и дополнительными цветами расположены все остальные оттенки цветового спектра.
Насыщенность.
Второе значение (Saturation) цветовой модели HSL определяет насыщенность выбранного нами оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и «сочно» и наоборот если насыщенность стремится к 0% то цвет «линяет» и становится серым.
Светлота.
Светлота или яркость (Lightness) это третий параметр HSL. Точно так же как и насыщенность указывается в процентах.. чем выше процент, тем ярче становится цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, причём неважно, какой оттенок из цветового круга был выбран изначально. Оптимальное значение яркости цвета равняется 50%.
Такая вот теория.. теперь к практике..
Как обычно покажу на примере:
<!DOCTYPE html><html>
<head>
<meta charset=»utf-8″>
<title>Цвет HSL</title>
<style type=»text/css»>
body{
background-color:hsl(120,10%,50%);
color:hsl(60,100%,50%)
}
.blok1 {background-color:hsl(0,0%,0%)}
.blok2 {background-color:hsl(0,0%,100%)}
.
blok3 {background-color:hsl(187,61%,54%)}.blok4 {background-color:hsl(300,100%,70%)}
.blok5 {background-color:hsl(0,100%,50%)}
.blok6 {background-color:hsl(240,100%,50%)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
<div>Блок 4</div>
<div>Блок 5</div>
<div>Блок 6</div>
</body>
</html>
смотреть пример
Альфа каналы.
RGBA
На ряду со свойством opacity определяющего степень прозрачности элемента в CSS 3 появился так называемый альфа канал, который позволяет сделать цвет прозрачным непосредственно при его указании.
Так у уже знакомого нам способа определения цвета RGB (Red, Green, Blue ) появляется четвёртое значение RGBA (Red, Green, Blue, Alpha) это и есть пресловутый альфа канал который определяет степень прозрачности.
Степень прозрачности, точно так же как и для свойства opacity определяется значением от 0 до 1 где 0 полностью прозрачный а 1 непрозрачный вовсе.
Пример:
<!DOCTYPE html><html>
<head>
<meta charset=»utf-8″>
<title>Цвет RGBA</title>
<style type=»text/css»>
body{
background-image: url(graphics/fon.gif)
}
.blok1{background-color:rgba(255,0,0,0.1)}
.blok2{background-color:rgba(255,0,0,0.5)}
.blok3{background-color:rgba(255,0,0,1)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
</body>
</html>
смотреть пример
HSLA
Цветовая модель HSLA это тоже самое, что и HSL только с добавлением альфа канала.
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет HSLA</title>
<style type=»text/css»>
body{
background-image: url(graphics/fon.gif)
}
.blok1{background-color:hsla(120,100%,50%,0.1)}
.blok2{background-color:hsla(120,100%,50%,0.5)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
</body>
</html>
смотреть пример
Считается, что преимуществом цветовой схемы HSL перед RGB являются более природные естественные цвета так как формат RGB был создан специально для электроннолучевых трубок.
. ну не знаю.. во первых лично у меня не столь придирчивый глаз, а во вторых какая разница ведь всё равно в итоге цвет на странице будет показан с помощью электроннолучевой трубки — ну или её аналога!? то есть в определённом сочетании красного, зелёного и синего цвета т.е. по сути цвет HSL будет в итоге переконвертирован в RGB.А вот что мне нравится в HSL так это то, что цвет заданный таким способом интуитивно понятен, то есть, взглянув на цифры, допустим hsl(60,100%,50%) можно сразу же представить каким приблизительно в итоге будет цвет достаточно просто держать в голове цветовой круг (радугу) и знать теорию, о которой мы говорили выше. А вот с RGB цветом ничего, как правило, непонятно до тех пор, пока в фотошопе или ещё где-нибудь не посмотришь на цифры сочетания красного, зелёного и синего.
Форматы HSL, HSLA и RGBA воспринимают версии браузеров начиная с: IE 9.
0, Opera 10.0 Firefox 3.0 … А как быть со старыми версиями браузеров решать уже Вам. Однако хочу отметить, что одному и тому же элементу цвет можно задать несколькими способами.Ну например:
.blok {
background-color:rgb(255,0,0)
background-color:rgba(255,0,0,0.5)
}При таком раскладе цвет в старых браузерах хоть и не будет полупрозрачным , но зато будет правильным.. конкретно в этом случае красным.
. ну не знаю.. во первых лично у меня не столь придирчивый глаз, а во вторых какая разница ведь всё равно в итоге цвет на странице будет показан с помощью электроннолучевой трубки — ну или её аналога!? то есть в определённом сочетании красного, зелёного и синего цвета т.е. по сути цвет HSL будет в итоге переконвертирован в RGB.
0, Opera 10.0 Firefox 3.0 … А как быть со старыми версиями браузеров решать уже Вам. Однако хочу отметить, что одному и тому же элементу цвет можно задать несколькими способами.Коды белого цвета
Существует множество оттенков белого, каждый из которых имеет свои уникальные цветовые характеристики. Несколько примеров именованного цвета коды, которые можно считать оттенком белого: белый, цветочный белый, белый с антибликовым покрытием, медовая роса и слоновая кость!
Белый
#ffffff | RGB(255 255 255)Снег
#fffafa | RGB(255 250 250)
Лазурь
#f0ffff | RGB(240 255 255)Слоновая кость
#fffff0 | RGB(255 255 240)
Старое кружево
#fdf5e6 | RGB(253 245 230)Лен
#faf0e6 | RGB(250 240 230)Бежевый
#f5f5dc | RGB(245,245,220)
Призрачный белый
#f8f8ff | RGB(248 248 255)Детская присыпка
#fefefa | RGB(254 254 250)Снег
#fffafa | RGB(255 250 250)Мятный крем
#f5fffa | RGB(245 255 250)Магнолия
#f8f4ff | RGB(248 244 255)Молоко
#fdfff5 | RGB(253 255 245)Элис Блю
#f0f8ff | RGB(240 248 255)Медовая роса
#f0fff0 | RGB(240 255 240)Лазурный туман
#f0ffff | RGB(240 255 255)Лавандовые румяна
#fff0f5 | RGB(255 240 245)Морская ракушка
#fff5ee | RGB(255 245 238)Цветочный белый
#fffaf0 | RGB(255 250 240)Цвет слоновой кости
#fffff0 | RGB(255 255 240)Белый дым
#f5f5f5 | RGB(245 245 245)Белый с защитой от вспышки
#f2f3f4 | RGB(242 243 244)Белый помело
#f9ffe3 | RGB(249 255 227)Бежевый
#f5f5dc | RGB(245,245,220)
+50 Белые цвета с шестнадцатеричными кодами
ДОМАШНИЕ ОТТЕНКИ ЦВЕТОВ
Титановый белый
#EEEEFF
Белый котенок
#F8F8FF
Цвет туманной розы
↗️
#ffe4e1
Цвет призрак
↗️
#f8f8ff
Link Water
#ecf3f9
Cup Cake
#ebf6f7
Soft Персиковый
#f6f1f4
Айленд Спайс
#fffcec
Злость публики
#eaf4fc
Слоновая кость
#fdfff5 9 0003
Старое дерево
#f0eee4
Весна
#f3f0e8
Счастливый загар
#ebf5f0
Мята перечная
#f1f9ec
Нерешенная проблема
#f3f2ed 9 0003
Меринос
#f2ebdd
Белая роза
#FFFAFA
Сугроб
#f8fbf8
Дикий песок
#F5F5F5
Если вы ищете оттенки белого цвета, то вам сюда.
Вы можете найти ниже список белых цветов с шестнадцатеричными кодами. Быстрое напоминание: эмодзи пианино для копирования шестнадцатеричного кода.
Белый — цвет чистоты. Оттенков чистоты может быть несколько, и белый тоже имеет несколько оттенков. Именно поэтому мы подготовили эту коллекцию оттенков белого.
Белый — один из обязательных цветов цифрового дизайна.
Каждый продукт, отображаемый на экранах, имеет пробелы. Причина этого в том, чтобы создать пространство для пользователя.
Трудно создать впечатление пользователя с помощью одного белого тона.
В одних дизайнах используются светлые тона, в других — темно-белые тона. Помимо этого, иногда используются белые градиенты.
Мы создали этот список для разнообразия.
Практически нет дизайна, в котором не использовался бы белый цвет. Особенно в цифровых продуктах белый цвет используется больше, чем когда-либо. Это потому, что белый обеспечивает отличный пользовательский опыт.
Может показаться неубедительным, что у белых действительно 50 тонн.
Правда в том, что тонов может быть больше, но мы перечислили 50 на этой странице.
Хотя он считается простым цветом, оттенков белого слишком много. Несмотря на свои небольшие различия, он создает огромные различия в воздухе той области, где он используется.
Как возникают оттенки белого?
Самое простое объяснение — смешивание других цветов следующим образом.
При смешивании с очень темными красками полученный цвет не будет оттенком белого. Поэтому его смешивают со светлыми цветами.
Призрачный белый, Детская присыпка, Белый дым — самые известные белые тона. За ними следуют Snow, Ivory и Floral White.
Обычно белые тона получают путем смешивания со светлыми тонами основных цветов.
Оттенки белого также предпочтительны, потому что они являются наиболее отражающими цветами.
Каждый мягкий цвет, добавленный к белому, влияет на характер отраженного света. Если у вас есть цветовая палитра розовых цветов, вы можете добавить к белому нежно-розовый.