Сравни способы модификации цвета и объясни, когда выбирать каждый вариант.

Способы модификации цвета в CSS: изменение значения (hex/rgb/hsl), прозрачность (rgba/alpha), CSS-функции (`color-mix`, относительные цвета), фильтры, CSS-переменные. Выбор — по задаче.

Способы

Прямое значение

color: #6b46ff;
color: rgb(107, 70, 255);
color: hsl(252, 100%, 64%);

Прозрачность (alpha)

color: rgba(107, 70, 255, 0.5);
color: hsla(252, 100%, 64%, 0.5);
background: rgb(107 70 255 / 50%); /* современный синтаксис */

Когда: полупрозрачные оверлеи, тени.

HSL для вариаций

Удобно менять яркость/насыщенность, меняя одно число:

--base: 252 100% 64%;
color: hsl(var(--base));
color: hsl(252 100% 40%); /* темнее — меняем lightness */

Когда: генерировать оттенки (hover, темнее/светлее).

color-mix (современный)

color: color-mix(in srgb, blue 70%, white); /* смешать цвета */

Когда: смешивание, осветление/затемнение без препроцессора.

Относительные цвета (новое)

color: hsl(from var(--base) h s calc(l - 10)); /* на основе другого */

CSS-переменные

:root { --primary: #6b46ff; }
.btn { color: var(--primary); }
.btn:hover { color: color-mix(in srgb, var(--primary), black 10%); }

Когда: темизация, единый источник цвета.

Препроцессоры (Sass)

@use 'sass:color';
color: color.adjust($primary, $lightness: -10%); // затемнение (darken() устарел)

Фильтры

filter: brightness(1.2); /* влияет на весь элемент */

Как выбирать

• Прозрачность → rgba/alpha.
• Оттенки/яркость → HSL или color-mix.
• Темизация → CSS-переменные.
• Смешивание → color-mix.

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

Модификация цвета: прямые значения (hex/rgb/hsl), прозрачность (rgba/alpha), HSL для оттенков (меняешь lightness/saturation), color-mix (смешивание, осветление без препроцессора), относительные цвета (hsl(from...)), CSS-переменные (темизация), Sass darken/lighten, фильтры (brightness). Выбор: прозрачность → rgba, оттенки → HSL/color-mix, темы → переменные.