В ноябре 2025 года появилось два новых способа задавать цвет в CSS. lab() и lch() стали полностью доступны во всех основных браузерах и больше не нужно включать никакие экспериментальные настройки.

  • Chrome и Edge — с версии 111 (уже почти 3 года как есть)
  • Safari — с версии 16.4 (весна 2023)
  • Firefox — с версии 125 (2024 год)

Обычные цвета rgb() и hex часто дают неожиданные результаты, когда хочется просто сделать цвет чуть светлее или чуть темнее. С lab() и особенно с lch() всё стало намного проще и предсказуемее:

  • Меняешь только яркость — цвет остаётся тем же самым по оттенку
  • Меняешь насыщенность — не уходишь случайно в серый или в слишком ядовитый
  • Поворачиваешь оттенок на 30–60 градусов — получаешь красивую гармоничную палитру

Простые примеры

/* Основной синий цвет */
.btn {
  background: lch(65% 70 260);     /* яркость 65%, насыщенность 70, оттенок 260° */
}

/* Тот же цвет, но светлее */
.btn-light {
  background: lch(85% 70 260);
}

/* Тот же цвет, но бледнее */
.btn-pale {
  background: lch(65% 30 260);
}

/* Красивый зелёный рядом с синим */
.btn-green {
  background: lch(65% 70 140);     /* просто повернули оттенок на 120° */
}

/* Ещё проще — обычный lab() */
.text {
  color: lab(70% 20 -50);   /* светлый, чуть голубоватый */
}

Теперь можно спокойно писать lab() и lch() в своих стилях и не думать про запасные варианты. Если кто-то до сих пор сидит на совсем старых браузерах (типа Safari 15 или Chrome 100) — таких уже меньше 1 %, так что для большинства проектов это уже безопасно.

Источники: