Email or username:

Password:

Forgot your password?
Top-level
Андрей Ситник

Уже сейчас можно добавить P3 цвета на ваш сайт или iOS-приложение — оно будет более насыщенным и сочным.

Отлично подойдёт для лэндингов и иконок.

Например, на сайте Vercel уже используются P3-цвета и результат чувствуется.

11 comments
Андрей Ситник

Но есть два способа добавить P3-цвета в систему.

1. Платформо-независимый. У вас есть отдельные RGB-форматы для sRGB и P3 и универсальный формат типа OKLCH.
2. Платформо-специфичный. RGB разный на каждом устройстве в зависимости от экрана.

Андрей Ситник

Вы можете спросить, кто выберет платформо-специфичный формат?

В нём #ff0000 будет означать разный красный на разных устройствах.

Это каждый файл надо будет снабжать мета-информацией для конвертации #ff0000 между разными экранами.

Очевидно, что платформо-независимый лучше.

Андрей Ситник

Но P3-не что-то новое. Уже давно он есть в фото и киноиндустрии.

Помните HDR-формат — в том числе P3-цвет.

А там всем важен размер файла и байт должен использоваться по полной.

Поэтому у фото- и видео-файла есть профиль — который говорит, что #ff0000 значил у автора

Андрей Ситник

Photoshop конечно же идёт по пути фото-индустрии.

Помните профили в диалоговых окнах? Он именно про то, как должен выглядеть #ff0000 из файла — как у вас на мониторе, или как у автора.

Поэтому #ff0000 будет давать разный цвет в зависимости от профиля файла

Андрей Ситник

В CSS пошли, конечно же, другим платформо-независимым путём. rgb(255 0 0) даёт одинаковый цвет на всех устройствах (самый красный в sRGB).

Есть color(display-p3 1 0 0) для самого красного в P3.

Есть oklch() чтобы указать цвет в любых охватах.

evilmartians.com/chronicles/ok

Андрей Ситник

Но Фигма пошла по пути Фотошопа, что очень не логично, ведь в ней CSS-цвета.

В итоге вы выбираете профиль для файла когда разработчик скопирует #ff0000 цвет из Фигмы в CSS, то в браузере он будет выглядеть по другому.

Андрей Ситник

Проблема не только в самых контрастных цветах, которые есть только в P3 и нет в sRGB.

P3-профиль растягивает всё пространство. Скопированный #880000 из P3-макета будет выглядеть по другому в CSS.

Андрей Ситник replied to Андрей

Именно поэтому вам может пригодиться наш oklch.com — он умеет конвертировать между фигмовскими P3-цвета и платфомонезависимым oklch(), который можно использовать в CSS.

Выбирает формат Figma P3 и теперь в жёлтое поле можно копировать-вставлять этот «сломанных» hex

Андрей Ситник replied to Андрей

Только не перепутайте. И в CSS и фигмовском P3 будут hex-цвета, но они означают принципиально разное.

Из Фигмы можно копировать только в жёлтое поле.

В CSS можно копировать или oklch() или переключать формат на обычный hex.

Андрей Ситник replied to Андрей

Другой вариант — взять плагин OkColor для Фигмы.

Автор недавно добавил эту хитрость со сломанными hex-цветами и плагин может их исправить в нормальные CSS-цвета.

Только включите P3-режим руками, плагин не видит.

figma.com/community/plugin/117

Андрей Ситник replied to Андрей

Кстати, не пугайтесь 8-значному hex-цвету в Figma P3 значении у oklch()

Это просто стандартный способ добавить в hex-цвет уровень opacity — CSS и Фигма давно такое поддерживают.

Мы специально для Figma P3 используем 8-значный hex, чтобы вы не путались между разными hex-ами.

Go Up