CSS-свойство color
CSS-свойство color задаёт цвет текстового содержимого и текстовых декораций. Попробуйте примеры и посмотрите результат.
CSS-свойство color задаёт цвет переднего плана элемента — то есть цвет его текстового содержимого и любых текстовых декораций (подчёркивание, надчёркивание, перечёркивание). Оно не влияет на фон, рамки или изображения; для этих целей используются специальные свойства, такие как background-color.
На этой странице описаны синтаксис color, все доступные форматы значений (именованные цвета, hex, RGB/RGBA, HSL/HSLA), механизм наследования color и способы обеспечить читаемость текста. Вы можете просмотреть значения веб-цветов в разделе HTML colors, найти ключевые слова в CSS color names и выбрать нужный оттенок с помощью инструмента Color Picker.
Поскольку color наследуется, установка этого свойства на контейнере каскадируется на весь дочерний текст, если только дочерний элемент не переопределяет его. Поэтому зачастую достаточно объявить его один раз на body. Начальное значение — currentcolor: это ключевое слово, которое разрешается в текущий цвет color — удобно для синхронизации цвета рамок или SVG-заливок с цветом текста.
| Начальное значение | currentcolor |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируемость | Да. Цвет можно анимировать. |
| Версия | CSS1 |
| DOM Syntax | object.style.color = "#1c87c9"; |
Синтаксис
Синтаксис CSS-свойства color
color: color | initial | inherit;Пример свойства color:
Пример CSS-свойства color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Результат
В качестве значения свойства color можно использовать шестнадцатеричные коды, RGB, HSL или именованные цвета. Примечание: начальное значение — currentcolor, то есть свойство наследует цвет текста от родительского элемента.
Пример свойства color с именованным цветом:
Пример CSS-свойства color с именованным цветом
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with a named blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Пример свойства color с шестнадцатеричным значением:
Пример CSS-свойства color с шестнадцатеричным значением
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
<p>This is some paragraph for example.</p>
</body>
</html>Пример свойства color со значением RGB:
Пример CSS-свойства color со значением RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a RGB color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Пример свойства color со значением HSL:
Пример CSS-свойства color со значением HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with an HSL color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Выбор формата цвета
Все четыре формата могут описывать один и тот же цвет — выбор зависит от читаемости и того, что именно нужно контролировать:
- Именованные цвета (
blue,tomato,rebeccapurple) наиболее читаемы, но ограничены фиксированным списком ключевых слов. Хорошо подходят для быстрых прототипов. - Шестнадцатеричный формат (
#8ebf42) наиболее распространён в производственном коде. Три пары символов — красный, зелёный и синий в шестнадцатеричной системе. 4-й или 8-й символ добавляет альфа-канал:#8ebf4280соответствует ~50% непрозрачности. - RGB (
rgb(142, 191, 66)) использует те же каналы, что и hex, но в десятичной системе — легче читать и генерировать программно. - HSL (
hsl(89, 43%, 51%)) описывает тон (0–360°), насыщенность и яркость. Наиболее интуитивен при ручной настройке цвета — можно изменить яркость для состояния hover, не затрагивая тон.
Прозрачность с помощью RGBA и HSLA
Добавьте альфа-канал с помощью rgba() или hsla(), чтобы сделать текст полупрозрачным. Альфа — число от 0 (полностью прозрачный) до 1 (полностью непрозрачный):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.faded {
color: rgba(28, 135, 201, 0.5);
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p class="faded">This paragraph is 50% transparent blue.</p>
</body>
</html>Чтобы сделать полупрозрачным весь элемент (текст, рамки, фон и дочерние элементы), а не только цвет текста, используйте свойство opacity.
Выбор цвета текста — это также решение в области доступности. Текст и его фон должны иметь достаточный контраст для людей со слабым зрением: WCAG требует соотношения контрастности не менее 4.5:1 для обычного текста и 3:1 для крупного текста. Светло-серый на белом фоне может выглядеть элегантно, но зачастую не проходит этот тест.
Значения
| Значение | Описание | Пример |
|---|---|---|
| color | Задаёт цвет текста и текстовых декораций. Можно использовать имена цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). | Пример » |
| initial | Устанавливает значение свойства по умолчанию. | Пример » |
| inherit | Наследует значение свойства от родительского элемента. |