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

[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 опубликовано.