Пора использовать новые цвета в web!
21 августа на Engineering Meetups от Health Samurai я рассказывал о работе с цветами в современном web. Главный вывод: мы теперь можем использовать возможности новых цветовых пространств прямо в CSS и не боятся этого! Главное пользоваться в уместных случаях
Основные моменты:
-
OKLCh в CSS — это стандарт (W3C), который уже поддерживается современными браузерами (https://www.w3.org/TR/css-color-4/).
-
Мы можем это проверить совместимость! С помощью CSS (@supports) и JavaScript можно точно проверить, поддерживает ли браузер и даже дисплей пользователя Display P3.
-
Дизайнеры тоже уже могут переходить на OKLCH! Figma научилась работать с OKLCH, а Photoshop умеет работать с расширенными цветовыми пространствами, но с цветовой моделью Lab.
А вот главная киллер-фича: Теперь можно на лету создавать производные цвета от основного (primary) с помощью простых математических вычислений. Больше не нужны гигантские статические палитры от дизайнеров! И самое интересное — новые цвета будут перцептивно равномерными (то есть, изменения воспринимаются человеческим глазом плавно и предсказуемо).
P.S. Выступление прошло в формате дискуссии и было немного воркшопа — было интересно!