Таблица цветов html

Параметры фонового изображения

Свойство background-image, которое мы только что рассмотрели, может быть дополнено несколькими другими, которые позволяют изменять поведение фонового изображения.

background-attachment: прикрепление фона

Свойство CSS background-attachment используется для «закрепления» фона. Полученный эффект позволяет сделать так, чтобы фон «прокручивался» вместе с текстом. Доступны два значения:

• fixed: фоновое изображение остается закрепленным;
• scroll: фоновое изображение прокручивается вместе с текстом (значение по умолчанию).

body
{
background-image: url("snow.png");
background-attachment: fixed; /* Фон остается закрепленным */
}

background-repeat: повторение фона

По умолчанию фоновое изображение повторяется в виде мозаики (таким образом, фон html-страницы распространяется на весь экран). Вы можете изменить это с помощью свойства background-repeat:

• no-repeat: фон не будет повторяться. Изображение будет размещено на странице в одном экземпляре.
• repeat-x: изображение будет повторяться только в первой строке, горизонтально.
• repeat-y: изображение будет повторяться только в первом столбце по вертикали.
• repeat: фон будет повторяться в виде мозаики (значение по умолчанию).

Пример использования:

body
{
background-image: url("sun.png");
background-repeat: no-repeat;
}

background-position: положение фона

Также можно указать позицию фонового изображения с помощью background-position. Это свойство полезно только в комбинации с background-repeat: no-repeat; (фон, который не повторяется).

Нужно ввести два значения в пикселях, чтобы указать положение фона относительно верхнего левого угла страницы (или абзаца, если вы применяете фон к абзацу). Поэтому, если вы введете:

background-position: 30px 50px;

… фон будет сдвинут на 30 пикселей левее и 50 пикселей выше. Также можно использовать следующие значения:

• top: вверху;
• bottom: внизу;
• left: слева;
• center: по центру;
• right: справа.

Их можно комбинировать. Например, чтобы разместить фоновое изображение в правом верхнем углу, нужно ввести:

background-position: top right;

Если я хочу отображать солнце в качестве фонового изображения (следующий рисунок), только один раз (no-repeat), всегда видимым (fixed) и расположенным в правом верхнем углу (top right), то следует написать следующий код фона html-страницы:

body
{
background-image: url("sun.png");
background-attachment: fixed; /* Фон остается  зафиксированным */
background-repeat: no-repeat; /* Фон не будет повторяться */
background-position: top right; /* Фон будет отображаться в правом верхнем углу */
}

Солнце в качестве фонового изображения в правом верхнем углу

Сочетание свойств

Если вы применяете к фону много свойств, то можно использовать своего рода «супер-свойство», называемое background. Его значение может сочетать в себе несколько ранее рассмотренных свойств: background-image, background -repeat, background-attachment и background-position.

Таким образом, можно написать:

body
{
background: url("sun.png") fixed no-repeat top right;
}

Это первое «супер-свойство», которое я вам показываю, но будут и другие. Вы должны знать следующее:

1. Порядок значений не важен. Можно комбинировать значения в любом порядке.
2. Не нужно вводить все значения. Поэтому, если не хотите вводить fixed, можно удалить его.

Что может иметь цвет

На уровне элементов HTML, всему можно присвоить цвет. С точки зрения отдельных составляющих элементов, таких как текст, границы и т.д., существует ряд свойств CSS, с помощью которых можно присвоить цвет. 

На фундаментальном уровне, свойство (en-US) определяет цвет текста HTML-элемента, а свойство  — цвет фона элемента. Они работают практически для всех элементов.

Эти свойства используются для определения цвета текста, его фона и любого оформления текста.

(en-US)

Свойство color применяется к тексту и любому , например: подчёркивание, линии на текстом, перечёркивание и т.д.

Цвет фона текста.

Добавляет и устанавливает параметры тени для текста. Один из параметров тени — это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. в Fundamental text and font styling, чтобы узнать больше.

(en-US)

По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства . Но вы можете присвоить другой цвет с помощью свойства .

(en-US)

Цвет, который используется для выделения диакритических знаков, прилегающих к каждому текстовому символу. Это свойство используется преимущественно для восточноазиатских языков.

