Исполняемые доки CSS: Цвета CSS

Q: Какие форматы цвета поддерживает CSS?

Именованные цвета (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() и color(), плюс ключевые слова transparent и currentColor. Hex, rgb и hsl покрывают почти всю повседневную работу.

Q: Чем rgb отличается от rgba?

Уже ничем. rgba() это старый псевдоним: современный CSS позволяет rgb() принимать альфа-значение (rgb(37 99 235 / 50%)), и во всех актуальных браузерах обе функции принимают одинаковые аргументы.

Q: Как сделать цвет прозрачным в CSS?

Добавьте альфа-канал: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) или 8-значный hex вроде #2563eb80. В отличие от opacity, это делает полупрозрачным только один цвет, а не весь элемент.

Q: Что означает currentColor?

Это значение свойства color элемента. Если использовать его для рамки или заливки SVG, они автоматически следуют за цветом текста.

Как записать цвет в CSS

Любое свойство, которое принимает цвет (color, background-color, border-color, тени, fill в SVG), принимает одни и те же форматы. Первые четыре образца это один и тот же синий, записанный четырьмя способами, а пятый это близкий к нему именованный цвет:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

Формат	Пример	Лучше всего для
Именованный	`tomato`, `rebeccapurple`	Быстрых проверок и прототипов
Hex	`#2563eb`, `#25e`	Копирования из инструментов дизайна
`rgb()`	`rgb(37 99 235)`	Добавления прозрачности, работы со значениями RGB
`hsl()`	`hsl(221 83% 53%)`	Оттенков и тонов одного цвета
`oklch()`	`oklch(55% 0.2 262)`	Палитр с равномерной воспринимаемой светлотой
Ключевые слова	`transparent`, `currentColor`	Смотрите разделы ниже

Hex-цвета

Hex-цвет это # и затем красный, зеленый и синий, каждый двумя шестнадцатеричными цифрами от 00 до ff. Еще три формы это сокращения или расширения:

#rgb: каждая цифра удваивается, поэтому #25e это #2255ee.
#rrggbbaa: последняя пара это альфа, поэтому #2563eb80 непрозрачен примерно на 50%.
#rgba: короткая форма с альфой.

Регистр в hex не важен: #2563EB и #2563eb это один цвет.

rgb() и rgba()

rgb() принимает красный, зеленый и синий от 0 до 255 (или от 0% до 100%). Необязательное четвертое значение после косой черты это альфа, от 0 (невидимый) до 1 или от 0% до 100%.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() и rgb() теперь одна и та же функция: обе принимают оба синтаксиса и необязательную альфу. Старый код использует rgba(), когда нужна прозрачность, и он продолжает работать.

hsl(): самый удобный для настройки формат

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

Первый ряд сохраняет тон 221 и насыщенность 83% и меняет только светлоту. Второй ряд обходит цветовой круг с одинаковыми насыщенностью и светлотой.

Прозрачность: альфа-канал и opacity

Альфа-канал делает прозрачным один цвет. opacity делает прозрачным весь элемент, включая текст и дочерние элементы:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent это ключевое слово для полностью прозрачного черного, rgb(0 0 0 / 0). Это фон по умолчанию у большинства элементов.

currentColor

currentColor равен собственному color элемента. У кнопки, где рамка, иконка и текст используют его, одно объявление меняет все сразу:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

У рамок currentColor и так стоит по умолчанию, поэтому border: 2px solid без цвета совпадает с текстом.

Попробуйте любой цвет

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Попробуйте tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150) и color-mix(in srgb, #2563eb, white 50%).

Новые цветовые функции

oklch(L C H): светлота, хрома и тон в пространстве, устроенном так, что одинаковая светлота выглядит одинаково светлой. В палитрах, построенных в нем, меньше грязных промежуточных оттенков, чем в HSL.
color-mix(in srgb, A, B 30%): смешивает два цвета. С white или black дает светлые и темные оттенки из одного фирменного цвета и работает с CSS-переменными: color-mix(in srgb, var(--brand), white 80%).

Обе работают в актуальных Chrome, Firefox и Safari. Храните фирменные цвета в переменных CSS, чтобы выбранные форматы жили в одном месте.

Частые ошибки

Нет # у hex-цвета. color: 2563eb невалидно и игнорируется.
opacity, чтобы сделать фон прозрачным. Текст тоже становится бледным. Используйте цвет с альфой.
Смешанные разделители в современном синтаксисе. rgb(37 99, 235) невалидно: используйте либо только пробелы, либо только запятые.
Надежда, что именованный цвет совпадет с макетом. royalblue это не #2563eb. Копируйте точный код.
Оценка контрастности на глаз. Проверяйте цвет текста на фоне инструментом проверки контрастности; 4.5:1 это минимум для основного текста.

Часто задаваемые вопросы

Какие форматы цвета поддерживает CSS?

Именованные цвета (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() и color(), плюс ключевые слова transparent и currentColor. Hex, rgb и hsl покрывают почти всю повседневную работу.

Чем rgb отличается от rgba?

Уже ничем. rgba() это старый псевдоним: современный CSS позволяет rgb() принимать альфа-значение (rgb(37 99 235 / 50%)), и во всех актуальных браузерах обе функции принимают одинаковые аргументы.

Как сделать цвет прозрачным в CSS?

Добавьте альфа-канал: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) или 8-значный hex вроде #2563eb80. В отличие от opacity, это делает полупрозрачным только один цвет, а не весь элемент.

Что такое HSL в CSS?

Hue, saturation, lightness: тон, насыщенность, светлота. Тон это угол на цветовом круге (0 красный, 120 зеленый, 240 синий), насыщенность отвечает за яркость цвета, а светлота идет от 0% черного до 100% белого. С ним легко получать более светлые и темные оттенки: меняется только последнее число.

Что означает currentColor?

Это значение свойства color элемента. Если использовать его для рамки или заливки SVG, они автоматически следуют за цветом текста.

Связанные концепции