HTML цвета

Чтение — около 8 минут· без учёта практики

В предыдущем уроке мы задавали цвета сайта Тони именами: linen, saddlebrown, gray. У каждого из этих цветов есть имя, но цвет можно записать и по-другому. В этом уроке мы разберём основные способы записи цвета и научимся задавать нужные оттенки.

Сразу обращу ваше внимание: в дальнейшем работа с цветом элемента происходит в основном с помощью CSS. В рамках изучения HTML мы познакомимся со способами указания цвета во встроенных стилях, а подробнее рассмотрим их в учебнике CSS в уроке «Цветовое оформление в CSS».

В этом уроке мы рассмотрим следующие способы записи цвета:

шестнадцатеричная запись HEX;
функция rgb() или rgba();
функция hsl() или hsla();
имя цвета (ключевое слово).

Шестнадцатеричные цвета

Шестнадцатеричная запись цвета имеет вид #RRGGBB, где каждая пара цифр задаёт один цветовой канал:

RR — красный;
GG — зелёный;
BB — синий.

В шестнадцатеричной системе используются цифры 0–9 и буквы A–F: буквы обозначают значения от 10 до 15. Значение каждого канала находится в диапазоне от 00 до FF — это от 0 до 255 в привычной десятичной системе. Чем больше значение, тем выше интенсивность канала.

Например, #0000FF задаёт синий цвет: синий канал имеет максимальное значение FF, а красный и зелёный — минимальное 00. Регистр букв не важен: #0000ff и #0000FF — один и тот же цвет.

Если все три канала равны 00, получается чёрный цвет — #000000. Если все равны FF, получается белый — #FFFFFF. Одинаковые промежуточные значения трёх каналов дают оттенки серого, например #808080. Чем больше эти значения, тем светлее серый.

Шестнадцатеричное значение можно сократить до трёх символов, если каждая из трёх пар состоит из одинаковых символов. Например, #0000FF можно записать как #00F.

Шестнадцатеричные значения цвета

Замените в первом абзаце #FF0000 на #008000, а в третьем #00F на #F80 — абзацы станут зелёным и оранжевым.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Шестнадцатеричные значения цвета</title>
  </head>
  <body>
    <p style="color: #FF0000">Я абзац красного цвета</p>
    <p style="color: #EE82EE">Я абзац фиолетового цвета</p>
    <p style="color: #00F">Я абзац синего цвета: #00F — то же, что #0000FF</p>
  </body>
</html>

RGB цвета

Значение цвета RGB задаётся функцией rgb() с тремя параметрами в следующем порядке: R (красный), G (зелёный), B (синий). Каждый параметр определяет интенсивность своего канала и может быть целым числом от 0 до 255 — это те же значения, что 00–FF в шестнадцатеричной записи.

Например, значение rgb(0, 255, 0) отображается как ярко-зелёный цвет, так как зелёный канал установлен в максимальное значение 255, а красный и синий — в 0.

Значения цвета RGB

Измените в первом абзаце rgb(0, 128, 0) на rgb(0, 255, 0) — зелёный станет ярче. Затем задайте всем трём каналам одинаковое значение, например rgb(100, 100, 100), и получите серый цвет.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Значения цвета RGB</title>
  </head>
  <body>
    <p style="color: rgb(0, 128, 0)">Я абзац зелёного цвета</p>
    <p style="color: rgb(255, 0, 0)">Я абзац красного цвета</p>
    <p style="color: rgb(255, 165, 0)">Я абзац оранжевого цвета</p>
  </body>
</html>

Прозрачность: RGBA

Запись RGBA добавляет к трём каналам RGB четвёртый:

R означает Red (красный);
G означает Green (зелёный);
B означает Blue (синий);
A означает Alpha (альфа-канал — степень смешивания с фоном).

Альфа-канал задаёт уровень прозрачности значением от 0 до 1, где:

0 — цвет полностью прозрачный, невидимый;
1 — цвет непрозрачный.

