Цвета в вебе

Разные способы указания цвета в CSS.

Время чтения: больше 15 мин

Название цвета

Скопировано

Самый простой способ указания цвета в вебе — ключевые слова. Используются английские названия цветов. Самые популярные базовые цвета:

Чёрный black
Белый white
Красный red
Зелёный green
Синий blue

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

Таблица с ключевыми словами для обозначения цвета в CSS
IndianRed	LightCoral	Salmon	DarkSalmon
LightSalmon	Crimson	Red	FireBrick
DarkRed	Pink	LightPink	HotPink
DeepPink	MediumVioletRed	PaleVioletRed	Coral
Tomato	OrangeRed	DarkOrange	Orange
Gold	Yellow	LightYellow	LemonChiffon
LightGoldenrodYellow	PapayaWhip	Moccasin	PeachPuff
PaleGoldenrod	Khaki	DarkKhaki	Lavender
Thistle	Plum	Violet	Orchid
Fuchsia	Magenta	MediumOrchid	MediumPurple
RebeccaPurple	BlueViolet	DarkViolet	DarkOrchid
DarkMagenta	Purple	Indigo	SlateBlue
DarkSlateBlue	MediumSlateBlue	GreenYellow	Chartreuse
LawnGreen	Lime	LimeGreen	PaleGreen
LightGreen	MediumSpringGreen	SpringGreen	MediumSeaGreen
SeaGreen	ForestGreen	Green	DarkGreen
YellowGreen	OliveDrab	Olive	DarkOliveGreen
MediumAquamarine	DarkSeaGreen	LightSeaGreen	DarkCyan
Teal	Aqua	Cyan	LightCyan
PaleTurquoise	Aquamarine	Turquoise	MediumTurquoise
DarkTurquoise	CadetBlue	SteelBlue	LightSteelBlue
PowderBlue	LightBlue	SkyBlue	LightSkyBlue
DeepSkyBlue	DodgerBlue	CornflowerBlue	MediumSlateBlue
RoyalBlue	Blue	MediumBlue	DarkBlue
Navy	MidnightBlue	Cornsilk	BlanchedAlmond
Bisque	NavajoWhite	Wheat	BurlyWood
Tan	RosyBrown	SandyBrown	Goldenrod
DarkGoldenrod	Peru	Chocolate	SaddleBrown
Sienna	Brown	Maroon	White
Snow	HoneyDew	MintCream	Azure
AliceBlue	GhostWhite	WhiteSmoke	SeaShell
Beige	OldLace	FloralWhite	Ivory
AntiqueWhite	Linen	LavenderBlush	MistyRose
Gainsboro	LightGray	Silver	DarkGray
Gray	DimGray	LightSlateGray	SlateGray
DarkSlateGray	Black

Как пишется

Скопировано

        
          
          .selector {  color: black;  background-color: AntiqueWhite;}
          .selector {
  color: black;
  background-color: AntiqueWhite;
}

Ключевые слова регистронезависимые — вы можете писать их как угодно и браузер всё равно вас поймёт.

RGB, RGBA

Скопировано

Принцип комбинации красного, зелёного и синего для получения разных цветов

RGB — базовая цветовая модель, в которой основные цвета света, красный, зелёный и синий, суммируются различными способами для воспроизведения широкого спектра цветов. Название модели происходит от инициалов трёх основных цветов: красного, зелёного и синего. В вебе модель состоит из трёх обязательных компонентов:

R — интенсивность красного (от 0 или 0% до 255 или 100%).
G — интенсивность зелёного (от 0 или 0% до 255 или 100%).
B — интенсивность синего (от 0 или 0% до 255 или 100%).
α — альфа-канал (от 0 или 0% до 1 или 100%).

Синтаксис RGB и RGBA

Скопировано

В RGB и RGBA есть два типа синтаксиса.