(en-US)

Цвет, который используется для каретки (caret (en-US)) (курсора ввода текста). Применимо только к редактируемым элементам, таким как и <textarea> (en-US) или элементам , для которых установлен атрибут .

Каждый элемент представляет собой прямоугольный блок с каким-то содержимым, фоном и границей.

См. раздел с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.

Цвет фона блока.

Цвет линий, которые разделяют колонки текста.

(en-US)

Цвет контура, вокруг границы элемента. Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.

Вокруг любого элемента можно создать границу, т.е. линию вокруг содержимого элемента. См. в The box model, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS, чтобы узнать больше про то, как применять стили к границам.

Существует краткая запись , которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style): сплошная (solid),  штриховая (dashed) и так далее.

(en-US)

Задаёт единый цвет для всех сторон границы элемента.

(en-US), (en-US), (en-US), and (en-US)

Позволяет установить цвет соответствующей стороне границы элемента: border-left-color — левая граница, border-right-color — правая, border-top-color — верхняя, border-bottom-color — нижняя.

(en-US) and (en-US)

С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока — верхний край, а конец — нижний. Не путайте с началом и концом строки, где начало — это левый край, а конец — правый.

(en-US) and (en-US)

Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств ,  и (en-US), которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то  применяется к правой стороне границы.

CSS не единственная web-технология, которая поддерживает цвет.

HTML Canvas API

Позволяет создавать растровую 2D-графику в элементе . См. Canvas tutorial, чтобы узнать больше.

SVG (Scalable Vector Graphics — Масштабируемая Векторная Графика)

Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе , как и любое другое изображение.

WebGL

Библиотека Веб-Графики (The Web Graphics Library) — это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..

Оттенки красного

Если вы посмотрите на таблицу цвета ниже, вы увидите результат той или иной красный свет от 0 до 255, при этом сохраняя зеленый и синий свет в нуле.

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

Красный свет	HEX	RGB
	# 000000	RGB (0,0,0)
	# 080000	RGB (8,0,0)
	# 100000	RGB (16,0,0)
	# 180000	RGB (24,0,0)
	# 200000	RGB (32,0,0)
	# 280000	RGB (40,0,0)
	# 300000	RGB (48,0,0)
	# 380000	RGB (56,0,0)
	# 400000	RGB (64,0,0)
	# 480000	RGB (72,0,0)
	# +500000	RGB (80,0,0)
	# 580000	RGB (88,0,0)
	# 600000	RGB (96,0,0)
	# 680000	RGB (104,0,0)
	# 700000	RGB (112,0,0)
	# 780000	RGB (120,0,0)
	# 800000	RGB (128,0,0)
	# 880000	RGB (136,0,0)
	# 900000	RGB (144,0,0)
	# 980000	RGB (152,0,0)
	# A00000	RGB (160,0,0)
	# A80000	RGB (168,0,0)
	# B00000	RGB (176,0,0)
	# B80000	RGB (184,0,0)
	# C00000	RGB (192,0,0)
	# C80000	RGB (200,0,0)
	# D00000	RGB (208,0,0)
	# D80000	RGB (216,0,0)
	# E00000	RGB (224,0,0)
	# E80000	RGB (232,0,0)
	# F00000	RGB (240,0,0)
	# F80000	RGB (248,0,0)
	# FF0000	RGB (255,0,0)

Форматы задания цветов в CSS

Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:

1. 1. При помощи кодового значения цвета хтмл.

Например:

color: black;

где black – это черный цвет html.

Примеры конкретных значений цветов HTML и CSS смотрите ниже.

1. 2. Задание цвета в шестнадцатеричном коде:

Например:

color: #000000;

Где #000000; — это код черного цвета.

Если значение цвета в шестнадцатеричном коде имеет 6 одинаковых цифр или букв, то его можно сократить до трёх.

Например:

#ffffff – это код белого цвета

Его можно записать так: #fff

1. 1. Задание цвета в формате rgb

Данный формат представляет собой набор трёх числовых значений от 0 до 255.

Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные  оттенки

R – (red) – числовое значение красного цвета
G – (green) – числовое зелёного
B – (blue) — числовое значение синего

