Цвет текста в CSS задаётся свойством color, и записать этот цвет можно тремя основными способами: готовым названием вроде tomato, шестнадцатеричным HEX-кодом вроде #ff6347 или через rgb() с тремя числами - красный, зелёный, синий. Результат везде один и тот же, разница только в удобстве записи.
В этом уроке
Попробуй прямо в этом окне: все три способа дают полноценный цвет, никакой из них не "хуже" другого. Поменяй tomato на любое другое английское название цвета или подставь свой HEX-код вместо #1e90ff - результат обновится сразу.
Именованные цвета - готовые названия
Самый простой способ - написать готовое английское название цвета: red, blue, tomato, dodgerblue. Всего в CSS 148 таких названий - их удобно запомнить, но выбор оттенков ограничен именно этим списком.
color: tomato; - понятно без пояснений, что получится.
color: bright-red; - "придуманное" название, которого нет в списке CSS, браузер его просто не поймёт и цвет останется прежним.
HEX - шестнадцатеричный код
HEX-код начинается с решётки # и обычно состоит из шести символов - по два на красный, зелёный и синий каналы, например #ff6347. Есть и короткая запись из трёх символов, но она подходит не для любого цвета - работает только если каждая пара символов в полной записи одинаковая.
color: #1e90ff; - полная запись из шести символов подходит для любого цвета.
color: 1e90ff; без решётки в начале - без # браузер не распознает это как цвет вообще, правило будет проигнорировано.
RGB - через красный, зелёный, синий
rgb() принимает три числа от 0 до 255 - количество красного, зелёного и синего цвета по отдельности. Ноль везде даёт чёрный, максимум везде - белый, а нужный цвет получается смешиванием трёх чисел.
color: rgb(50, 205, 50); - три числа через запятую, все в одном формате.
color: rgb(50%, 205, 50%); - проценты и обычные числа перемешаны в одном значении, для всех трёх каналов нужно выбрать один формат записи.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Путать color и background-color | color красит только сам текст, а не фон элемента - для фона нужно отдельное свойство background-color | Использовать color для текста, background-color - для фона |
| Забыть решётку # перед HEX-кодом | Без # браузер не распознаёт запись как цвет вообще, и правило просто не сработает | Всегда начинать HEX-код с # |
| Смешивать проценты и числа в одном rgb() | Все три канала должны быть в одном формате - либо все числами 0-255, либо все процентами, а не вперемешку | Выбрать один формат записи для всех трёх значений |
| Думать, что любой 6-значный HEX можно сократить до 3 символов | Короткая запись работает только если каждая пара символов одинаковая (например #1e90ff так не сократить, а #ff0099 - можно, до #f09) | Сокращать только те коды, где действительно каждая пара символов совпадает |
Шпаргалка
| Способ | Пример |
|---|---|
| Именованный цвет | color: tomato; - готовое название из списка CSS |
| HEX, полная запись | color: #1e90ff; - шесть символов после # |
| HEX, короткая запись | color: #f09; - три символа, каждый удваивается (= #ff0099) |
| RGB | color: rgb(50, 205, 50); - три числа 0-255 |
| color vs background-color | color - цвет текста, background-color - цвет фона |
Коротко: отвечаем на вопросы
Сколько всего именованных цветов в CSS?
148 - 16 базовых ещё из CSS1, больше сотни добавленных в CSS Color Module Level 3, и последним - rebeccapurple, добавленный в CSS Color Module Level 4.
В чём разница между color и background-color?
color красит сам текст элемента, а background-color - его фон. Это два разных свойства, и путать их - частая ошибка у новичков.
Можно ли писать HEX-код без решётки в начале?
Нет, решётка # обязательна - без неё браузер не распознает запись как цвет и просто проигнорирует правило.