Первый синтаксис называется абсолютным. Параметры в нём указываются вручную:

        
          
          .rgb {  /* color: rgb(r g b[ / α]) */  color: rgb(255 255 255);  color: rgb(255 255 255 / 50%);}
          .rgb {
  /* color: rgb(r g b[ / α]) */
  color: rgb(255 255 255);
  color: rgb(255 255 255 / 50%);
}

Относительный синтаксис предполагает наследование от цветов в других форматах:

        
          
          .rgb {  /* color: rgb(from <color> r g b[ / α]) */  color: rgb(from green r g b / 0.5);  color: rgb(from hwb(120deg 10% 20%) r g calc(b + 200));}
          .rgb {
  /* color: rgb(from <color> r g b[ / α]) */
  color: rgb(from green r g b / 0.5);
  color: rgb(from hwb(120deg 10% 20%) r g calc(b + 200));
}

При относительном синтаксисе можно вообще не наследовать параметры цвета:

        
          
          .rgb {  /* Не наследует синий (b) */  color: rgb(from hsl(0 100% 50%) r g 48);}
          .rgb {
  /* Не наследует синий (b) */
  color: rgb(from hsl(0 100% 50%) r g 48);
}

Все типы синтаксиса имеют вторую форму в виде rgba(). Отличие от обычного rgb() в том, что альфа канал обязателен.

        
          
          .rgba {  /* Абсолютные значения — color: rgba(r g b α) */  color: rgba(255 255 255 / 50%);  /* Относительные значения — color: rgba(from <color> r g b α) */  color: rgba(from green r g b 0.5);  color: rgba(from hwb(120deg 10% 20%) r g calc(b + 200) a);  /* Относительное значение без наследования параметра (b) */  color: rgba(from hsl(0 100% 50%) r g 48 a);}
          .rgba {
  /* Абсолютные значения — color: rgba(r g b α) */
  color: rgba(255 255 255 / 50%);

  /* Относительные значения — color: rgba(from <color> r g b α) */
  color: rgba(from green r g b 0.5);
  color: rgba(from hwb(120deg 10% 20%) r g calc(b + 200) a);

  /* Относительное значение без наследования параметра (b) */
  color: rgba(from hsl(0 100% 50%) r g 48 a);
}

Открыть демо в новой вкладке

Посмотреть поддержку RGB на CanIUse.

HEX

Скопировано

Два цвета 2021 года по версии Pantone: серый и жёлтый

HEX — цветовая модель, основанная на RGB. Она использует шестнадцатеричный код для отображения цветов. Состоит из трёх компонентов:

R — интенсивность красного (от 0 до 255, записывается в 16-теричном виде от 00 до FF).
G — интенсивность зелёного (от 0 до 255, записывается в 16-теричном виде от 00 до FF).
B — интенсивность синего (от 0 до 255, записывается в 16-теричном виде от 00 до FF).
α — альфа-канал (от 0 или 0% до 1 или 100%).

Синтаксис HEX

Скопировано

