Чтобы изменить цвет текста в HTML, задайте элементу CSS-свойство color. Для одного слова хватит обёртки <span style="color: #c62828">слово</span>, повторяющиеся акценты задают классом в таблице стилей. Цвет пишут названием (red), HEX-кодом (#ff0000), через rgb() или hsl().
Тег <font color> из старых учебников браузеры ещё понимают, но спецификация HTML его запрещает. Если CSS для вас пока в новинку, начните с разбора что такое CSS и как подключить CSS к HTML. Системно свойства оформления разбирают на курсах по CSS.
CheckroiПодборка курсов по CSS181 курс • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Как изменить цвет текста в HTML: пошаговая инструкция
Покажем на примере: в предложении «Это важно знать» нужно выделить красным одно слово.
- Откройте HTML-файл в редакторе. Подойдёт любой, от Блокнота до VS Code, а если файла ещё нет, создайте его по инструкции про index.html.
- Оберните нужное слово в тег
<span>. Он ничего не меняет сам по себе и нужен, чтобы повесить стиль на кусок текста внутри абзаца. - Добавьте тегу атрибут
styleсо свойствомcolorи значением цвета. - Сохраните файл и обновите страницу в браузере.
<p>Это <span style="color: #c62828">важно</span> знать</p>Если покрасить нужно весь абзац, span не нужен: атрибут ставят прямо на <p>, <h2> или <div>. Свойство color наследуется, поэтому вложенный текст станет того же цвета. Это записано в описании свойства color: «Inherited: yes».
Где задать цвет: в теге, в head или в отдельном файле
Атрибут style удобен для одного слова. Когда акцентов на странице десять, их собирают в одно правило, и цвет потом меняется в одной строке.
| Способ | Как выглядит | Когда подходит |
|---|---|---|
| Атрибут style | <span style="color: red"> |
Разовое выделение, письмо, черновик |
| Тег style в head | .accent { color: red; } |
Одна страница с повторяющимися акцентами |
| Внешний файл .css | <link rel="stylesheet" href="style.css"> |
Сайт из нескольких страниц |
Класс в теге style
Правило пишут один раз, а потом вешают класс на любые слова:
<head>
<style>
.accent { color: #c62828; }
</style>
</head>
<body>
<p>Срок сдачи <span class="accent">до пятницы</span>, оплата <span class="accent">до 10 числа</span></p>
</body>Цвет для всех элементов одного типа
Селектор по тегу красит сразу все такие элементы. Например, все подзаголовки второго уровня станут синими, а основной текст страницы тёмно-серым:
body { color: #333333; }
h2 { color: #1565c0; }Тот же код можно вынести в файл style.css и подключить на всех страницах сайта. Как это сделать и проверить, что стили применились, мы разобрали в статье про три способа подключить CSS.
Как выделить цветом отдельные слова
Кроме span есть теги со смыслом, и их тоже можно перекрасить. Выбор зависит от того, зачем вы выделяете слово.
<span>подходит, когда цвет чисто оформительский и смысла не несёт.<strong>с цветом нужен для важного по смыслу: тег сообщает о важности и экранным читалкам, а цвет добавляет акцент. Про разницуbиstrongесть отдельный разбор о жирном тексте в HTML.<mark>выделяет фрагмент маркером. В Chrome без всяких стилей он получает жёлтый фон и чёрный текст.
Чтобы раскрасить слова разными цветами, у каждого слова должен быть свой span со своим значением:
<p>
<span style="color: #c62828">Красный</span>,
<span style="color: #2e7d32">зелёный</span>,
<span style="color: #1565c0">синий</span>
</p>Цвет фона под словом задаёт отдельное свойство background-color. Его можно сочетать с color в одном атрибуте: style="color: #fff; background-color: #1565c0".
Цвет выделенного мышью текста
Когда пользователь выделяет текст, браузер красит его в свои цвета. Их меняет псевдоэлемент ::selection. По справке MDN, внутри него работают color, background-color, text-decoration и text-shadow, а background-image игнорируется.
::selection { color: #ffffff; background-color: #c62828; }Как записать цвет: название, HEX, RGB и HSL
Один и тот же красный можно записать четырьмя способами, и браузер отрисует их одинаково.
| Запись | Пример | Что важно знать |
|---|---|---|
| Название | red, navy, rebeccapurple |
Регистр не важен: Red и red одинаковы |
| HEX | #ff0000, #f00 |
Шесть знаков или три, если пары повторяются |
| HEX с прозрачностью | #ff000080 |
Последняя пара отвечает за прозрачность |
| RGB | rgb(255 0 0), rgb(255 0 0 / 50%) |
Три канала от 0 до 255, после косой черты прозрачность |
| HSL | hsl(0 100% 50%) |
Тон, насыщенность, светлота: оттенки удобно подбирать вручную |
Что регистр не важен и что значит последняя пара в HEX, сказано в спецификации CSS Color 4: все названия цветов «ASCII case-insensitive», а в восьмизначной записи последняя пара «specifies the alpha component», то есть прозрачность. Как устроены каналы и как перевести RGB в HEX, подробно разобрано в статье про цвета RGB.
На кадре видны две ошибки, которые встречаются чаще других. О них подробнее в разделе ниже.
Почему ссылки и кнопки не меняют цвет вместе с текстом
Вы покрасили блок в фиолетовый, а ссылка внутри осталась синей. Причина в том, что у браузера есть свои стили для ссылок. В разделе спецификации HTML о стилях по умолчанию записано :link { color: #0000EE; } и :visited { color: #551A8B; }, и оно перекрывает цвет, унаследованный от родителя.
С кнопками и полями ввода похоже. В Chrome 157 внутри фиолетового блока <button> и <input> остались с чёрным текстом, а обычный span стал фиолетовым.
Решение: явно попросить эти элементы брать цвет родителя.
a, button, input, textarea, select { color: inherit; }
a:hover { color: #c62828; }Подробнее про оформление ссылок и кнопок есть в разборах тега a и кнопок в HTML.
Как поменять цвет текста через JavaScript
Цвет можно поменять и скриптом: например, подсветить красным статус заказа после ошибки. Есть два способа.
// 1. Записать цвет прямо в style элемента
document.getElementById('status').style.color = '#c62828';
// 2. Добавить класс, у которого уже есть цвет в CSS
document.getElementById('status').classList.add('warning');Во втором варианте цвет остаётся в CSS, а скрипт только переключает класс: оттенок можно поменять, не трогая JavaScript. Если присвоить style.color несуществующее значение, например 'not-a-color', браузер его отбросит и оставит прежний цвет. Ошибки в консоли при этом не будет.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналГрадиентный текст
Буквы с переливом из одного цвета в другой делают тремя строками: фон-градиент, обрезка фона по буквам и прозрачный цвет самого текста.
.gradient {
background: linear-gradient(90deg, #e91e63, #3f51b5);
background-clip: text;
color: transparent;
}Значение text у background-clip по описанию MDN обрезает фон по очертаниям текста. В Chrome 157 код работает и без префикса -webkit-. Градиент ставят на заголовки: в мелком тексте части букв сливаются с фоном.
Какой цвет текста читается: проверяем контраст
Ярко-красный #ff0000 на белом фоне выглядит заметно, но для обычного текста он слишком светлый. Стандарт доступности WCAG 2.2 требует для обычного текста контраст «at least 4.5:1», для крупного 3:1.
Крупным в WCAG считается текст от 18 пунктов или от 14 пунктов жирным. MDN в описании color переводит это в пиксели: от 24px или от 18.66px жирным.
| Цвет на белом | Контраст | Обычный текст |
|---|---|---|
#ff0000 (red) |
4,0:1 | не проходит |
#c62828 |
5,62:1 | проходит |
#ffa500 (orange) |
1,97:1 | не проходит |
#808080 (gray) |
3,95:1 | не проходит |
#767676 |
4,54:1 | проходит |
#0000ff (blue) |
8,59:1 | проходит |
Числа посчитаны по формуле относительной яркости из WCAG. Свою пару цветов удобно проверить в DevTools Chrome: кликните по квадратику цвета рядом со свойством color и разверните раздел Contrast ratio, как показано в документации Chrome.
Ещё одно требование WCAG касается смысла: цвет не должен быть единственным способом передать информацию. Если обязательные поля формы помечены только красным, человек с нарушением цветового зрения их не отличит. Добавьте звёздочку или слово «обязательно». Как подбирать палитру целиком, мы разбирали в статье о цветах для сайта.
Частые ошибки и что с ними делать
Цвет не применился, хотя код выглядит правильно
Чаще всего забыта решётка: color: ff0000. CSS такое значение просто отбрасывает, и текст остаётся чёрным.
Путаницу добавляет старый тег: <font color="ff0000"> без решётки в Chrome красит текст в красный. Для атрибута color тега font браузер применяет особые «rules for parsing a legacy color value», которые прощают такие ошибки. На CSS это не распространяется.
Решение: всегда ставьте # перед HEX-кодом.
Текст пропал совсем
Так бывает, если в HEX-коде четыре знака, например #ff00 вместо #ff0000. По CSS Color 4 четырёхзначная запись означает три канала плюс прозрачность, и последний ноль делает цвет полностью прозрачным. Chrome вычисляет такое значение как rgba(255, 255, 0, 0).
Решение: пересчитайте знаки. Корректная длина HEX-кода: 3, 4, 6 или 8 знаков, но 4 и 8 уже с прозрачностью.
Класс не перекрашивает элемент
Цвет перебивает другое правило. В Chrome 157 при .accent { color: #d32f2f; } и p.note { color: green; } абзац с обоими классами остался зелёным: у селектора из тега и класса специфичность выше, чем у одного класса. Селектор по id перебивает класс, а атрибут style перебивает и то и другое.
Решение: откройте DevTools, выберите элемент и посмотрите, какое правило зачёркнуто. Сделайте свой селектор точнее, а !important оставьте на крайний случай.
!important у родителя не помогает
Абзац с style="color: red !important" стал красным, а span с классом внутри него остался со своим цветом. !important усиливает правило только для того элемента, на котором стоит. Если у потомка есть собственное правило, наследование не срабатывает.
Решение: задавайте цвет тому элементу, который хотите перекрасить, а не его родителю.
Цвет задан тегом font
<font> входит в список устаревших элементов, которые, по спецификации HTML, «must not be used by authors». Браузеры его пока отрисовывают, но валидатор W3C отмечает тег font как ошибку уровня error: элемент устарел, вместо него предлагается CSS. Менять цвет к тому же придётся в каждом теге вручную.
Решение: замените <font color="…"> на <span> с классом. Таким же способом в CSS переводят и размер шрифта, это есть в статье про размер текста в HTML и CSS.
Где освоить CSS системно
С цвета текста обычно начинают знакомство с CSS. Следом идут отступы, сетки, адаптивность и анимации. На этом этапе многие переходят от разрозненных ответов к курсу с практическими заданиями.
Сравнить курсы по CSS можно по цене, длительности и отзывам учеников. Если нужна вся вёрстка целиком, от разметки до адаптивности, смотрите курсы по вёрстке. Пять программ по CSS из каталога:
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| HTML и CSS с нуля Перейти на сайт курса |  Skillbox | 91 626 ₽ | 7635 ₽/мес. | 11 месяцев | Обзор курса |
| Основы вёрстки HTML и CSS Перейти на сайт курса |  Академия Синергия | 32 676 ₽ | 2723 ₽/мес. | 3 месяца | Обзор курса |
| HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса |  HTML Academy | 23 400 ₽ | 3900 ₽/мес. | 2 месяца | Обзор курса |
| HTML и CSS с нуля |  Skypro | 195 160 ₽ | 7972 ₽/мес. | 12 месяцев | Обзор курса |
| Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса |  Бруноям | 36 900 ₽ | 2491 ₽/мес. | 3 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по CSS
