Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які способи задання кольору підтримує CSS?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**CSS підтримує кілька способів задання кольору**: назви (`red`), HEX (`#ff0000`), RGB/RGBA, HSL/HSLA, а також новіші функції CSS Color 4 (`hwb()`, `lab()`, `oklch()`, `color()`), плюс `currentColor` і `transparent`. **Ключове:** сучасні моделі, як-от `oklch()` та `color()`, дають точнішу кольоропередачу на сучасних дисплеях, наприклад P3.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняCSS підтримує кілька способів задання кольору. Основні групи, колір за іменем, числові моделі, функції, а також прозорість. Ось повний перелік: --- ### **1. За іменем (named colors)** CSS дозволяє використовувати наперед визначені назви кольорів: ```css color: red; background: royalblue; ``` Підтримується близько **140 стандартних імен** (white, black, green, tomato та ін.). --- ### **2. HEX-формат** Шістнадцятковий запис: ```css color: #FF0000; /* Червоний */ color: #F00; /* Короткий запис */ color: #FF000080; /* З альфа-каналом (прозорість) */ ``` Формати: - `#RRGGBB` - `#RGB` - `#RRGGBBAA` - `#RGBA` --- ### **3. RGB / RGBA** Функціональний запис кольору в моделі RGB: ```css color: rgb(255, 0, 0); color: rgba(255, 0, 0, 0.5); /* 0.5, прозорість */ ``` Можливий запис з відсотками: ```css color: rgb(100%, 0%, 0%); ``` --- ### **4. HSL / HSLA** Відтінок, насиченість і світлота: ```css color: hsl(0, 100%, 50%); color: hsla(0, 100%, 50%, 0.3); ``` --- ### **5. Функції рівня CSS Color 4** | Формат | Приклад | |---|---| | `hwb()` | `color: hwb(0 0% 0% / 0.5);` | | `lab()` | `color: lab(54% 80 67);` | | `lch()` | `color: lch(54% 106 40);` | | `oklab()` | `color: oklab(40% 0.1 0.1);` | | `oklch()` | `color: oklch(40% 0.15 45);` | | `color()` | `color: color(display-p3 1 0 0 / 0.6);` | Ці моделі дають точну кольоропередачу, особливо на сучасних дисплеях (наприклад, P3). --- ### **6. Система** `currentColor` Успадковує поточний колір тексту: ```css border-color: currentColor; ``` --- ### **7. Прозорий колір** ```css color: transparent; ``` --- ### **Підсумок** CSS підтримує такі способи задання кольору: | Спосіб | Приклад | |---|---| | Назви кольорів | `red` | | HEX | `#ff0000`, `#f00`, `#ff000080` | | RGB/RGBA | `rgb()`, `rgba()` | | HSL/HSLA | `hsl()`, `hsla()` | | HWB | `hwb()` | | Lab / Lch | `lab()`, `lch()` | | Oklab / Oklch | `oklab()`, `oklch()` | | color() | `color(display-p3 …)` | | currentColor | `currentColor` | | transparent | `transparent` | ---Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.