CSS-свойство color
- 4 мая 2023
CSS-свойство color
позволяет задавать цвет текста и фона элемента на веб-странице.
⭐ Поддержка браузерами свойства 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-свойство border
Цветные, точечные, пунктирные рамки и многое другое.
- 31 мая 2023

Как сделать анимацию любой сложности. Свойство animation
Примеры и нюансы использования.
- 29 мая 2023

Как создать тени на CSS: свойство box-shadow
Внутренние, внешние, с градиентом — на все случаи жизни.
- 28 мая 2023

Как установить стиль шрифта. CSS-свойство font
Семейства шрифтов, начертание и размеры.
- 27 мая 2023

Как работает transform в CSS на примерах
Интерактивная статья — попробуйте анимировать сами.
- 23 мая 2023

Как оформить текст: 11 главных CSS-свойств
Инструкция для любителей поиграться со шрифтами.
- 23 мая 2023




Как создать сетки на CSS Grid Layout
Чтобы сайт был красивым, а вёрстка не ломалась.
- 17 мая 2023