Есть четыре способа записи HEX-цвета: трёхзначный, четырёхзначный, шестизначный и восьмизначный.

        
          
          .hex {  /* Трёхзначный способ */  color: #RGB;  color: #F09;  /* Четырёхзначный способт */  color: #RGBA;  color: #f09a;  /* Шестизначный способ */  color: #RRGGBB;  color: #ff0099;  /* Восьмизначный способ  */  color: #RRGGBBAA;  color: #FF0099AA;}
          .hex {
  /* Трёхзначный способ */
  color: #RGB;
  color: #F09;

  /* Четырёхзначный способт */
  color: #RGBA;
  color: #f09a;

  /* Шестизначный способ */
  color: #RRGGBB;
  color: #ff0099;

  /* Восьмизначный способ  */
  color: #RRGGBBAA;
  color: #FF0099AA;
}

Открыть демо в новой вкладке

Посмотреть поддержку HEX на CanIUse.

HSL

Скопировано

HSL — цветовая модель, которая тоже основана на RGB. Она описывает цвета оттенков через их насыщенность и светлоту. Состоит из трёх компонентов:

H — оттенок (в градусах от 0 до 360).
S — насыщенность (от 0% до 100%).
L — светлота (от 0% до 100%).
α — альфа-канал (от 0 или 0% до 1 или 100%).

Синтаксис HSL

Скопировано

Синтаксис HSL такой же как и у RGB:

        
          
          .hsl {  /* Абсолютные значения — color: hsl(h s l[ / α]) */  color: hsl(120deg 75% 25%);  color: hsl(120deg 75% 25% / 60%);  /* Относительные значения — color: hsl(from <color> h s l[ / α]) */  color: hsl(from green h s l / 0.5);  color: hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30));  /* Относительное значение без наследования параметра (l) */  color: hsl(from rgb(255 0 0) h s 50);}
          .hsl {
  /* Абсолютные значения — color: hsl(h s l[ / α]) */
  color: hsl(120deg 75% 25%);
  color: hsl(120deg 75% 25% / 60%);

  /* Относительные значения — color: hsl(from <color> h s l[ / α]) */
  color: hsl(from green h s l / 0.5);
  color: hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30));

  /* Относительное значение без наследования параметра (l) */
  color: hsl(from rgb(255 0 0) h s 50);
}

Открыть демо в новой вкладке

Посмотреть поддержку HSL на CanIUse.

HWB

Скопировано

Треугольник со схемой работы HWB, вокруг которого разноцветная каёмочка

HWB — цветовая модель, разработанная как альтернатива HSL. Она позволяет описывать цвет через оттенок, количество белого и количество чёрного. Состоит из трёх компонентов:

H — оттенок (в градусах от 0 до 360).
W — количество белого (от 0% до 100%).
B — количество чёрного (от 0% до 100%).
α — альфа-канал (от 0 или 0% до 1 или 100%).

Синтаксис HWB

Скопировано

Синтаксис HWB такой же как у HSL:

        
          
          .hwb {  /* Абсолютные значения — color: hwb(h w b[ / α]) */  color: hwb(120deg 75% 25%);  color: hwb(120deg 75% 25% / 0.6);  /* Относительные значения — color: hwb(from <color> h w b[ / α]) */  color: hwb(from green h w b / 0.5);  color: hwb(from rgb(200 0 0) calc(h + 30) w calc(b + 30));  /* Относительное значение без наследования параметра (l) */  color: hwb(from rgb(255 0 0) h w 50);}
          .hwb {
  /* Абсолютные значения — color: hwb(h w b[ / α]) */
  color: hwb(120deg 75% 25%);
  color: hwb(120deg 75% 25% / 0.6);

  /* Относительные значения — color: hwb(from <color> h w b[ / α]) */
  color: hwb(from green h w b / 0.5);
  color: hwb(from rgb(200 0 0) calc(h + 30) w calc(b + 30));

  /* Относительное значение без наследования параметра (l) */
  color: hwb(from rgb(255 0 0) h w 50);
}

Открыть демо в новой вкладке

Поддержка HWB на CanIUse.

LAB

Скопировано

LAB — цветовая модель, разработанная Международной комиссией по освещению (CIE). Основана на прямоугольной (декартовой) системе координат. Состоит из трёх компонентов:

L — светлота (от 0 до 100).
A — от зелёного (-125 или -100%) до красного (125 или 100%).
B — от синего (-125 или -100%) до жёлтого (125 или 100%).
α — альфа-канал (от 0 или 0% до 1 или 100%).

Синтаксис LAB

Скопировано

В модели LAB есть два способа задать цвет.

Первый способ абсолютный, в нём все параметры указывают вручную:

        
          
          .lab {  /* color: lab(l a b[ / α]) */  color: lab(29% 39 20);  color: lab(52% 40 59);  color: lab(52% 40 59 / .5);}
          .lab {
  /* color: lab(l a b[ / α]) */
  color: lab(29% 39 20);
  color: lab(52% 40 59);
  color: lab(52% 40 59 / .5);
}

