Повышайте уровень своей CSS-игры

Создание внешних приложений без последовательного выбора цвета проблематично, поскольку в конце при визуализации результатов становится неразбериха. Именно по этой причине каждый фронтенд разработчик любит иметь собственную цветовую палитру для проекта. При разработке цветовых палитр мы должны помнить о некоторых вещах, таких как поддержание однородных оттенков цветов и постоянной яркости среди разных цветов и, что наиболее важно, как эти цвета ведут себя при изменении режимов темный и светлый.

Как большинству из вас известно, несколько стандартных цветовых функций CSS используются для создания цветовых палитр, но когда дело доходит до большей доступности с точки зрения цветов, есть кое-что даже более важное. лучше, чтобы его можно было использовать в CSS для создания цветовых палитр. Она называется функцией цвета oklch(). Я объясню, почему вам следует рассмотреть возможность ее использования в 2023 и как с ее помощью добиться хороших результатов. ищем интерфейсные приложения.

Цветовое пространство дисплея P3

Прежде чем мы начнем с функции цвета oklch(), позвольте мне объяснить, зачем она нам нужна.

Когда в 2022 году Цветовой модуль CSS уровня 4 начал становиться рекомендацией, было добавлено новое цветовое пространство, что, проще говоря, означает, что теперь доступна новая группа цветов, поддерживающая определенную цветовую гамму.

  • Например цветовое пространство sRGB в настоящее время доступно на большинстве устройств, где мы используем наши общие функции цвета, такие как RGB и HSL, для создания разных цветов. .
  • Аналогично в наши дни некоторые устройства поддерживают цветовое пространство Display P3, разработанное Apple, предлагающее более чем на 50 % больше цветов, чем >sRGB.

Использование синтаксиса OKLCH

Примечание. В цветовом пространстве Display P3 имеется несколько функций цвета, например LCH, OKLCH, LAB и OKLAB. Чтобы увидеть весь спектр цветов, предлагаемых цветовым пространством Display P3, вам понадобится устройство, поддерживающее эти цвета. Однако, если в данный момент это для вас невозможно, вы все равно можете использовать устройства с поддержкой sRBG в качестве…