Прозрачность цвета: альфа-канал

Цвет у всех абзацев один и тот же — красный, меняется только альфа-канал. Чем меньше значение, тем сильнее сквозь текст просвечивает белый фон страницы.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Прозрачность цвета: альфа-канал</title>
  </head>
  <body>
    <p style="color: rgba(255, 0, 0, 0.1)">Я абзац красного цвета?</p>
    <p style="color: rgba(255, 0, 0, 0.2)">Я абзац красного цвета?</p>
    <p style="color: rgba(255, 0, 0, 0.3)">Я абзац красного цвета?</p>
    <p style="color: rgba(255, 0, 0, 0.4)">Я абзац красного цвета?</p>
    <p style="color: rgba(255, 0, 0, 0.5)">Я абзац красного цвета?</p>
    <p style="color: rgba(255, 0, 0, 0.6)">Я абзац красного цвета?</p>
    <p style="color: rgba(255, 0, 0, 0.7)">Я абзац красного цвета?</p>
    <p style="color: rgba(255, 0, 0, 0.8)">Я абзац красного цвета?</p>
    <p style="color: rgba(255, 0, 0, 0.9)">Я абзац красного цвета?</p>
    <p style="color: rgba(255, 0, 0, 1)">Я абзац красного цвета?</p>
  </body>
</html>

Сейчас функция rgb() тоже принимает четвёртый параметр, поэтому rgb(255, 0, 0, 0.5) и rgba(255, 0, 0, 0.5) — один и тот же цвет. Запись rgba() по-прежнему работает во всех браузерах, и её часто можно встретить в готовом коде. Прозрачность есть и у шестнадцатеричной записи: четвёртая пара цифр задаёт альфа-канал, например #FF000080 — красный с прозрачностью около 50%.

В современной записи компоненты разделяются пробелами, а альфа-канал указывается после косой черты: rgb(255 0 0 / 50%) — тот же полупрозрачный красный. Вместо 50% можно написать 0.5. Без альфа-канала запись rgb(255 0 0) задаёт непрозрачный красный. Запись через запятые тоже корректна; не смешивайте два синтаксиса внутри одной функции.

Альфа-канал делает прозрачным только тот цвет, к которому он относится. Например, у полупрозрачного цвета фона текст элемента остаётся непрозрачным. Сделать прозрачным весь элемент вместе с содержимым можно CSS-свойством opacity, которое мы рассмотрим в учебнике CSS.

HSL цвета

Ещё один способ задания цвета — HSL. Это аббревиатура, которая объединяет первые буквы трёх признаков цвета:

Hue — тон;
Saturation — насыщенность;
Lightness — светлота.

При этом используется следующий синтаксис:

CSS

hsl(тон, насыщенность, светлота)

Первое значение — это тон, который указывается в градусах от 0 до 360. Градусы соответствуют цвету на круге оттенков, изображённом ниже:

Красный цвет соответствует значениям 0 и 360, жёлтый — 60, зелёный — 120, голубой — 180, синий — 240, фиолетовый — 300 и так далее.

Второе значение (насыщенность) определяет, насколько чистым является цвет. Оно указывается в процентах от 0% до 100%, где 0% — полное отсутствие насыщенности (серый), а 100% — чистый и яркий цвет.

Третье значение (светлота) указывается в процентах от 0% (чёрный) до 100% (белый); среднее значение 50% даёт чистый цвет при насыщенности 100%. Например, hsl(0, 100%, 50%) — красный, а hsl(0, 0%, 50%) — серый: одной светлоты недостаточно, чтобы определить цвет.

Тон, насыщенность и светлота HSL