В CSS это выглядит так:

сolor: rgb (0, 155, 0);

Где 0, 155, 0 – это код зелёного цвета.

Таблица, в которой представлены основные цвета ргб,  приведена ниже

1. 4. Задание цвета при помощи формата rgba

Здесь принцип использования абсолютно такой же как и в предыдущем случае, но добавляется ещё один параметр – прозрачность. То есть вы можете регулировать не только оттенок, но и его прозрачность

Например:

color: rgba (89, 107, 108, 0.5);

Где 89, 107, 108 – это ргб  код серого цвета, а 0,5 – это уровень прозрачности.

Прозрачность задаётся в виде десятичного значения от 0  до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный

В одной из прошлых статей я писала про определение цвета на сайте. Там я давала несколько полезных инструментов по определению цветов.
Если вы её ещё не читали вот ссылка

Как использовать главный цвет на вашем сайте

Теперь, когда вы определились с главным цветом своего сайта, вам нужно понять, как правильно его использовать. Цвет привлекает много внимания, так что не нужно пытаться использовать его везде, где только можно.

Используйте преобладающий цвет только в тех местах, на которые хотите обратить внимание пользователей, либо побудить их на определенное действие. Например, позвонить по телефонному номеру, заполнить форму, подписаться на обновления и т.п

Например, позвонить по телефонному номеру, заполнить форму, подписаться на обновления и т.п.

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

Имена цветов, поддерживаемые всеми обозревателями

Все современные браузеры поддерживают следующие 140 цветовых имен (нажмите на название цвета, или шестнадцатеричное значение, чтобы увидеть цвет как фон-цвет вместе с различными цветами текста):

