color

Властивість CSS color (колір) задає значення кольору переднього плану тексту елемента й оздоблення цього тексту, а також задає значення currentcolor. currentcolor може використовуватися як непряме значення на інших властивостях, а також як усталене значення інших властивостей кольору, як то border-color.

Спробуйте його в дії

Огляд використання кольорів у HTML – на сторінці Застосування кольору до елементів HTML за допомогою CSS.

Синтаксис

/* Значення – ключові слова */
color: currentcolor;

/* Значення <named-color> */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* Значення <hex-color> */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* Значення <rgb()> та історичні значення <rgba()> */
color: rgb(34, 12, 64);
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.6);
color: rgb(34.6 12 64 / 60%);
color: rgba(34.6 12 64 / 60%);

/* Значення <hsl()> та історичні значення <hsla()> */
color: hsl(30, 100%, 50%);
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.2 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* Значення <hwb()> */
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%);

/* Глобальні значення */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;

Властивість color задається у вигляді одного значення <color>.

Зверніть увагу, що значення мусить бути однорідним кольором. Воно не може бути градієнтом, котрий насправді є різновидом зображення.

Значення

<color>

Задає колір текстових і оздобних частин елемента.

currentcolor

Задає колір як значення властивості color елемента. Проте якщо це значення вжито як значення color, то currentcolor обробляється як inherit.

Доступність

Важливо пересвідчитись, що співвідношення контрасту між текстом та тлом, на якому цей текст розташований, достатньо високе, аби люди з розладами зору мали змогу прочитати вміст сторінки.

Співвідношення контрасту кольору визначається шляхом порівняння значень світності кольорів тексту і тла. Аби виконати Настанови доступності вебвмісту (WCAG), необхідне співвідношення 4.5:1 для текстового вмісту і 3:1 для великого тексту, як то заголовків. Великий текст визначений як 18.66px і грубий чи більший, або 24px чи більший.

Формальне визначення

Формальний синтаксис

<color>

де
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

де
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

де
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Приклади

Червоний текст

Наступні записи – способи зробити текст абзацу червоним:

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% прозорості */
p {
  color: #ff000080;
}
p {
  color: rgb(255 0 0 / 50%);
}
p {
  color: hsl(0 100% 50% / 50%);
}

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
color
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 3
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0

Дивіться також