Как указать цвет в CSS. Свойство color

CSS-свойство color позволяет задавать цвет текста и фона элемента на веб-странице.

Синтаксис

selector {
  color: value;
}

selector — это селектор элемента, к которому нужно применить стили, color — название свойства, а value — значение цвета.

Наследование

Свойство color является наследуемым, что означает, что дочерние элементы наследуют цвет текста от своих родительских элементов, если оно не переопределено у них самих.

Значения свойства color

Значение может быть установлено для любого элемента HTML, включая текст, ссылки, заголовки и другие элементы. Оно может быть задано как внутри тега HTML, так и внутри файла CSS.

Подробно про цветовые форматы рассказали в статье.

Свойство color может принимать следующие значения.

Название цвета

Значение свойства color может быть задано названием цвета на английском языке, например, red — красный, blue — синий и так далее.

RGB — Red, Green, Blue

Модель цвета, основанная на комбинации красного, зелёного и синего цветов. Пример: rgb(255, 0, 0), где первое число представляет значение красного цвета, второе число — зелёного цвета, а третье число — синего цвета. Каждое значение может быть в диапазоне от 0 до 255.

RGBA — Red, Green, Blue, Alpha

Расширение RGB, которое, кроме трёх цветов, включает значение прозрачности. Пример: rgba(255, 0, 0, 0.5), где первые три числа — значения RGB, а последнее число — значение прозрачности, которое может быть в диапазоне от 0 — полностью прозрачный до 1 — полностью непрозрачный.

HSL — Hue, Saturation, Lightness

Модель цвета, основанная на оттенке — hue, насыщенности — saturation и яркости — lightness цвета. Пример: hsl(0, 100%, 50%), где первое число — значение оттенка в градусах, второе число — значение насыщенности в процентах, а третье число — значение яркости в процентах.

HSLA — Hue, Saturation, Lightness, Alpha

Расширение HSL, которое также включает в себя значение прозрачности. Пример: hsla(0, 100%, 50%, 0.5), где первые три числа — значения HSL, а последнее число — значение прозрачности, которое может быть в диапазоне от 0 — полностью прозрачный до 1 — полностью непрозрачный.

HEX — Hexadecimal

Формат цвета, основанный на шестнадцатеричном коде цвета. Пример: #FF0000, где первые две цифры обозначают значение красного цвета в шестнадцатеричном формате от 00 до FF, следующие две цифры обозначают значение зеленого цвета, а последние две цифры обозначают значение синего цвета.

В CSS также существует несколько специальных ключевых слов, которые можно использовать в качестве значения свойства color. Например, transparent означает полностью прозрачный цвет, а currentColor используется для определения текущего цвета элемента.

Примеры использования

Изменение цвета текста:

<div class="text-color">Этот текст будет с изменённым цветом.</div>

.text-color {
  color: red;
}

Изменение цвета фона:

<div class="background-color">Этот блок будет с изменённым фоновым цветом.</div>

.background-color {
  background-color: #f5f5f5;
}

Изменение цвета границы:

<div class="border-color">Этот блок будет с изменённым цветом границы.</div>

.border-color {
  border: 2px solid blue;
}

Нюансы использования

Контраст. При выборе цвета текста для ссылок, желательно использовать контрастный цвет, который заметно отличается от цвета обычного текста.

✔️ Хорошо

❌ Плохо

Читаемость. При использовании различных стилей текста, например, жирный или курсив, необходимо убедиться, что цвет текста остаётся читаемым и насыщенным.

✔️ Хорошо

❌ Плохо

Восприятие. Цвет текста может влиять на эмоциональное восприятие контента, поэтому необходимо выбирать его в зависимости от цели и настроения страницы.

Материалы по теме

• CSS-свойство position
• CSS-свойство height
• Свойство vertical-align

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.