Второй способ относительный. В нём цвета наследуются от цветов в других форматах:

        
          
          .lab {  /* color: lab(from <color> l a b[ / α]) */  color: lab(from green l a b / 0.5);  color: lab(from hsl(180 100% 50%) calc(l - 10) a b);}
          .lab {
  /* color: lab(from <color> l a b[ / α]) */
  color: lab(from green l a b / 0.5);
  color: lab(from hsl(180 100% 50%) calc(l - 10) a b);
}

В относительном синтаксисе можно не наследовать параметры цвета:

        
          
          .lab {  color: lab(from hsl(0 100% 50%) l -100 b);}
          .lab {
  color: lab(from hsl(0 100% 50%) l -100 b);
}

Открыть демо в новой вкладке

Поддержка LAB на CanIUse.

LCH

Скопировано

Схема LCH в виде сферы с координатой L по центру и расходящимися от неё C и H.

LCH — вариация LAB в полярной системе координат. Состоит из трёх компонентов:

L — светлота (от 0 или 0% до 100 или 100%).
C — насыщенность (от 0 или 0% до 150 и выше или 100%).
H — тон в градусах (от 0 до 360).
α — альфа-канал (от 0 или 0% до 1 или 100%).

Синтаксис LCH

Скопировано

У LCH почти такой же синтаксис, как у LAB:

        
          
          .lch {  /* Абсолютные значения — color: lch(l c h[ / α]) */  color: lch(29% 39 20);  color: lch(52% 40 59);  color: lch(52% 40 59 / .5);  /* Относительные значения color — lch(from <color> l c h[ / α]) */  color: lch(from green l c h / 0.5);  color: lch(from hsl(180 100% 50%) calc(l - 10) c h);  /* Относительное значение без наследования параметра (c) */  color: lch(from hsl(0 100% 50%) l -100 h);}
          .lch {
  /* Абсолютные значения — color: lch(l c h[ / α]) */
  color: lch(29% 39 20);
  color: lch(52% 40 59);
  color: lch(52% 40 59 / .5);

  /* Относительные значения color — lch(from <color> l c h[ / α]) */
  color: lch(from green l c h / 0.5);
  color: lch(from hsl(180 100% 50%) calc(l - 10) c h);

  /* Относительное значение без наследования параметра (c) */
  color: lch(from hsl(0 100% 50%) l -100 h);
}

Открыть демо в новой вкладке

Поддержка LCH на CanIUse.

OKLAB

Скопировано

Два прямоугольника, сравнение улучшений над LAB и LCH

OKLAB — новая цветовая модель, улучшенная версия LAB. Создана для цифровых дисплеев. Обеспечивает более равномерное восприятие цвета и лучше подходит для пользовательских интерфейсов. Состоит из трёх компонентов:

L — светлота (от 0 или 0% до 1 или 100%).
A — от зелёного (-0.4 и меньше или -100% ) до красного (0.4 и выше или 100%).
B — от синего (-0.4 и меньше или -100% ) до жёлтого (0.4 и выше или 100%).
α — альфа-канал (от 0 или 0% до 100 или 100%).

Синтаксис OKLAB

Скопировано

Синтаксис OKLAB такой же как и у LAB:

        
          
          .oklab {  /* Абсолютные значения — color: oklab(l a b[ / α]) */  color: oklab(29% 39 20);  color: oklab(52% 40 59);  color: oklab(52% 40 59 / .5);  /* Относительные значения — color: oklab(from <color> l a b[ / α]) */  color: oklab(from green l a b / 0.5);  color: oklab(from hsl(180 100% 50%) calc(l - 10) a b);  /* Относительное значение без наследования параметра (a) */  color: oklab(from hsl(0 100% 50%) l -100 b);}
          .oklab {
  /* Абсолютные значения — color: oklab(l a b[ / α]) */
  color: oklab(29% 39 20);
  color: oklab(52% 40 59);
  color: oklab(52% 40 59 / .5);

  /* Относительные значения — color: oklab(from <color> l a b[ / α]) */
  color: oklab(from green l a b / 0.5);
  color: oklab(from hsl(180 100% 50%) calc(l - 10) a b);

  /* Относительное значение без наследования параметра (a) */
  color: oklab(from hsl(0 100% 50%) l -100 b);
}

