Рассказываю как эта вырвиглазная яркость из прошлого поста устроена.

На самом деле нет никакой магии, это фишечка HDR изображений, потому что в HDR можно устанавливать nit. Это единица яркости экрана, то есть пиксели с высоким nit в HDR будут гореть ярче остальных.

Эффекта HDR НЕ БУДЕТ если: — Ваш дисплей не поддерживает HDR; — Браузер не поддерживает HDR (хром и сафари поддерживают); — Устройство находится в режиме экономии батареи (в этом случае поддержка HDR отключается).

Чтобы такое сделать понадобится графический редактор поддерживающий работу с HDR (у меня Photoshop). В редакторе устанавливается цветовой профиль, поддерживающий HDR. Подойдет Rec.ITU-R.2100 или Rec.ITU-R.BT2020

Подбираем ядреный цвет, чтобы там была высокая сатурация, но ближе к белому. Потому что темные цвета такого эффекта не дадут.

Можете использовать цвета, которые я подобрал: #ff4e51 красный #7ffffa голубой #ff2bd6 розовый #7cff00 зеленый #e8bb57 оранжевый #fffa6f желтый

Готовое изображение экспортируем в PNG, ставим галочку Встроенный профиль, чтобы цветовой профиль прикрепился к изображению.

Загружаем в какую-нибудь соцсеть, которая не меняет цветовой профиль у прикрепленного изображения. В LinkedIn работает, например.

А можем ли мы как-то сделать это не с картинкой, а с цветами веб-страницы? Да, можем. У пользователей с HDR цветовым профилем дисплея будет специальный цвет с помощью неофициальной функции color (не путать с color, который цвет шрифта).

div { background: #00ff00*; background: color(display-p3 0 1 0); background: lch(87.819% 137 134.384); background: color(rec2020 0 1 0); }*

Все примеры с цветами есть на страничке, которую я подготовил. Там же лежит ссылка на PSD исходник, сможете попереключать.

Ссылка на пример и исходик