Зачем нужно несколько нотаций цветов в CSS?

Разные нотации цветов в CSS удобны для разных задач: одни компактны, другие понятны человеку, третьи дают предсказуемые оттенки.

Нотации

• HEX — #0066ff, #06f8 (с прозрачностью). Коротко, привычно, из дизайн-макетов.
• `rgb()` — rgb(0 102 255 / 50%). Каналы красного, зелёного, синего; удобна прозрачность.
• `hsl()` — hsl(220 100% 50%). Тон, насыщенность, светлота — легко сделать светлее или темнее вручную.
• `oklch()` — oklch(60% 0.2 260). Перцептивно равномерная: оттенки с одинаковой светлотой выглядят одинаково яркими — удобно для палитр и тем.
• Ключевые слова — red, transparent, currentColor.

Работа с цветом

.button { background: oklch(60% 0.2 260); }
.button:hover { background: oklch(from oklch(60% 0.2 260) calc(l - 10%) c h); }
.border { border-color: color-mix(in oklch, var(--primary) 30%, white); }

Зачем столько

• HEX — копировать из макета;
• HSL/OKLCH — генерировать оттенки и темы;
• currentColor — иконки, наследующие цвет текста;
• широкий цветовой охват (P3) доступен только в новых нотациях.

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

HEX и rgb — привычны и компактны, hsl и oklch — удобны для управления оттенками и палитрами, currentColor — наследование цвета текста.

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