コーヒー スタイル シート: 色としてのコーヒー

開発者はコーヒーのためだけに仕事ができると言われています。それは真実ではないと思います（しかし、それほど遠くないかもしれません）。そこで、今週の漫画では、コーヒーと CSS という私の大好きなものを 2 つ組み合わせます。特に、CSS カラーと、さまざまな種類のコーヒーを CSS カラーと同様に表現する方法に焦点を当てます。

私たちは皆、RGB、Hex (これも RGB)、および HSL (面白いことに、これも RGB) について知っています。そして、新しいカラー形式が CSS 標準に登場しました: L*a*b*、LCH、CMYK、HWB、OKLCH…非常に多くの人が私に尋ねました。「なぜ CSS にこれほど多くのカラー形式が必要なのでしょうか? 」それは当然の質問であり、今日の漫画の助けを借りて答えてみたいと思います。

そして、既存の CSS カラー関数HWBを使用してこれを行います。HWB はH ue- W hitenes- B missingnessの略ですが、目的に合わせて文字の意味を（ほんの）少し変更しました。

• H = 熱湯 = 水 (当然です)
• W = ホワイト = ミルク（泡立てたミルク、泡立てたミルク、蒸したミルクなど）
• B = ブラック = コーヒー (ホーマー シンプソンの言葉を引用: 人生のすべての問題の原因と解決策。)

このアイデアは気に入っていますが、限界があります。モカが欲しい場合はどうでしょうか? モカにはチョコレートが入っていますが、hwb()チョコレートを表現する方法はありません。それは水と牛乳とコーヒーだけです。これら 3 つの基本的な材料を使用して、インフォグラフィックとその他のコーヒー (いくつか例を挙げると、コルタード、カフェ ボンボン、ガラオンなど) を作成するだけです。それでも、アイリッシュ コーヒー、エスプレッソ ロマーノ、マロチーノなど、私たちにはまだたくさんのものが不足しており、水、牛乳、コーヒーだけでそれらを作ることはできません。

漫画の中のものでも、私が新たに作ったhwb()機能では不十分です。たとえば、カプチーノをチェックしてください。66% がミルク、33% がコーヒーです。ラテと同じ組成であると誤解を招きそうですが、同じではありません。カプチーノでは、ミルクは半分蒸し、半分は泡立てたものです。

そういった部分を別の表現方法で表現できればもっと良かったのではないかと思います。CSS カラーでも同じことが起こります。私たちは長い間 RGB を使用してきましたが、RGB には限界があります。CSSカラー モジュール レベル 4 では、 Web を最新化し、可能性の世界をもたらす新しい色の記述方法が導入されました。Lab、LCH、OKLCH、CMYK、関数color()…そしてこれらの色空間は、標準の RGB よりも多くのオプションを提供します。

モカの場合、チョコレートがありません (HWB ではオプションではありません)。代わりに LCH を使用してみてはいかがでしょうか?

• L = 軽さ/レチェ/レ/ラテ = ミルク
• C = チョコレート
• 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