Цвет

Свойство color CSS задаёт цвет переднего плана значения цвета текста и декораций текста, а также устанавливает значение currentcolor. currentcolor может использоваться как косвенное значение для других свойств и является значением по умолчанию для других свойств цвета, таких как border-color.

Попробуйте

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

Синтаксис

/* 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 задаётся одним <color> значением.

Обратите внимание, что значение должно быть однородным цветом. Это не может быть <gradient>, который на самом деле является типом <image>.

Значения

<color>: Устанавливает цвет текстовых и декоративных частей элемента.
currentcolor: Устанавливает цвет в значение свойства color элемента. Однако, если установлено в качестве значения для color, currentcolor обрабатывается как inherit.

Доступность

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

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

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

Начальное значение	`canvastext`
Применимо к	всем элементам и тексту. Он также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	вычисленный цвет
Тип анимации	по типу вычисленного значения

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

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%);
}

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

Спецификация
CSS Модуль цвета уровня 4 # the-color-property

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`color`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color