Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Как изменить цвет фона

Короткий ответ

Цвет фона задаёт background-color:

<div style="background-color: lightyellow; padding: 12px;">A yellow note</div>

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

Один и тот же цвет можно записать по-разному — выберите удобный формат:

<style>
  .s { padding: 6px 10px; margin-bottom: 4px; color: white; }
</style>
 
<div class="s" style="background-color: teal;">Name: teal</div>
<div class="s" style="background-color: #008080;">Hex: #008080</div>
<div class="s" style="background-color: rgb(0 128 128);">RGB: rgb(0 128 128)</div>
<div class="s" style="background-color: hsl(180 100% 25%);">HSL: hsl(180 100% 25%)</div>

В hsl() удобно подбирать оттенки: меняете последнее число — цвет становится светлее или темнее.

Фон всей страницы

Задайте фон элементу body:

body { background-color: #f5f5f0; }

Короткое свойство background тоже задаёт цвет, но заодно сбрасывает картинку, размер и другие настройки фона. Если меняете только цвет — пишите background-color.

Частая ошибка

Меняют фон и забывают про цвет текста: тёмный текст на тёмно-синем фоне не прочитать. Всегда задавайте color в паре с фоном и проверяйте контраст — в инструментах разработчика он показан рядом с цветом.

Функции из этого ответа

  • background-color — Цвет фона элемента.
  • background — Сокращённая запись всех свойств фона: цвета, картинки, положения, размера и повторения.
  • color — Цвет текста (а также цвет рамок и SVG-значков по умолчанию).
  • rgb() — Цвет из красной, зелёной и синей составляющих, по желанию с прозрачностью.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.