Таблица стилей для кофе: кофе как цвет

Говорят, разработчики могли работать только за кофе. Я не думаю, что это правда (но, может быть, и не слишком далеко). Итак, в мультфильме этой недели будут смешаны две мои любимые вещи: кофе и CSS. В частности, я сосредоточусь на цветах CSS и на том, как различные типы кофе могут быть представлены аналогично цветам CSS.

Все мы знаем о RGB, Hex (тоже RGB) и HSL (что, забавно, тоже RGB). А в стандарте CSS появились новые цветовые форматы: L*a*b*, LCH, CMYK, HWB, OKLCH… Меня многие спрашивали: «Зачем нам так много цветовых форматов в CSS? И это справедливый вопрос, на который я постараюсь ответить с помощью сегодняшнего мультфильма .

И я сделаю это с помощью существующей функции цвета CSS: HWB . Хотя HWB расшифровывается как Hue - Whiness - B недостаток, я немного изменил значения букв, чтобы они соответствовали моей цели:

• H = горячая вода = вода ( дух )
• W = белый = молоко (вспененное, вспененное, приготовленное на пару и т. д.)
• B = черный = кофе (цитируя Гомера Симпсона: причина и решение всех жизненных проблем).

Хотя мне нравится эта идея, она ограничена: как насчет мокко? У мокко есть шоколад, и hwb()у него нет способа представить шоколад. Только вода, молоко и кофе. С этими тремя основными ингредиентами мы можем создать только кофе на инфографике и некоторые другие (cortado, cafe bombón или galão, и это лишь некоторые из них). Тем не менее, нам не хватает еще тонны: ирландский кофе, эспрессо романо, марочино и т. д., и мы не можем создать их только с водой, молоком и кофе.

Даже для тех, что в мультике, моей только что созданной hwb()функции недостаточно. Например, посмотрите на капучино: в нем 66% молока и 33% кофе. Кажется заблуждением, что у него тот же состав, что и у латте, но это не одно и то же: в капучино молоко наполовину пропарено, а наполовину вспенено.

Было бы лучше, если бы у нас был другой способ выразить эти детали. То же самое происходит и с цветами CSS! Мы давно используем RGB, но возможности RGB ограничены. Цветовой модуль CSS уровня 4 представил новые способы написания цветов, которые модернизируют Интернет и открывают целый мир возможностей: Lab, LCH, OKLCH, CMYK, функции color()… и эти цветовые пространства предлагают больше возможностей, чем стандартный RGB.

В случае с мокко нам не хватает шоколада (чего нет в HWB)… так почему бы вместо этого не использовать LCH?

• L = Легкость/Leche/Lait/Latte = Молоко
• С = Шоколад
• H = горячий кофе

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

Если вы хотите узнать больше о функциях цвета, ознакомьтесь непосредственно с модулем цвета CSS 4 ( и на уровне 5 вы найдете несколько отличных новых функций цвета!). Это удивительно просто. Вы также можете проверить статью, которую я опубликовал пару лет назад … но имейте в виду, что она немного устарела, так как стандарт постоянно менялся с тех пор, как я ее написал.

Ссылки

• Постоянная ссылка:https://comicss.art/?id=87
• Изображение:https://comicss.art/comics/87/coffee-as-a-css-color.png
• Исходный код:https://comicss.art/comics/87/coffee-as-a-css-color.html