Какие нотации цветов в CSS важны на практике и как их применять?

На практике важны HEX, `rgb()`, `hsl()`, современный `oklch()` и ключевое слово `currentColor`.

Как применять

• HEX (#1e88e5) — значения из макетов и дизайн-токенов.
• `rgb()` с альфой (rgb(0 0 0 / .5)) — полупрозрачные тени и оверлеи.
• `hsl()` — когда нужно вручную подобрать светлее или темнее: меняется только светлота.
• `oklch()` — палитры и темы: равные шаги светлоты выглядят равномерно, плюс доступен широкий цветовой охват.
• `currentColor` — иконки и рамки в цвет текста:

.icon { fill: currentColor; }

Функции работы с цветом

:root { --primary: oklch(62% 0.19 255); }
.button { background: var(--primary); }
.button:hover { background: color-mix(in oklch, var(--primary), black 15%); }

• color-mix() — смешать цвета без препроцессора;
• относительные цвета (oklch(from var(--primary) …)) — производные оттенки.

Доступность

Проверять контраст текста и фона (WCAG: 4.5:1 для обычного текста) — в DevTools это видно в пипетке цвета.

Коротко для собеседования

HEX — из макетов, rgb с альфой — для прозрачности, hsl/oklch — для оттенков и палитр, currentColor — для иконок; производные цвета — через color-mix().

Подробнее: MDN — Значения цвета