Enter
    Расширенный поиск
    Клавиша / esc

    CSS

    Цвета в вебе

    Разные способы указания цвета в CSS — от простых ключевых слов до современных цветовых пространств oklch и relative color syntax.

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

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

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

    Скопировано

    Написать название цвета по-английски это самый простой способ. CSS знает 140+ ключевых слов:

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

    Ключевые слова регистронезависимые, браузер одинаково поймёт Red, red и RED.

    Палитра встроенных имён:

    Таблица с ключевыми словами для обозначения цвета в 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

    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 / 0.5);}
          .rgb {
  /* color: rgb(r g b[ / α]) */
  color: rgb(255 255 255);
  color: rgb(255 255 255 / 0.5);
}

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

            
          
          .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 / 0.5);  /* Относительные значения — 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 / 0.5);

  /* Относительные значения — 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.

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

            
          
          /* старый синтаксис */color: rgba(255, 0, 0, 0.5);/* современный */color: rgb(255 0 0 / 0.5);
          /* старый синтаксис */
color: rgba(255, 0, 0, 0.5);

/* современный */
color: rgb(255 0 0 / 0.5);

    HEX

    Скопировано

    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 — это сокращённая запись полной формы.
    Каждый символ в сокращённой записи дублируется браузером при разборе цвета.

    То есть парсер CSS сначала "разворачивает" значение, а затем уже работает с полной RGB(A)-формой:

    • #RGB → #RRGGBB
    • #RGBA → #RRGGBBAA

    Например:

    • #F09 → #FF0099
    • #F09A → #FF0099AA
            
          
          .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

    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

    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

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

    Вариация 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) - чёрного цвета с нулевой непрозрачностью. Оно ведёт себя точно так же, как любой другой цвет с альфа-каналом, равным нулю, и может использоваться в любых CSS-свойствах, включая background, border и *-gradient.

            
          
          /* Может появиться серый/чёрный в середине */background: linear-gradient(red, transparent);/* Чистый переход без артефактов */background: linear-gradient(red, oklch(from red l c h / 0));
          /* Может появиться серый/чёрный в середине */
background: linear-gradient(red, transparent);

/* Чистый переход без артефактов */
background: linear-gradient(red, oklch(from red l c h / 0));

    currentColor

    Скопировано

    currentColor — текущий цвет текста элемента. Удобен, когда нужно синхронизировать несколько свойств с одним источником:

            
          
          .element {  color: #6e4aff;  border: 1px solid currentColor;  /* рамка того же цвета, что текст */  fill: currentColor;              /* для SVG-иконок */}/* При hover достаточно изменить одно свойство */.element:hover {  color: #09ff00;}
          .element {
  color: #6e4aff;
  border: 1px solid currentColor;  /* рамка того же цвета, что текст */
  fill: currentColor;              /* для SVG-иконок */
}

/* При hover достаточно изменить одно свойство */
.element:hover {
  color: #09ff00;
}

    light-dark()

    Скопировано

    Функция light-dark() принимает два цвета — для светлой и тёмной темы — и выбирает нужный в зависимости от color-scheme. Поддерживается с мая 2024.

            
          
          html {  /* Обязательно — разрешает переключение тем */  color-scheme: light dark;}.element {  /* Белый в светлой теме, тёмно-серый в тёмной */  background: light-dark(#ffffff, #1a1a1a);  /* Тёмный текст в светлой теме, светлый в тёмной */  color: light-dark(#111111, #eeeeee);}
          html {
  /* Обязательно — разрешает переключение тем */
  color-scheme: light dark;
}

.element {
  /* Белый в светлой теме, тёмно-серый в тёмной */
  background: light-dark(#ffffff, #1a1a1a);

  /* Тёмный текст в светлой теме, светлый в тёмной */
  color: light-dark(#111111, #eeeeee);
}

    Без color-scheme: light dark на html или :root функция не работает.

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

    • color

      Свойство, чтобы покрасить текст в разные цвета. Богатое разнообразие доступных значений.

    • color-mix()

      Функция смешивает два цвета для получения оттенков, состояний и тем.

    • color-scheme

      Тёмная или светлая тема? Вы сами можете её задать!