Тон у всех образцов один — красный (0). В первой группе меняется только насыщенность, во второй — только светлота. Подписи показывают исходные значения. Замените тон 0 на 240 в любом образце — красный сменится синим.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Тон, насыщенность и светлота HSL</title>
  </head>
  <body>
    <h2>Насыщенность</h2>
    <p style="background-color: hsl(0, 0%, 50%)">hsl(0, 0%, 50%)</p>
    <p style="background-color: hsl(0, 25%, 50%)">hsl(0, 25%, 50%)</p>
    <p style="background-color: hsl(0, 50%, 50%)">hsl(0, 50%, 50%)</p>
    <p style="background-color: hsl(0, 75%, 50%)">hsl(0, 75%, 50%)</p>
    <p style="background-color: hsl(0, 100%, 50%)">hsl(0, 100%, 50%)</p>
    <h2>Светлота</h2>
    <p style="background-color: hsl(0, 100%, 10%); color: white">hsl(0, 100%, 10%)</p>
    <p style="background-color: hsl(0, 100%, 30%); color: white">hsl(0, 100%, 30%)</p>
    <p style="background-color: hsl(0, 100%, 50%)">hsl(0, 100%, 50%)</p>
    <p style="background-color: hsl(0, 100%, 70%)">hsl(0, 100%, 70%)</p>
    <p style="background-color: hsl(0, 100%, 90%)">hsl(0, 100%, 90%)</p>
  </body>
</html>

HSL удобен, когда нужно получить оттенки одного цвета: достаточно менять светлоту, оставляя тон прежним. Так проще подобрать, например, светлый фон и тёмный текст одного тона.

HSLA цвета

По аналогии с RGB, HSL поддерживает прозрачность: четвёртый параметр — альфа-канал со значением от 0 до 1 (от невидимого до полностью непрозрачного). Такой формат называется HSLA:

HTML

<p style="color: hsla(0, 100%, 50%, 0.5)">Полупрозрачный красный текст</p>

Как и rgb(), функция hsl() принимает четвёртый параметр, поэтому hsl(0, 100%, 50%, 0.5) задаёт тот же цвет.

Современная запись устроена так же, как у rgb(): hsl(0 100% 50% / 50%) — тот же полупрозрачный красный. Компоненты разделены пробелами, альфа-канал — косой чертой. Если прозрачность не нужна, достаточно hsl(0 100% 50%).

Имена цветов

Кроме перечисленных способов, существуют предопределённые (стандартные) цвета, которые можно указать по имени. Мы уже использовали такие цвета в предыдущем уроке, а полный перечень вы найдёте в справочнике цветов. Регистр в имени цвета не важен: Red и red — один цвет.

Один цвет в разных записях
HEX	RGB	Имя
`#FF0000`	`rgb(255, 0, 0)`	`red`
`#00FF00`	`rgb(0, 255, 0)`	`lime`
`#008000`	`rgb(0, 128, 0)`	`green`
`#0000FF`	`rgb(0, 0, 255)`	`blue`

Имена цветов

Подписи показывают исходные цвета. Замените saddlebrown в третьем абзаце на шестнадцатеричное значение #8B4513 — цвет не изменится.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Имена цветов</title>
  </head>
  <body>
    <p style="color: green">green — зелёный, #008000</p>
    <p style="color: lime">lime — ярко-зелёный, #00FF00</p>
    <p style="color: saddlebrown">saddlebrown — коричневый, #8B4513</p>
    <p style="background-color: khaki">khaki — хаки, #F0E68C</p>
  </body>
</html>

Контраст текста и фона

Выбирая цвета, проверяйте, что текст хорошо читается на своём фоне. Светло-серый или жёлтый текст на белом фоне трудно прочитать человеку со слабым зрением, на ярком солнце или на тусклом экране. Читаемость оценивают коэффициентом контраста — отношением яркости текста и фона: от 1:1 (цвета одинаковые) до 21:1 (чёрный на белом). Для обычного текста рекомендуется контраст не меньше 4,5:1, для крупного — не меньше 3:1.

Посчитать контраст вручную сложно, поэтому используйте проверку контраста в генераторе цветов: задайте цвет текста и фона, и инструмент покажет коэффициент и подскажет, проходит ли он проверку. Там же можно перевести цвет из одной записи в другую, например имя цвета в шестнадцатеричное значение.

