Foglio di stile del caffè: il caffè come colore

Dicono che gli sviluppatori potrebbero lavorare solo per il caffè. Non credo sia vero (ma forse nemmeno troppo). Quindi il fumetto di questa settimana mescolerà due delle mie cose preferite: caffè e CSS. E in particolare, mi concentrerò sui colori CSS e su come diversi tipi di caffè possono essere rappresentati in modo simile ai colori CSS.

Sappiamo tutti di RGB, Hex (anche RGB) e HSL (che, cosa divertente, è anche RGB). E nuovi formati di colore sono spuntati nello standard CSS: L*a*b*, LCH, CMYK, HWB, OKLCH... Così tante persone mi hanno chiesto: "Perché abbiamo bisogno di così tanti formati di colore nei CSS? "E questa è una domanda giusta a cui cercherò di rispondere con l'aiuto della vignetta di oggi ".

E lo farò con l'aiuto di una funzione colore CSS esistente: HWB . Sebbene HWB stia per H ue - Whiteness - Blackness , ho modificato leggermente il significato delle lettere per adattarlo al mio scopo:

• H = Acqua calda = acqua ( duh )
• W = Bianco = latte (schiumato, schiumato, cotto a vapore, ecc.)
• B = Nero = caffè (citando Homer Simpson: la causa e la soluzione di tutti i problemi della vita.)

Mentre mi piace l'idea, è limitata: che ne dici se vogliamo una moka? Le moka hanno il cioccolato e hwb()non hanno modo di rappresentare il cioccolato. È solo acqua, latte e caffè. Con questi tre ingredienti di base, possiamo solo creare i caffè sull'infografica e altri (cortado, café bombón o galão, solo per citarne alcuni). Tuttavia, ci manca molto di più: Irish coffee, espresso romano, marochino, ecc., e non possiamo crearli solo con acqua, latte e caffè.

Anche per quelli del cartone animato, la mia hwb()funzione appena creata non è sufficiente. Ad esempio, controlla il cappuccino: è il 66% di latte e il 33% di caffè. Sembra fuorviante che abbia la stessa composizione di un latte macchiato, ma non sono la stessa cosa: in un cappuccino il latte è metà cotto a vapore e metà schiumato.

Sarebbe più bello se avessimo un modo diverso di esprimere quei dettagli. Ed è quello che succede anche con i colori CSS! Usiamo RGB da molto tempo, ma RGB è limitato. Il CSS Color Module Level 4 ha introdotto nuovi modi di scrivere i colori che modernizzano il web e offrono un mondo di possibilità: Lab, LCH, OKLCH, CMYK, la color()funzione... e quegli spazi colore offrono più opzioni rispetto allo standard RGB.

Nel caso di una moka, ci manca il cioccolato (che non è un'opzione in HWB)... quindi perché non usare invece LCH?

• L = Leggerezza/Leche/Lait/Latte = Latte
• C = Cioccolato
• H = Caffè caldo

E la stessa cosa accade ai colori CSS: alcune funzioni di colore ti permetteranno di creare colori più vibranti di altri, e alcune saranno più facili per il computer o più semplici per gli umani. È prevista una certa sovrapposizione, ed è del tutto normale. Scegli il miglior formato di colore per le esigenze del tuo progetto e divertiti. È un momento emozionante per giocare con i colori CSS.

Se vuoi saperne di più sulle funzioni del colore, controlla direttamente il CSS Color Module 4 ( e il livello 5 per alcune fantastiche nuove funzioni del colore!). È sorprendentemente semplice. Puoi anche controllare un articolo che ho pubblicato un paio di anni fa ... ma tieni presente che è un po' obsoleto poiché lo standard è cambiato continuamente da quando l'ho scritto.

Collegamenti

• Collegamento permanente:https://comicss.art/?id=87
• Immagine:https://comicss.art/comics/87/coffee-as-a-css-color.png
• Codice sorgente:https://comicss.art/comics/87/coffee-as-a-css-color.html