CSS свойство color

❮ Назад Вперед ❯

Свойство color определяет цвет контента и оформления текста. Можете найти веб-цвета в нашем разделе HTML colors и выбрать цвет при помощи нашего инструмента Color Picker. Значение по умолчанию отличается в зависимости от браузера.

Значение по умолчанию	Отличается в зависимости от браузера.
Применяется	Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется	Да
Анимируемое	Да. Цвет анимируем.
Версия	CSS1
DOM синтаксис	object.style.color = "#1c87c9";

Синтаксис

color: color | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .blue {
      color: #1c87c9;
      }                
    </style>
  </head>
  <body>
    <h2>Пример свойства color.</h2>
    <p>Например, какой-либо параграф.</p>
    <p class="blue">Какой-либо параграф с синим цветом.</p>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

Попробуйте сами!

Можно установить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства color.

Пример, где значением является название цвета:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .blue {
      color: blue;
      }                
    </style>
  </head>
  <body>
    <h2>Пример свойства color.</h2>
    <p>Например, какой-либо параграф.</p>
    <p class="blue">Параграф с названием синего цвета.</p>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

Попробуйте сами!

Пример, где установлено значение hexadecimal для свойства color:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .color {
      color: #8ebf42;
      }                
    </style>
  </head>
  <body>
    <h2>Пример свойства color.</h2>
    <p>Например, какой-либо параграф</p>
    <p class="color">Какой-либо параграф со значением hexadecimal (#8ebf42 for green).</p>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

Попробуйте сами!

Пример со значением RGB:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .color {
      color: rgb(142, 191, 66);
      }                
    </style>
  </head>
  <body>
    <h2>Пример свойства color.</h2>
    <p>Например, какой-либо параграф</p>
    <p class="color">Параграф со значением RGB.</p>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

Попробуйте сами!

Пример свойства color со значением HSL:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .color{
      color: hsl(89, 43%, 51%);
      }                
    </style>
  </head>
  <body>
    <h2>Пример свойства color.</h2>
    <p>Например, какой-либо параграф</p>
    <p class="color">Параграф со значением HSL.</p>
    <p>Например, какой-либо параграф.</p>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
color	Определяет цвет текста и текстовых оформлений. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla().
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.