Kaffee-Stylesheet: Kaffee als Farbe

May 09 2023

In dieser albernen Infografik stelle ich mir vor, wie Kaffee ausgedrückt werden könnte, wenn er ähnlich wie CSS-Farben dargestellt würde.

Sie sagen, Entwickler könnten nur für Kaffee arbeiten. Ich glaube nicht, dass das stimmt (aber vielleicht auch nicht zu weit).

Sie sagen, Entwickler könnten nur für Kaffee arbeiten. Ich glaube nicht, dass das stimmt (aber vielleicht auch nicht zu weit). Der Cartoon dieser Woche wird also zwei meiner Lieblingssachen kombinieren: Kaffee und CSS. Und insbesondere werde ich mich auf CSS-Farben konzentrieren und darauf, wie verschiedene Kaffeesorten ähnlich wie CSS-Farben dargestellt werden können.

Wir alle kennen RGB, Hex (auch RGB) und HSL (was komischerweise auch RGB ist). Und im CSS-Standard sind neue Farbformate aufgetaucht: L*a*b*, LCH, CMYK, HWB, OKLCH … So viele Leute haben mich gefragt: „Warum brauchen wir so viele Farbformate in CSS?“ „Und das ist eine berechtigte Frage, die ich mit Hilfe des heutigen Cartoons zu beantworten versuchen werde . “

Und ich werde es mit Hilfe einer vorhandenen CSS-Farbfunktion tun: HWB . Obwohl HWB für Hue – Whiteness – Blackness steht , habe ich die Buchstabenbedeutungen (nur) ein wenig geändert, um sie an meinen Zweck anzupassen:

H = Heißes Wasser = Wasser ( duh )
W = Weiß = Milch (geschäumt, aufgeschäumt, gedämpft usw.)
B = Schwarz = Kaffee (zitiert Homer Simpson: die Ursache und Lösung aller Probleme des Lebens.)

Die neueste Version enthält eine Beschreibung dessen, was HWB bedeutet.

Obwohl mir die Idee gefällt, ist sie begrenzt: Wie wäre es, wenn wir einen Mokka möchten? Mokkas haben Schokolade und hwb()können Schokolade nicht darstellen. Es gibt nur Wasser, Milch und Kaffee. Mit diesen drei Grundzutaten können wir nur die Kaffeesorten auf der Infografik und noch einige mehr zubereiten (Cortado, Café Bombón oder Galão, um nur einige zu nennen). Dennoch fehlt uns eine Menge mehr: Irish Coffee, Espresso Romano, Marochino usw., und wir können sie nicht nur aus Wasser, Milch und Kaffee zubereiten.

Selbst für die im Cartoon hwb()reicht meine neu erstellte Funktion nicht aus. Schauen Sie sich zum Beispiel den Cappuccino an: Er besteht zu 66 % aus Milch und zu 33 % aus Kaffee. Es scheint irreführend, dass er die gleiche Zusammensetzung wie ein Latte hat, aber sie sind nicht gleich: Bei einem Cappuccino ist die Milch halb gedämpft und halb aufgeschäumt.

Es wäre schöner, wenn wir diese Details anders ausdrücken könnten. Und das passiert auch mit CSS-Farben! Wir verwenden RGB schon seit langem, aber RGB ist begrenzt. Das CSS-Farbmodul Level 4 führte neue Möglichkeiten zum Schreiben von Farben ein, die das Web modernisieren und eine Welt voller Möglichkeiten eröffnen: Lab, LCH, OKLCH, CMYK, die color()Funktion … und diese Farbräume bieten mehr Optionen als das Standard-RGB.

Bei einem Mokka fehlt uns die Schokolade (was bei HWB keine Option ist) … warum also nicht stattdessen LCH verwenden?

L = Leichtigkeit/Leche/Lait/Latte = Milch
C = Schokolade
H = Heißer Kaffee

Und das Gleiche passiert mit den CSS-Farben: Mit einigen Farbfunktionen können Sie lebendigere Farben erstellen als mit anderen, und andere sind für den Computer einfacher oder für den Menschen einfacher. Es ist mit gewissen Überschneidungen zu rechnen, und das ist völlig normal. Wählen Sie das beste Farbformat für Ihre Projektanforderungen und genießen Sie es. Es ist eine aufregende Zeit, mit CSS-Farben zu spielen.

Wenn Sie mehr über Farbfunktionen erfahren möchten, schauen Sie sich direkt das CSS-Farbmodul 4 an ( und Level 5 für einige tolle neue Farbfunktionen!). Es ist überraschend einfach. Sie können auch einen Artikel lesen, den ich vor ein paar Jahren veröffentlicht habe … aber seien Sie gewarnt, dass er etwas veraltet ist, da sich der Standard seit meinem Schreiben ständig geändert hat.

Kaffee-Stylesheet: Kaffee als Farbe

Verknüpfungen