Color Name	HEX	Color	Shades	Mix
AliceBlue	#F0F8FF		Shades	Mix
AntiqueWhite	#FAEBD7		Shades	Mix
Aqua	#00FFFF		Shades	Mix
Aquamarine	#7FFFD4		Shades	Mix
Azure	#F0FFFF		Shades	Mix
Beige	#F5F5DC		Shades	Mix
Bisque	#FFE4C4		Shades	Mix
Black	#000000		Shades	Mix
BlanchedAlmond	#FFEBCD		Shades	Mix
Blue	#0000FF		Shades	Mix
BlueViolet	#8A2BE2		Shades	Mix
Brown	#A52A2A		Shades	Mix
BurlyWood	#DEB887		Shades	Mix
CadetBlue	#5F9EA0		Shades	Mix
Chartreuse	#7FFF00		Shades	Mix
Chocolate	#D2691E		Shades	Mix
Coral	#FF7F50		Shades	Mix
CornflowerBlue	#6495ED		Shades	Mix
Cornsilk	#FFF8DC		Shades	Mix
Crimson	#DC143C		Shades	Mix
Cyan	#00FFFF		Shades	Mix
DarkBlue	#00008B		Shades	Mix
DarkCyan	#008B8B		Shades	Mix
DarkGoldenRod	#B8860B		Shades	Mix
DarkGray	#A9A9A9		Shades	Mix
DarkGrey	#A9A9A9		Shades	Mix
DarkGreen	#006400		Shades	Mix
DarkKhaki	#BDB76B		Shades	Mix
DarkMagenta	#8B008B		Shades	Mix
DarkOliveGreen	#556B2F		Shades	Mix
DarkOrange	#FF8C00		Shades	Mix
DarkOrchid	#9932CC		Shades	Mix
DarkRed	#8B0000		Shades	Mix
DarkSalmon	#E9967A		Shades	Mix
DarkSeaGreen	#8FBC8F		Shades	Mix
DarkSlateBlue	#483D8B		Shades	Mix
DarkSlateGray	#2F4F4F		Shades	Mix
DarkSlateGrey	#2F4F4F		Shades	Mix
DarkTurquoise	#00CED1		Shades	Mix
DarkViolet	#9400D3		Shades	Mix
DeepPink	#FF1493		Shades	Mix
DeepSkyBlue	#00BFFF		Shades	Mix
DimGray	#696969		Shades	Mix
DimGrey	#696969		Shades	Mix
DodgerBlue	#1E90FF		Shades	Mix
FireBrick	#B22222		Shades	Mix
FloralWhite	#FFFAF0		Shades	Mix
ForestGreen	#228B22		Shades	Mix
Fuchsia	#FF00FF		Shades	Mix
Gainsboro	#DCDCDC		Shades	Mix
GhostWhite	#F8F8FF		Shades	Mix
Gold	#FFD700		Shades	Mix
GoldenRod	#DAA520		Shades	Mix
Gray	#808080		Shades	Mix
Grey	#808080		Shades	Mix
Green	#008000		Shades	Mix
GreenYellow	#ADFF2F		Shades	Mix
HoneyDew	#F0FFF0		Shades	Mix
HotPink	#FF69B4		Shades	Mix
IndianRed	#CD5C5C		Shades	Mix
Indigo	#4B0082		Shades	Mix
Ivory	#FFFFF0		Shades	Mix
Khaki	#F0E68C		Shades	Mix
Lavender	#E6E6FA		Shades	Mix
LavenderBlush	#FFF0F5		Shades	Mix
LawnGreen	#7CFC00		Shades	Mix
LemonChiffon	#FFFACD		Shades	Mix
LightBlue	#ADD8E6		Shades	Mix
LightCoral	#F08080		Shades	Mix
LightCyan	#E0FFFF		Shades	Mix
LightGoldenRodYellow	#FAFAD2		Shades	Mix
LightGray	#D3D3D3		Shades	Mix
LightGrey	#D3D3D3		Shades	Mix
LightGreen	#90EE90		Shades	Mix
LightPink	#FFB6C1		Shades	Mix
LightSalmon	#FFA07A		Shades	Mix
LightSeaGreen	#20B2AA		Shades	Mix
LightSkyBlue	#87CEFA		Shades	Mix
LightSlateGray	#778899		Shades	Mix
LightSlateGrey	#778899		Shades	Mix
LightSteelBlue	#B0C4DE		Shades	Mix
LightYellow	#FFFFE0		Shades	Mix
Lime	#00FF00		Shades	Mix
LimeGreen	#32CD32		Shades	Mix
Linen	#FAF0E6		Shades	Mix
Magenta	#FF00FF		Shades	Mix
Maroon	#800000		Shades	Mix
MediumAquaMarine	#66CDAA		Shades	Mix
MediumBlue	#0000CD		Shades	Mix
MediumOrchid	#BA55D3		Shades	Mix
MediumPurple	#9370DB		Shades	Mix
MediumSeaGreen	#3CB371		Shades	Mix
MediumSlateBlue	#7B68EE		Shades	Mix
MediumSpringGreen	#00FA9A		Shades	Mix
MediumTurquoise	#48D1CC		Shades	Mix
MediumVioletRed	#C71585		Shades	Mix
MidnightBlue	#191970		Shades	Mix
MintCream	#F5FFFA		Shades	Mix
MistyRose	#FFE4E1		Shades	Mix
Moccasin	#FFE4B5		Shades	Mix
NavajoWhite	#FFDEAD		Shades	Mix
Navy	#000080		Shades	Mix
OldLace	#FDF5E6		Shades	Mix
Olive	#808000		Shades	Mix
OliveDrab	#6B8E23		Shades	Mix
Orange	#FFA500		Shades	Mix
OrangeRed	#FF4500		Shades	Mix
Orchid	#DA70D6		Shades	Mix
PaleGoldenRod	#EEE8AA		Shades	Mix
PaleGreen	#98FB98		Shades	Mix
PaleTurquoise	#AFEEEE		Shades	Mix
PaleVioletRed	#DB7093		Shades	Mix
PapayaWhip	#FFEFD5		Shades	Mix
PeachPuff	#FFDAB9		Shades	Mix
Peru	#CD853F		Shades	Mix
Pink	#FFC0CB		Shades	Mix
Plum	#DDA0DD		Shades	Mix
PowderBlue	#B0E0E6		Shades	Mix
Purple	#800080		Shades	Mix
RebeccaPurple	#663399		Shades	Mix
Red	#FF0000		Shades	Mix
RosyBrown	#BC8F8F		Shades	Mix
RoyalBlue	#4169E1		Shades	Mix
SaddleBrown	#8B4513		Shades	Mix
Salmon	#FA8072		Shades	Mix
SandyBrown	#F4A460		Shades	Mix
SeaGreen	#2E8B57		Shades	Mix
SeaShell	#FFF5EE		Shades	Mix
Sienna	#A0522D		Shades	Mix
Silver	#C0C0C0		Shades	Mix
SkyBlue	#87CEEB		Shades	Mix
SlateBlue	#6A5ACD		Shades	Mix
SlateGray	#708090		Shades	Mix
SlateGrey	#708090		Shades	Mix
Snow	#FFFAFA		Shades	Mix
SpringGreen	#00FF7F		Shades	Mix
SteelBlue	#4682B4		Shades	Mix
Tan	#D2B48C		Shades	Mix
Teal	#008080		Shades	Mix
Thistle	#D8BFD8		Shades	Mix
Tomato	#FF6347		Shades	Mix
Turquoise	#40E0D0		Shades	Mix
Violet	#EE82EE		Shades	Mix
Wheat	#F5DEB3		Shades	Mix
White	#FFFFFF		Shades	Mix
WhiteSmoke	#F5F5F5		Shades	Mix
Yellow	#FFFF00		Shades	Mix
YellowGreen	#9ACD32		Shades	Mix

