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

    CSS

    Цвета в вебе

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

    Время чтения: 14 мин

    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

    HEX

    Скопировано

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

            
          
          .selector {  color: #ff0000;           /* чистый красный */  background-color: #FFF;   /* сокращённая запись белого */  border-color: #00990055;  /* зелёный с 33% прозрачностью */}
          .selector {
  color: #ff0000;           /* чистый красный */
  background-color: #FFF;   /* сокращённая запись белого */
  border-color: #00990055;  /* зелёный с 33% прозрачностью */
}

    Форматы записи:

    • #RRGGBB — полный вариант, например #ff6347 (tomato)
    • #RGB — сокращённый, если каждая пара одинакова: #f00 = #ff0000
    • #RRGGBBAA — с прозрачностью, AA от 00 (полностью прозрачный) до ff (непрозрачный)
    • #RGBA — сокращённый с прозрачностью: #f008 = rgb(255 0 0 / 50%)
    Два цвета 2021 года по версии Pantone: серый и жёлтый

    Прозрачность в HEX неудобно считать в голове — 50% это 80, 25% это 40. Поэтому для полупрозрачных цветов проще использовать другие форматы.

    RGB

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

    Функция rgb() принимает три значения каналов (красный, зелёный, синий) от 0 до 255 или в процентах. Прозрачность добавляется четвёртым параметром через слэш:

            
          
          .element {  color: rgb(255 0 0);             /* красный */  color: rgb(0 63 255);            /* синий */  color: rgb(0 63 255 / 0.5);      /* полупрозрачный синий */  color: rgb(0 63 255 / 50%);      /* то же самое в процентах */}
          .element {
  color: rgb(255 0 0);             /* красный */
  color: rgb(0 63 255);            /* синий */
  color: rgb(0 63 255 / 0.5);      /* полупрозрачный синий */
  color: rgb(0 63 255 / 50%);      /* то же самое в процентах */
}

    В старом коде встречается синтаксис с запятыми. Он работает, но считается устаревшим. Вместо 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);

    HSL

    Скопировано

    HSL описывает цвет через три параметра, более понятные человеку:

    • H (Hue) — оттенок, угол на цветовом колесе от 0 до 360°
    • S (Saturation) — насыщенность в процентах, 0% = серый
    • L (Lightness) — светлота в процентах, 0% = чёрный, 100% = белый
    Параметры в системе HSL 
            
          
          .element {  color: hsl(120 100% 50%);          /* яркий зелёный */  color: hsl(120 100% 50% / 0.5);    /* полупрозрачный */  color: hsl(0.5turn 100% 50%);      /* то же, что 180deg */}
          .element {
  color: hsl(120 100% 50%);          /* яркий зелёный */
  color: hsl(120 100% 50% / 0.5);    /* полупрозрачный */
  color: hsl(0.5turn 100% 50%);      /* то же, что 180deg */
}

    Оттенок можно задавать в deg, turn, grad, rad. Чаще всего просто пишут число, браузер считает его градусами.

    HSL удобен для ручного подбора цветов и создания тематических палитр через CSS-переменные:

            
          
          :root {  --hue: 220;  --accent: hsl(var(--hue) 80% 55%);  --accent-light: hsl(var(--hue) 80% 75%);  --accent-dark:  hsl(var(--hue) 80% 35%);}
          :root {
  --hue: 220;
  --accent: hsl(var(--hue) 80% 55%);
  --accent-light: hsl(var(--hue) 80% 75%);
  --accent-dark:  hsl(var(--hue) 80% 35%);
}

    HWB

    Скопировано

    HWB — ещё один способ описать цвет через оттенок плюс количество белого и чёрного:

    • H (Hue) — оттенок, 0–360°
    • W (Whiteness) — белизна, 0–100%
    • B (Blackness) — чернота, 0–100%
            
          
          .item {  color: hwb(45 45% 20%);           /* тёплый жёлто-оранжевый */  color: hwb(45 45% 20% / 0.6);     /* с прозрачностью */}
          .item {
  color: hwb(45 45% 20%);           /* тёплый жёлто-оранжевый */
  color: hwb(45 45% 20% / 0.6);     /* с прозрачностью */
}

    Если W + B в сумме превышают 100%, браузер нормализует их автоматически.

    Поиграть с HWB:

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

    Цветовые пространства

    Скопировано

    Все форматы выше — RGB, HEX, HSL, HWB — работают в одном пространстве под названием sRGB. Это стандарт, который появился в конце 1990-х для мониторов и интернета, и он описывает лишь часть видимых человеком цветов.

    Современные дисплеи, в том числе iPhone, Mac с Retina и большинство флагманских телефонов, поддерживают более широкий охват Display P3: он покрывает примерно на 35% больше цветов, чем sRGB. Особенно это заметно в ярких насыщенных зелёных, красных и пурпурных: на P3-экране они выглядят гораздо живее.

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

    Современные форматы (oklch, oklab, lch, lab) решают обе проблемы:

    1. Они перцептуально равномерны: одинаковое изменение L даёт одинаково воспринимаемую разницу в яркости.
    2. Функция color() с пространством display-p3 даёт доступ к широкому охвату P3-экранов.

    Наглядно сравнить интерполяцию в разных пространствах и увидеть разницу в равномерности светлоты:

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

    OKLab и OKLCh

    Скопировано

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

    oklch(L C H)

    Скопировано

    Полярные координаты: L — светлота (0–1), C — насыщенность (chroma, от 0 и выше, обычно до ~0.37), H — оттенок (0–360°). Рекомендуемый современный формат для большинства задач: интуитивный, удобен для палитр.

            
          
          .element {  color: oklch(0.7 0.2 160);          /* зелёный */  color: oklch(0.7 0.2 160 / 0.8);    /* полупрозрачный */  color: oklch(0 0 0);                /* чёрный */  color: oklch(1 0 0);                /* белый */}
          .element {
  color: oklch(0.7 0.2 160);          /* зелёный */
  color: oklch(0.7 0.2 160 / 0.8);    /* полупрозрачный */
  color: oklch(0 0 0);                /* чёрный */
  color: oklch(1 0 0);                /* белый */
}

    Главное преимущество: одинаковый L при любом оттенке — это одинаково воспринимаемая яркость. Это делает oklch идеальным для создания дизайн-токенов и тематических палитр.

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

    oklab(L a b)

    Скопировано

    Прямоугольные координаты того же пространства: a — ось зелёный/красный, b — ось синий/жёлтый. Удобен для интерполяции: в градиентах цвета плавно переходят без «серых провалов» посередине:

            
          
          .gradient {  background: linear-gradient(      in oklab, oklch(0.65 0.25 0),      oklch(0.65 0.25 150)    );}
          .gradient {
  background: linear-gradient(
      in oklab, oklch(0.65 0.25 0),
      oklch(0.65 0.25 150)
    );
}

        
        
          
        
      
            
          
          .element {  color: oklab(0.7 -0.1 0.1);  color: oklab(0.7 -0.1 0.1 / 0.5);}
          .element {
  color: oklab(0.7 -0.1 0.1);
  color: oklab(0.7 -0.1 0.1 / 0.5);
}

    Lab и LCH

    Скопировано

    Аналоги oklch/oklab на основе более старого стандарта CIE. Тоже перцептуально равномерные, но OKLab/OKLCh дают более точные результаты на практике и обычно предпочтительнее. Работают во всех актуальных браузерах с мая 2023.

            
          
          .element {  color: lch(50 80 160);    /* L: 0–100, C: 0–150+, H: 0–360 */  color: lab(50 -40 30);    /* L: 0–100, a и b: -125 до 125 */}
          .element {
  color: lch(50 80 160);    /* L: 0–100, C: 0–150+, H: 0–360 */
  color: lab(50 -40 30);    /* L: 0–100, a и b: -125 до 125 */
}

    Если уже используете oklch/oklab — lch/lab не нужны. Они нужны, когда работаете с инструментами или библиотеками, которые оперируют CIE-пространством.

    color() — широкий охват

    Скопировано

    Функция color() позволяет явно указать цветовое пространство — display-p3, rec2020, srgb и другие. Поддерживается с мая 2023.

    Относительный синтаксис цветов

    Скопировано

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

            
          
          .element {  /* Берём синий и сдвигаем оттенок на 180° — получаем оранжевый */  color: oklch(from blue l c calc(h + 180));  /* Осветляем произвольный цвет из переменной */  background: oklch(from var(--brand) calc(l + 0.15) c h);  /* Делаем цвет полупрозрачным */  border-color: oklch(from var(--brand) l c h / 0.5);  /* Убираем насыщенность — получаем серый той же яркости */  color: oklch(from var(--brand) l 0 h);}
          .element {
  /* Берём синий и сдвигаем оттенок на 180° — получаем оранжевый */
  color: oklch(from blue l c calc(h + 180));

  /* Осветляем произвольный цвет из переменной */
  background: oklch(from var(--brand) calc(l + 0.15) c h);

  /* Делаем цвет полупрозрачным */
  border-color: oklch(from var(--brand) l c h / 0.5);

  /* Убираем насыщенность — получаем серый той же яркости */
  color: oklch(from var(--brand) l 0 h);
}

    Внутри функции можно использовать calc() с компонентами цвета (l, c, h для oklch или r, g, b для rgb). Это мощный инструмент для создания динамических палитр прямо в CSS без JavaScript.

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

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

    Скопировано

    transparent

    Скопировано

    Ключевое слово transparent — полностью прозрачный цвет, эквивалент rgb(0 0 0 / 0). Пригодится там, где нужно «убрать» цвет, не сломав остальные свойства. Стоит знать: в градиентах transparent интерполируется через чёрный, поэтому иногда лучше использовать oklch(0 0 0 / 0) или rgb(X Y Z / 0) с нужным оттенком, чтобы не было «серых провалов»:

            
          
          /* Может появиться серый/чёрный в середине */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

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