Открыть демо в новой вкладке

Посмотреть поддержку OKLAB на CanIUse.

OKLCH

Скопировано

Вариация OKLAB, основанная на полярной системе координат. Состоит из трёх компонентов:

L — светлота (от 0 или 0% до 1 или 100%).
C — насыщенность (от -0.4 и ниже или 0% до +0.4 и выше или 100%).
H — тон в градусах (от 0 до 360).
α — альфа-канал (от 0 или 0% до 100 или 100%).

Синтаксис OKLCH

Скопировано

В OKLCH используется тот же синтаксис, что в LAB и LCH:

        
          
          .oklch {  /* Абсолютные значения — color: oklch(l c h[ / α]) */  color: oklch(29% 39 20);  color: oklch(52% 40 59);  color: oklch(52% 40 59 / .5);  /* Относительные значения — color: oklch(from <color> l c h[ / α]) */  color: oklch(from green l c h / 0.5);  color: oklch(from hsl(180 100% 50%) calc(l - 10) c h);  /* Относительное значение без наследования параметра (c) */  color: oklch(from hsl(0 100% 50%) l -100 h);}
          .oklch {
  /* Абсолютные значения — color: oklch(l c h[ / α]) */
  color: oklch(29% 39 20);
  color: oklch(52% 40 59);
  color: oklch(52% 40 59 / .5);

  /* Относительные значения — color: oklch(from <color> l c h[ / α]) */
  color: oklch(from green l c h / 0.5);
  color: oklch(from hsl(180 100% 50%) calc(l - 10) c h);

  /* Относительное значение без наследования параметра (c) */
  color: oklch(from hsl(0 100% 50%) l -100 h);
}

Открыть демо в новой вкладке

Посмотреть поддержку OKLCH на CanIUse.

Ключевые слова

Скопировано

`transparent`

Скопировано

Ключевое слово transparent задаёт прозрачный цвет текста. Технически это равносильно записи любого цвета с нулевой прозрачностью rgb(0 0 0 / 0), но бывают случаи, когда просто прозрачность и прозрачность цвета могут работать иначе, например, в градиентах.

`currentColor`

Скопировано

За ключевым словом currentColor скрывается цвет, указанный в свойстве color элемента. Очень удобно указывать это слово в качестве значения других свойств, чтобы многократно не указывать один и тот же цвет.

Рассмотрим пример. Пусть цвет рамки элемента будет совпадать с цветом текста:

        
          
          .element {  color: #6e4aff;  border: 1px solid currentColor;}
          .element {
  color: #6e4aff;
  border: 1px solid currentColor;
}

Если мы захотим менять цвет текста и рамки по наведению курсора, то нам достаточно будет изменить значение одного свойства, а цвет рамки подстроится за счёт currentColor:

        
          
          .element:hover {  color: #09ff00;}
          .element:hover {
  color: #09ff00;
}

Название цвета

Как пишется

RGB, RGBA

Синтаксис RGB и RGBA

HEX

Синтаксис HEX

HSL

Синтаксис HSL

HWB

Синтаксис HWB

LAB

Синтаксис LAB

LCH

Синтаксис LCH

OKLAB

Синтаксис OKLAB

OKLCH

Синтаксис OKLCH

Ключевые слова

transparent

currentColor

Читайте также

color

linear-gradient()

text-decoration-color

`transparent`

`currentColor`

`color`

`linear-gradient()`

`text-decoration-color`