Свойство CSS `color`

color — это свойство CSS, задающее цвет переднего плана — значение цвета текста элемента и его текстовых декораций, а также значение currentColor. currentColor можно использовать как косвенное значение для других свойств; оно является значением по умолчанию для других свойств цвета, например border-color.

Обзор использования цвета в HTML см. в статье Применение цвета к элементам HTML с помощью CSS.

Попробуйте

color: rebeccapurple;

color: #00a400;

color: rgb(214 122 127);

color: hsl(30deg 82% 43%);

color: hsl(237deg 74% 33% / 61%);

color: hwb(152deg 0% 58% / 70%);

<section id="default-example">
  <div class="example-container">
    <p id="example-element">
      London. Michaelmas term lately over, and the Lord Chancellor sitting in
      Lincoln's Inn Hall. Implacable November weather.
    </p>
  </div>
</section>

#example-element {
  font-size: 1.5em;
}

.example-container {
  background-color: white;
  padding: 10px;
}

Синтаксис

/* Keyword values */
color: currentColor;

/* <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* <rgb()> values and legacy <rgba()> values*/
color: rgb(34, 12, 64);
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.6);
color: rgb(34.6 12 64 / 60%);
color: rgba(34.6 12 64 / 60%);

/* <hsl()> values and legacy <hsla()> values */
color: hsl(30, 100%, 50%);
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.2 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* <hwb()> values */
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);

/* Global values */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;

Значения

Для этого свойства указывается одно значение из следующего списка:

color

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

currentColor

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

Доступность

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

Коэффициент контрастности цвета определяется сравнением яркости значений цветов текста и фона. Для соответствия действующим Рекомендациям по обеспечению доступности веб-контента (WCAG) коэффициент должен составлять 4,5:1 для текстового содержимого и 3:1 для крупного текста, например заголовков. Крупным считается текст размером 18,66 px и полужирный или крупнее либо размером 24 px и больше.

• WebAIM: проверка контрастности цветов
• MDN: пояснения к руководству 1.4 WCAG

• [Понимание критерия успеха 1.4.3

  W3C: понимание WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)

Формальное определение

Формальный синтаксис

color = 
  <color>

Примеры

Как сделать текст красным

Ниже приведены способы задать красный цвет текста абзаца:

p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255 0 0);
}
p {
  color: rgb(100% 0% 0%);
}
p {
  color: hsl(0 100% 50%);
}

/* 50% translucent */
p {
  color: #ff000080;
}
p {
  color: rgb(255 0 0 / 50%);
}
p {
  color: hsl(0 100% 50% / 50%);
}

Спецификации

Совместимость с браузерами

См. также

• Тип данных color
• Другие свойства, связанные с цветом: background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, column-rule-color и print-color-adjust
• Атрибут SVG color
• Функция color()
• Применение цвета к элементам HTML с помощью CSS
• WCAG: контрастность цветов