Цвета HTML

Вы уже меняли внешний вид атрибутом style и отмечали смысл форматированием и цитатами. Цвета формируют настроение и читаемость. В этом начальном пути HTML вы практикуете значения цвета внутри style: обычные имена, коды hex и функции rgb(). Полноценные дизайн-системы позже появятся в CSS; здесь вы учитесь правильно читать и писать формы. Когда глаз сразу узнаёт синтаксис, те же цвета легче перенести в общие таблицы стилей, не переучивая «грамматику» значения с нуля.

Что такое значение цвета в HTML?

Значение цвета говорит браузеру, какой цвет применить к CSS-свойству вроде color или background-color. Те же формы работают в inline-style и в таблицах стилей. Новички сначала встречают три практичные формы: читаемое имя (tomato), hex-код (#c0392b) и смесь rgb() (rgb(192, 57, 43)). Они могут описывать один и тот же оттенок разными записями. Думайте о значении как о «рецепте» цвета; свойство решает, куда этот рецепт применить — к тексту, фону или позже к другим местам в CSS. Освоив рецепт сейчас, вы избежите путаницы, когда правила уйдут из атрибута в файл .css.

Прямой ответ

Задайте текст через color, а область за содержимым — через background-color. Выберите форму значения под момент: имя для быстрых демо, hex когда копируете из палитры, или rgb(), когда думаете каналами красный/зелёный/синий от 0 до 255. Держите контраст достаточно сильным для чтения. По мере роста проектов переносите общие цвета в CSS вместо длинных inline-атрибутов на каждой странице. На учебной странице inline удобен, чтобы сразу увидеть эффект; на сайте из многих страниц повторять один и тот же hex десятки раз замедляет правки и ведёт к расхождениям.

Формы значений одним взглядом

Цвета по именам

Именованные цвета — самый дружелюбный старт. Аккуратно сочетайте цвет текста и фона, чтобы слова оставались читаемыми. Имена вроде darkgreen, navy и lightblue произносятся вслух и помогают запомнить эффект без калькулятора цвета. Полезный набор всё же ограничен: не каждое английское слово цвета — допустимое CSS-имя. Начинайте с имён, которые уже сработали у вас, и проверяйте в браузере, прежде чем считать их «очевидными».

Читаем пример

• Первый абзац меняет только цвет текста
• Второй задаёт и фон, и текст, чтобы тёмно-синий оставался ясным на светло-голубом
• Имена в CSS нечувствительны к регистру, но нижний регистр — ясная привычка
• Не каждое английское слово цвета — допустимое CSS-имя: держитесь обычных проверенных имён
• Если сменить только фон и оставить текст по умолчанию браузера, контраст может провалиться без предупреждения

Hex-цвета

Hex-цвет обычно начинается с # и шести символов из 0–9 и a–f. Пары означают красный, зелёный и синий. #000000 — чёрный; #ffffff — белый. Каталог запоминать не нужно — берите из палитры и вставляйте аккуратно. Многие дизайн-инструменты по умолчанию показывают hex, поэтому эта форма часто появляется при копировании из макета. Одна пропущенная цифра или забытый # могут заставить значение тихо не сработать — относитесь к hex как к короткому коду, который стоит глазами проверить перед сохранением.

Советы по hex

• Сохраняйте # — одно 336699 в форме этого урока не то же самое, что #336699
• Только допустимые hex-цифры; буквы заканчиваются на f
• Короткий трёхзначный hex в CSS есть (#333), но на этом этапе курса достаточно шестизначных кодов
• Перепроверяйте копирование/вставку, чтобы пропущенная цифра не сломала цвет тихо
• #000000 и #ffffff — полезные якоря: помогают почувствовать тёмный и светлый края шкалы

Цвета rgb()

Функция rgb() смешивает красный, зелёный и синий числами от 0 до 255. rgb(255, 0, 0) — чистый красный. Эта форма удобна, когда вы меняете один канал за раз — например, поднимаете только зелёный, оставляя красный и синий прежними. В учебных демо rgb() делает видимой идею «смеси трёх светов»; в реальной работе это та же грамматика, что вы увидите в CSS. Можно описать тот же оттенок, что имя или hex, если каналы совпадают.

Связыва форм

Один и тот же оттенок часто можно записать именем, hex или rgb. Берите одну форму на демо, чтобы глаз выучил синтаксис. Дальше в CSS появятся и другие записи; эти три закрывают раннюю практику HTML. Когда в палитре видите #c0392b, а в другом месте rgb(192, 57, 43), помните: это может быть один и тот же красный — отличается запись, не обязательно цвет. Тренировка трёх форм сейчас убирает ощущение «трёх разных языков», когда вы перейдёте к таблицам стилей.

Контраст и читаемость

Допустимый цвет всё ещё может быть плохим выбором. Светло-жёлтый текст на белом может разобраться парсером и всё равно плохо читаться. Когда задаёте и color, и background-color, проверьте, что текст выделяется. На реальных сайтах контраст — часть доступности: начните привычку уже на маленьких демо. «Красивый» стиль, который заставляет читателя напрягаться, не выполняет задачу страницы. Простое правило — тёмное на светлом (или наоборот с осторожностью) — убирает большую часть проблем читаемости на старте.

Практика в редакторе

1. Создайте три коротких абзаца под заголовком.
2. Окрасьте текст первого именем (teal или похожим).
3. Окрасьте текст второго hex-значением.
4. Третьему задайте background-color через rgb() и при необходимости тёмный color для контраста.
5. Сохраните и обновите. Убедитесь, что каждая форма работает.
6. Намеренно сломайте один hex (уберите цифру), обновите, исправьте — так тренируется аккуратный синтаксис.
   Считайте каждый шаг мини-экспериментом: меняйте по одной вещи, чтобы видеть, какое значение сломалось. Если все три формы сработали в одном документе, у вас уже есть прочная модель для будущих демо и перехода к общему CSS.

Ошибки, которые прячут или портят цвета

• Путать color (текст) и background-color (за текстом)
• Писать #33, #gggggg или hex без #, когда имелся в виду шестизначный код
• Низкоконтрастные сочетания, которые выглядят «стильно», но плохо читаются
• Собирать весь фирменный стиль только повторяющимися inline-стилями вместо изучения общего CSS дальше
• Считать любое английское слово цвета допустимым CSS-именем без проверки
• Скопировать шестизначный hex и потерять # или символ при вставке
  Такие ошибки часты, потому что страница может «почти» выглядеть правильно: HTML остаётся допустимым, но цвет не появляется или текст нечитаем. Когда цвет «ничего не делает», сначала проверьте свойство, затем синтаксис значения и наконец контраст.

Итог

• Используйте color и background-color в style для быстрых демо цвета
• Значения: имена, hex (#RRGGBB) или rgb(r, g, b)
• Пары hex соответствуют красному, зелёному и синему; каналы rgb идут от 0 до 255
• Предпочитайте читаемый контраст, когда текст лежит на цветном фоне
• Переносите общие цвета в CSS по мере роста страниц и проектов
• Проверяйте сохранением и обновлением; аккуратно правьте синтаксис, когда цвет «ничего не делает»
  С тремя формами и двумя ясными свойствами вы уже можете предсказуемо окрашивать HTML-демо. Логичный следующий шаг — собрать те же правила в общем месте — CSS — чтобы не повторять одно значение в каждом абзаце.