❮ Назад
Дальше ❯

Прозрачность фона

Есть два возможных способа сделать элемент прозрачным: свойство , описанное выше, и указание цвета фона в RGBA формате.

Возможно вы уже знакомы с моделью представления цвета в формате . (Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:

color: rgb(255,255,0);
color: rgb(100%,100%,0);

Цвета, заданные с помощью , будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.

Объявление цвета схоже по синтаксису со стандартными правилами . Однако, кроме всего прочего, нам потребуется объявить значение как (вместо ) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от (полная прозрачность) до (полная непрозрачность).

color: rgba(255,255,0,0.5);
color: rgba(100%,100%,0,0.5);

Разница между свойством и заключается в том, что свойство применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):

body { background-image: url(img.jpg); }
.prim1 {
  width: 400px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  font-weight: bold;
  opacity: 0.5;
  filter: alpha(opacity=70); /*для IE8 и более ранних версий*/
  text-align: center;
}
.prim2 {
  width: 400px;
  margin: 30px 50px;
  background-color: rgba(255,255,255,0.5);
  border: 1px solid black;
  font-weight: bold;
  text-align: center;
}

Попробовать »
Примечание: значения не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения :

background: rgb(255,255,0);
background: rgba(255,255,0,0.5);

Метод RGB

Red-Green-Blue, сокращенно обозначаемый как «RGB». Как и в шестнадцатеричном коде, чтобы выбрать цвет, необходимо определить количество красного, зеленого и синего.

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

Зайдите в меню «Пуск», найдите в нем программу Paint и запустите ее.
Перейдите в раздел «Редактировать цвета», как показано на рисунке, приведенном ниже.
Откроется окно. В поле справа переместите ползунки, чтобы выбрать нужный цвет. Предположим, нужно вывести заголовки

розовым цветомВыберите цвет в окне, как показано на рисунке, приведенном ниже.

Обратите внимание на соответствующие значения Red-Green-Blue, указанные в правом нижнем углу окна. Введите эти значения в том же порядке в CSS.

p
{
color: rgb(240,96,204);
}

Изменение цвета в Paint

Выбор цвета в Paint

Чтобы использовать метод RGB, нужно ввести rgb (Red, Green, Blue), заменив «Red, Green, Blue» соответствующими числами в диапазоне от до 255.

Оттенки серого

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

Чтобы сделать его легким для вас, чтобы выбрать серый цвет мы составили таблицу серых оттенков для вас:

Gray Shades	HEX	RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#696969	rgb(105,105,105)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
HTML Gray	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
HTML DarkGray !!!	#A9A9A9	rgb(169,169,169)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
X11 Gray	#BEBEBE	rgb(190,190,190)
HTML Silver	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
HTML LightGray	#D3D3D3	rgb(211,211,211)
	#D8D8D8	rgb(216,216,216)
