Arkusz stylów kawy: kawa jako kolor

May 09 2023

Na tej głupiej infografice wyobrażam sobie, jak można by wyrazić kawę, gdyby była reprezentowana podobnie do kolorów CSS.

Mówią, że programiści mogą pracować tylko dla kawy. Nie sądzę, żeby to była prawda (ale może też nie za daleko).

Mówią, że programiści mogą pracować tylko dla kawy. Nie sądzę, żeby to była prawda (ale może też nie za daleko). Kreskówka z tego tygodnia będzie mieszaniem dwóch moich ulubionych rzeczy: kawy i CSS. W szczególności skupię się na kolorach CSS i na tym, jak różne rodzaje kaw mogą być reprezentowane podobnie do kolorów CSS.

Wszyscy wiemy o RGB, Hex (również RGB) i HSL (który, co zabawne, jest również RGB). W standardzie CSS pojawiły się nowe formaty kolorów: L*a*b*, LCH, CMYK, HWB, OKLCH… Tak wiele osób pytało mnie: „Po co nam tak wiele formatów kolorów w CSS ? I to jest słuszne pytanie, na które spróbuję odpowiedzieć za pomocą dzisiejszej kreskówki .

I zrobię to za pomocą istniejącej funkcji kolorów CSS: HWB . Chociaż HWB oznacza H ue- białość -B brak, zmodyfikowałem znaczenie liter (tylko) trochę, aby pasowało do mojego celu :

H = Gorąca woda = woda ( duh )
W = biały = mleko (spienione, spienione, gotowane na parze itp.)
B = czarny = kawa (cytując Homera Simpsona: przyczyna i rozwiązanie wszystkich problemów życiowych).

Najnowsza wersja zawiera opis znaczenia HWB.

Chociaż podoba mi się ten pomysł, jest on ograniczony: co powiesz na to, jeśli chcemy mokkę? Mochas mają czekoladę i hwb()nie mają sposobu na przedstawienie czekolady. To tylko woda, mleko i kawa. Dzięki tym trzem podstawowym składnikom możemy stworzyć tylko kawę z infografiki i kilka innych (cortado, cafe bombón lub galão, żeby wymienić tylko kilka). Wciąż brakuje nam tony więcej: kawy po irlandzku, espresso romano, marochino itp., a nie możemy ich stworzyć za pomocą samej wody, mleka i kawy.

Nawet dla tych z kreskówek moja nowo utworzona hwb()funkcja to za mało. Na przykład sprawdź cappuccino: to 66% mleka i 33% kawy. Wydaje się mylące, że ma taki sam skład jak latte, ale to nie to samo: w cappuccino mleko jest w połowie zaparowane, a w połowie spienione.

Byłoby lepiej, gdybyśmy mieli inny sposób wyrażenia tych szczegółów. I tak właśnie dzieje się z kolorami CSS! Używamy RGB od dawna, ale RGB jest ograniczone. CSS Color Module Level 4 wprowadził nowe sposoby zapisywania kolorów, które unowocześniają sieć i dają świat możliwości: Lab, LCH, OKLCH, CMYK, funkcja color()… a te przestrzenie kolorów oferują więcej opcji niż standardowe RGB.

W przypadku mokki brakuje nam czekolady (która nie wchodzi w grę w HWB)… więc dlaczego nie użyć zamiast niej LCH?

L = Lekkość/Leche/Lait/Latte = Mleko
C = Czekolada
H = Gorąca kawa

To samo dzieje się z kolorami CSS: niektóre funkcje kolorów pozwalają tworzyć bardziej żywe kolory niż inne, a niektóre będą łatwiejsze dla komputera lub prostsze dla ludzi. Oczekuje się pewnego nałożenia i jest to całkowicie normalne. Wybierz najlepszy format kolorów dla swoich potrzeb projektowych i ciesz się. To ekscytujący czas na zabawę kolorami CSS.

Jeśli chcesz przeczytać więcej o funkcjach kolorów, zajrzyj bezpośrednio do CSS Color Module 4 ( i poziom 5, aby znaleźć kilka wspaniałych nowych funkcji kolorów!). Jest to zaskakująco proste. Możesz także sprawdzić artykuł, który opublikowałem kilka lat temu … ale ostrzegam, że jest on nieco przestarzały, ponieważ od czasu, gdy go napisałem, standard stale się zmieniał.

Arkusz stylów kawy: kawa jako kolor

Spinki do mankietów