Не передавайте информацию только цветом: если ошибка в форме выделена лишь красным, её не заметит человек, который плохо различает цвета. Добавляйте к цвету текст или значок.

Проверьте себя

Задание

Тони хочет, чтобы цвета сайта были подобраны аккуратно. В редакторе ниже — сайт из предыдущего урока. В файле index.html:

задайте всем четырём заголовкам разделов <h2> тот же коричневый цвет, что и главному заголовку, но шестнадцатеричным значением — #8B4513;
задайте подвалу <footer> светлый фон значением hsl(30, 50%, 90%);
проверьте в генераторе цветов контраст серой подписи к фотографии (gray) на фоне страницы (linen). Если контраст меньше 4,5:1, замените цвет подписи более тёмным — например, dimgray.

Выполните задание

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Сайт Тони</title>
  </head>
  <body style="background-color: linen">
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1 id="top" style="color: saddlebrown; text-align: center">Привет! Меня зовут Тони</h1>
      <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
      <p>Мой день рождения — <time datetime="2023-09-12">12 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
      <p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
      <ul>
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
      </ul>
      <section>
        <h2 id="toy" class="section-title">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
        <figure>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
          <figcaption style="color: gray">Я и мой канат «Удав»</figcaption>
        </figure>
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
      </section>
      <section>
        <h2>Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands" class="section-title">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
        <details>
          <summary>Почему команды на немецком?</summary>
          <p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
        </details>
      </section>
      <section>
        <h2>Моя любимая книга</h2>
        <p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
        <figure>
          <blockquote>
            <p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
          </blockquote>
          <figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
        </figure>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer>
      <p style="text-align: center"><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/toys.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Игрушки Тони</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <section>
        <h2 id="album">Мой фотоальбом</h2>
        <ul>
          <li>
            <figure>
              <img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
              <figcaption>Я в детстве</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
              <figcaption>С плюшевой белкой</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
              <figcaption>В худи для холодной погоды</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
              <figcaption>Шлейка надета — идём гулять!</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
              <figcaption>Смеюсь над шуткой хозяина</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
              <figcaption>После прогулки</figcaption>
            </figure>
          </li>
        </ul>
      </section>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

Ожидаемый результат: заголовки разделов того же коричневого цвета, что и главный заголовок, у подвала светлый бежевый фон. Контраст gray на linen около 3,5:1 — меньше рекомендованного, поэтому подпись к фотографии стала темнее: у dimgray контраст около 4,9:1.

Продолжите в VS Code

Нажмите «Скачать ZIP» в редакторе выше и распакуйте архив в папку my-site: он содержит все страницы и ресурсы примера с вашими текущими правками. Сохраните структуру папок; перед заменой существующих файлов сохраните копию своей версии сайта.
Откройте index.html в браузере.

Ожидаемый результат: главная страница в браузере выглядит так же, как в редакторе. Если вы выполняли задание без решения, нажмите в редакторе выше «Показать решение» и сравните его со своим кодом.

Дополнительное задание: цвета радуги

Каждое слово фразы «Каждый охотник желает знать, где сидит фазан» уже записано отдельным абзацем. Окрасьте слова в цвета радуги по порядку: красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый. Задание считается выполненным, если вы хотя бы один раз использовали шестнадцатеричное значение, значение RGB, значение HSL и имя цвета.

Окрасьте слова в цвета радуги

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Цвета радуги</title>
  </head>
  <body>
    <p>Каждый</p>
    <p>охотник</p>
    <p>желает</p>
    <p>знать,</p>
    <p>где</p>
    <p>сидит</p>
    <p>фазан</p>
  </body>
</html>

Ожидаемый результат: семь слов столбиком, окрашенных от красного до фиолетового. Обратите внимание, как плохо читается жёлтое слово на белом фоне: проверьте его контраст в генераторе цветов — так выглядит недостаточный контраст.