HTML Gainsboro	#DCDCDC	rgb(220,220,220)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
HTML WhiteSmoke	#F5F5F5	rgb(245,245,245)
	#F8F8F8	rgb(248,248,248)
HTML White	#FFFFFF	rgb(255,255,255)

An anomaly in the table above is that HTML Gray is darker than DarkGray.

The color names of HTML / CSS was inherited from the X11 standard.

HTML / CSS defined gray at the midpoint of the 8-bit gray scale (128,128,128).

X11 defined gray to be (190,190,190); which is closer to HTML silver.

HSL значение

В HTML цвет можно задать с помощью оттенка, насыщенности и легкости (HSL) в форме:

HSL (оттенок, насыщенность, легкость)

Hue-это степень на цветном колесе от 0 до 360. 0-красный, 120-зеленый, 240-синий.

Насыщенность представляет собой процентное значение, 0% означает оттенок серого, а 100%-полный цвет.

Легкость также процент, 0% черный, 50% не является ни светлым, ни темным, 100% белый

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Насыщенность

Насыщенность может быть охарактеризована как интенсивность цвета.

100% является чистым цветом, не оттенки серого

50% является 50% серый, но вы все еще можете увидеть цвет.

0% полностью серый, вы больше не можете видеть цвет.

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Легкость

Легкость цвета можно описать как сколько света вы хотите дать цвет, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни свет) 100% означает полную легкость (белый).

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Оттенки серого часто определяются установкой оттенка и насыщенности в 0, и отрегулируйте легкость от 0% до 100%, чтобы получить более темные/светлые оттенки:

CSS и наследование

В CSS, если вы применяете стиль к тегу, все теги, которые находятся внутри него, будут иметь тот же стиль.

Если я применил черный цвет-фон и белый цвет текста к тегу

<body>

, все заголовки и абзацы также будут иметь черный фон и белый текст… Это называется наследованием: теги, которые находятся внутри другого тега, «наследуют» его свойства.

Это также отображено в названии «CSS», что переводится как «Каскадные таблицы стилей». Свойства CSS наследуются в каскаде: если вы задаете стиль элементу, все его дочерние элементы будут иметь тот же стиль.

Это означает, что весь текст моей веб-страницы обязательно будет белым?

Нет, не обязательно. Если вы позже укажете, что хотите, чтобы заголовки были красными, этот стиль будет иметь приоритет, и заголовки станут красными.

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

<body>

, и все заголовки и абзацы будут отображаться жирным шрифтом.

Пример наследования с тегом

<mark>

Многие уверены, что они могут изменять только html цвет фона страницы. Это не так: можно изменить фон любого элемента: заголовков, абзацев, определенных слов и т. д. В этом случае они будут выделены (как если бы они были отмечены маркером).

Например, существует тег

<mark>

, который используется для выделения определенных слов. Давайте используем его здесь:

<h1>Who turned off the lights?</h1>
<p>Brr, it's all black on this website; it's a rather <mark>disturbing</mark> atmosphere don't you think?</p>

По умолчанию текст отображается на желтом фоне. Можно изменить это с помощью CSS:

body
{
background-color: black;
color: white;
}
mark
{
/* Цвет фона переопределяет цвет всей страницы */
background-color: red;
color: black;
}

Красный цвет — фон применяется к тексту тега

<mark>

. Действительно, даже если фон html-страницы черный, это свойство CSS для наиболее специфичного элемента имеет приоритет (смотрите рисунок, приведенный ниже):

Красный выделенный текст на черном фоне

Тот же принцип применим ко всем HTML-тегам и свойствам CSS. Если вы скажете:

• Текст абзацев у меня отображается шрифтом с размером 1,2em;
• Важные тексты (

  <strong>

  ) у меня отображается шрифтом с размером 1,4 em.

… то можете подумать, что возникнет конфликт. Если важный текст является частью абзаца, шрифтом какого размера он должен отображаться? 1,2 em или 1,4 em? CSS решит, что наиболее специфичное объявление имеет приоритет: поскольку

<strong>

соответствует более специфичному элементу, чем параграфы, текст будет выводиться шрифтом с размером 1.4 em.