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

В CSS за цвет текста отвечает свойство color. Оно может применяться к любому элементу и принимать цвет в одном из форматов:

1. Шестнадцатеричная форма. Например, #0d6efd, #d63384. Для подбора цвета и его значения используйте онлайн-сервисы, например HTML COLOR CODES
2. Текстовое название: red, green, blue. Полный список находится на сайте W3C
3. Формат RGB: rbg(255, 87, 51). Первым значением указывается количество красного цвета, вторым значением количество синего и третьим значением количество зелёного

<p class="text-white">Я белый текст</p>

Свойство наследуется, то есть если его указать на целый блок, то весь текст в нём будет указанного цвета

<div class="text-orange">
  <p>Я оранжевый текст</p>
  <p>И я оранжевый текст</p>
</div>

Изменяйте свой внутренний мир, чтобы изменился внешний.

Нико Бауман

Цвет текста задаёт CSS-свойство color:

p {
  color: red;
}

Белый текст: color: white; или color: #fff;.

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

Код цвета из макета копируют в Figma: выделите текст, значение HEX будет в панели справа.

Цвет для одного элемента

Через класс:

<p class="note">Текст заметки</p>

Прямо в HTML, для быстрой проверки:

<p style="color: white; background: #222;">Белый текст на тёмном фоне</p>

Белый текст на белом фоне не видно. Задайте тёмный фон через background.

Цвет всей страницы

color наследуется: если задать его body, он применится ко всему тексту внутри.

body {
  color: #222;
}

Ссылки не наследуют цвет, у них свой стиль браузера. Их красят отдельно:

a {
  color: #0d6efd;
}

a:hover {
  color: #0a58ca;
}

Цвет части текста

<p>Цена: <span class="price">1 990 ₽</span></p>

Если цвет не меняется

• Другое правило сильнее. Откройте DevTools (F12), выберите элемент и посмотрите во вкладке Styles, какое правило зачёркнуто.
• Ошибка в записи: #ff660 с пятью знаками не сработает.
• В проекте подключён Bootstrap или Tailwind: там цвет задают классами, например text-white.

Цвета, наследование и приоритет стилей разбирают на курсе «Профессиональная верстка».