Дополняет статью про цвета в вебе

[DrakesBot12]

Описание

Добавлен материал о новых способах задавать цвет в CSS такие как lab, lch, oklab, oklch, а также обновлена статья о уже описанных способах задать цвет в CSS. Удалены картинки.

Я извиняюсь за то, что данные изменения были внесены без ведома и мнения автора статьи. Я решил создал этот пулреквест чтобы показать как именно я изменил статью и часть, написанную автором статьи. Если автор статьи как либо возражает против мои правок в его статье, я уберу все изменения которые я внёс и верну то, что было написано изначально в статье и изменю материал о котором говорилось в ишью под стиль статьи автора. Если автор статьи не согласен с внесёнными правками я немедленно отменю их в следующем же коммите и верну всё как было и подстрою новый материал под стиль статьи.

Превью: https://content-5801.dev.doka.guide/css/web-colors/

Closes #4993

Чек-лист

• Текст оформлен согласно руководству по стилю
• Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
• Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

[DrakesBot12]

Воу-воу, однотипные картинки это, конечно, прекрасно, но лучше разные картиночки, чем никаких =) Давай вернём, пожалуйста.

Хорошо, какие были картинки вернул, только что делать с теми цветами о которых я писал? Для них картинок не нашёл

[skorobaeus]

Привет!

@DrakesBot12, спасибо тебе за демки! Они очень классные и делают именно то, что должны делать демки: дают возможность покрутить ручки и ощутить, за что отвечает каждый компонент цветовой модели 🔥

У меня есть предложение как сделать их ещё круче. В идеале демка должна быть ответом на вопросы сама по себе, не вынуждая читателя проматывать текст статьи с мысль "так-так, что там эта буква означает?". Поэтому было бы круто не ограничиваться одной буквой, подписывая range, а дать расшифровку, например:

H (оттенок):
W (количество белого):
B (количество чёрного):
α (альфа канал):

Место нам позволяет это сделать.

[skorobaeus]

Теперь к иллюстрациям.

Похоже, пришло время нарисовать новые и перерисовать старые. Мы ведь справочник, мы создаём контент там, где его ещё нет :) Делать это буду я, но прежде нужно понять, о чём будут эти картинки. Если демки позволяют покрутить ручки и понять, какая буква за что отвечает, иллюстрация должна объяснить в чём смысл цветовой модели.

У меня такие соображения:

RGB

Это очень хорошая картинка. Я думаю, к ней нужно небольшое пояснение "математики под капотом" в тексте статьи. Как именно на пересечении красного и зелёного получается жёлтый?

Получается он вот так:

HEX

HEX это RGB, но в шестнадцатиричной системе. По большому счёту здесь нужно объяснить не цветовую модель, потому что мы объяснили её выше, а шестнадцатиричную. Суть будет такая:

URL

HSL

Эта картинка дублирует демо, поэтому её нужно заменить. Цветовое пространство HSL визуализируют в виде конусов:

HWB

Вот это неплохое объяснение, вроде. Добавляем белого, добавляем чёрного, готово:

LAB

А вот LAB это сфера:

LCH

Та же сфера, но координаты другие:

OKLAB и OKLCH

И то, и другое — улучшение одной и той же уже показанной модели. Показываем, в чём улучшение:

---

Буду рада обсудить идеи и Бахамут помоги мне всё это отрисовать

[DrakesBot12]

Привет!

@DrakesBot12, спасибо тебе за демки! Они очень классные и делают именно то, что должны делать демки: дают возможность покрутить ручки и ощутить, за что отвечает каждый компонент цветовой модели 🔥

У меня есть предложение как сделать их ещё круче. В идеале демка должна быть ответом на вопросы сама по себе, не вынуждая читателя проматывать текст статьи с мысль "так-так, что там эта буква означает?". Поэтому было бы круто не ограничиваться одной буквой, подписывая range, а дать расшифровку, например:

H (оттенок): W (количество белого): B (количество чёрного): α (альфа канал):

Место нам позволяет это сделать.

Хорошо, спасибо за корректировку, сейчас всё сделаю 👍

[github-actions]

Превью контента из fa27940 опубликовано.

[solarrust]

Потрясающее дополнение, спасибо большое!

Оставила несколько предложений и комментариев. Посмотри, пожалуйста.
Ещё подумала, что было бы классно добавить про P3 пространство цветов. Чтобы статья искалась по этому ключевому слову. Немного хайпа, так сказать =) Хотя это спорно, конечно, мы в статье рассуждаем про форматы, а не про цветовые пространства. Это всё же немного другое. Давай вместе подумаем, как лучше.

[solarrust]

Вот эта картиночка сломалась, её не видно на странице https://content-5801.dev.doka.guide/css/web-colors/#rgb-rgba

[solarrust]

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

[solarrust]

Было бы классно пояснить, как у нас из 6 стандартных цифр получились все эти возможные комбинации. Про сложение одинаковых. Можно с точки зрения парсинга браузером рассказать.

Только написав этот комментарий я поняла, что первой строкой кода в каждом из примеров идёт паттерн записи. Но это неочевидно и быстро не считывается. Лучше разбить на разные блоки и дать пояснение словами.

[solarrust]

Вот тут и в аналогичных разделах я бы не ссылалась на RGB. Если читатель открыл статью и сразу перешёл к этому разделу, то, чтобы понять запись правильно, ему надо будет сходить почитать ещё и про RGB.