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 чи більший.

• WebAIM: Інструмент перевірки контрасту кольору
• Розуміння WCAG, пояснення Настанов 1.4
• Розуміння критерію успіху 1.4.3 | W3C розуміння WCAG 2.0

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

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

<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%);
}

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

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

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

• Тип даних <color>
• Інші пов'язані з кольором властивості: background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, column-rule-color і print-color-adjust
• Застосування кольору до елементів HTML за допомогою CSS
• WCAG – колірний контраст