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

Q: Как изменить цвет шрифта в HTML?

Используйте свойство CSS color в таблице стилей или атрибуте style: Blue text . Старый тег устарел.

Q: Как изменить цвет одного слова?

Оберните слово в и задайте ему цвет: This is red . Если слово еще и важно или выделено интонацией, используйте или вместо .

Q: В CSS пишется font-color или color?

color. Свойств font-color и text-color не существует; браузер их игнорирует.

Цвет текста в HTML: как изменить цвет шрифта через CSS

Тег устарел; цвет текста в HTML задается свойством CSS color. Разберем, как покрасить всю страницу, одно слово, ссылку или заголовок именованными цветами, hex и rgb и как сохранить текст читаемым.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Как изменить цвет текста в HTML

Используйте свойство CSS color. Оно задает цвет текста элемента, и все элементы внутри наследуют тот же цвет, если не задают свой.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

Свойство называется color, а не font-color или text-color. Таких имен в CSS нет, и они молча игнорируются.

Почему не тег font

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

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

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

color принимает все форматы цветов CSS. Самые частые четыре:

Формат	Пример	Примечание
Именованный	`color: tomato;`	148 именованных цветов, удобно для быстрых проверок
Hex	`color: #2563eb;`	Самый распространенный в макетах
rgb()	`color: rgb(37 99 235);`	Красный, зеленый и синий от 0 до 255
hsl()	`color: hsl(221 83% 53%);`	Тон, насыщенность, светлота: легко сделать светлее или темнее

Hex, rgb() и hsl() могут принимать альфа-канал для полупрозрачного текста, например #2563eb80 или rgb(37 99 235 / 50%). Все форматы объяснены на странице про цвета в CSS.

Цвет всей страницы, заголовка или секции

Задайте цвет один раз на body и позвольте наследованию сделать остальное, а затем переопределите, где нужно:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

Мягкий почти черный вроде #111827 или #374151 на белом приятнее для глаз, чем чистый #000000, и все равно воспринимается как черный.

Цвет ссылок

Ссылки это исключение из наследования: браузер дает им собственный синий (и фиолетовый после посещения), поэтому цвет родителя до них не доходит. Задайте цвет самой ссылке или скажите ей наследовать:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

:hover, :visited и :focus-visible позволяют менять цвет для каждого состояния; они разобраны на странице про hover. Если ссылка того же цвета, что и окружающий текст, оставьте ей подчеркивание, чтобы ее все еще можно было узнать.

Сделайте текст читаемым: контрастность

Цвет текста это только половина пары, вторая половина это фон. WCAG требует коэффициент контрастности не меньше 4.5:1 для обычного текста и 3:1 для крупного (около 24px, или 19px жирным).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

Светло-серый текст в стиле placeholder это самая частая ошибка. Инструменты разработчика Chrome и Firefox показывают коэффициент контрастности при просмотре цвета текста.

currentColor: повторное использование цвета текста

currentColor это ключевое слово, равное color элемента. Его могут использовать рамки, outline и встроенные SVG-иконки, поэтому одно изменение color перекрашивает и текст, и его украшения:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

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

font-color или text-color. Свойство называется color.
Тег . Он устарел; используйте CSS.
Ожидание, что ссылки унаследуют цвет. Задайте a { color: ... } или color: inherit.
Цвет как единственный сигнал. «Поля красным обязательны» не работает для тех, кто не различает красный. Добавьте текст или иконку.
Низкоконтрастный серый текст. Проверьте коэффициент: 4.5:1 или больше для основного текста.
opacity, чтобы осветлить текст. Она делает бледным весь элемент, включая фон и дочерние элементы. Используйте более светлый цвет или цвет с альфа-каналом.

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

Как изменить цвет шрифта в HTML?

Используйте свойство CSS color в таблице стилей или атрибуте style: Blue text. Старый тег  устарел.

Поддерживается ли еще тег ?

Браузеры все еще рисуют его, чтобы очень старые страницы продолжали работать, но в HTML он устарел, и валидаторы считают его ошибкой. Используйте вместо него CSS color.

Как изменить цвет одного слова?

Оберните слово в  и задайте ему цвет: This is red. Если слово еще и важно или выделено интонацией, используйте  или  вместо .

Почему ссылка не меняет цвет, когда я задаю color родителю?

У ссылок есть свой цвет из таблицы стилей браузера, поэтому они не наследуют цвет родителя. Задайте его самой ссылке (a { color: #2563eb; }) или используйте a { color: inherit; }, чтобы она следовала за родителем.

В CSS пишется font-color или color?

color. Свойств font-color и text-color не существует; браузер их игнорирует.

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