Html css стили color

CSS-свойство color

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

⭐ Поддержка браузерами свойства color

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 используется для определения текущего цвета элемента.

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

Этот текст будет с изменённым цветом.
 

Этот блок будет с изменённым фоновым цветом.
 

Этот блок будет с изменённым цветом границы.
 

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

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

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

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

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

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

Источник

color

The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color .

Try it

For an overview of using color in HTML, see Applying color to HTML elements using CSS.

Syntax

/* Keyword values */ color: currentcolor; /* values */ color: red; color: orange; color: tan; color: rebeccapurple; /* values */ color: #090; color: #009900; color: #090a; color: #009900aa; /* values */ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34 12 64 / 60%); color: rgba(34.6 12 64 / 30%); /* values */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); /* values */ color: hwb(90 10% 10%); color: hwb(90 10% 10% / 0.5); color: hwb(90deg 10% 10%); color: hwb(1.5708rad 60% 0%); color: hwb(0.25turn 0% 40% / 50%); /* Global values */ color: inherit; color: initial; color: revert; color: revert-layer; color: unset; 

The color property is specified as a single value.

Note that the value must be a uniform color . It can’t be a , which is actually a type of .

Values

Sets the color of the textual and decorative parts of the element.

Sets the color to the element’s color property value. However, if set as the value of color , currentcolor is treated as inherit .

Accessibility concerns

It is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Formal definition

Initial value	canvastext
Applies to	all elements and text. It also applies to ::first-letter and ::first-line .
Inherited	yes
Computed value	computed color
Animation type	by computed value type

Formal syntax

Examples

Making text red

The following are all ways to make a paragraph’s text red:

p  color: red; > p  color: #f00; > p  color: #ff0000; > p  color: rgb(255, 0, 0); > p  color: rgb(100%, 0%, 0%); > p  color: hsl(0, 100%, 50%); > /* 50% translucent */ p  color: #ff000080; > p  color: rgba(255, 0, 0, 0.5); > p  color: hsla(0, 100%, 50%, 0.5); > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник