Які способи задання кольору підтримує CSS?
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 |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.