Folha de Estilo do Café: Café como uma Cor

Eles dizem que os desenvolvedores poderiam trabalhar apenas para o café. Não acho que isso seja verdade (mas talvez também não muito). Então, o cartoon desta semana vai misturar duas das minhas coisas favoritas: café e CSS. E, em particular, vou me concentrar nas cores CSS e em como diferentes tipos de café podem ser representados de maneira semelhante às cores CSS.

Todos nós conhecemos RGB, Hex (também RGB) e HSL (que, engraçado, também é RGB). E novos formatos de cores surgiram no padrão CSS: L*a*b*, LCH, CMYK, HWB, OKLCH… Muitas pessoas me perguntaram: “Por que precisamos de tantos formatos de cores em CSS? ” E essa é uma pergunta justa que tentarei responder com a ajuda do desenho animado de hoje .

E farei isso com a ajuda de uma função de cor CSS existente: HWB . Embora HWB signifique Hue- W hiteness- B Lackness, modifiquei o significado das letras (apenas) um pouco para atender ao meu propósito :

• H = Água quente = água ( duh )
• W = Branco = leite (espumoso, espumado, cozido no vapor, etc.)
• B = Preto = café (citando Homer Simpson: a causa e a solução de todos os problemas da vida).

Embora eu goste da ideia, ela é limitada: que tal se quisermos um mocha? Mochas tem chocolate e hwb()não tem como representar chocolate. É só água, leite e café. Com esses três ingredientes básicos, só conseguimos criar os cafés do infográfico e mais alguns (cortado, café bombón ou galão, para citar alguns). Ainda assim, estamos perdendo muito mais: café irlandês, expresso romano, marochino etc., e não podemos criá-los apenas com água, leite e café.

Mesmo para os do desenho animado, minha hwb()função recém-criada não é suficiente. Por exemplo, veja o cappuccino: é 66% leite e 33% café. Parece enganoso que tenha a mesma composição de um café com leite, mas não são iguais: em um cappuccino, o leite é meio vaporizado e meio espumado.

Seria melhor se tivéssemos uma maneira diferente de expressar esses detalhes. E é isso que acontece com as cores CSS também! Usamos RGB há muito tempo, mas o RGB é limitado. O Módulo de Cores CSS Nível 4 introduziu novas formas de escrever cores que modernizam a web e trazem um mundo de possibilidades: Lab, LCH, OKLCH, CMYK, a color()função… e esses espaços de cores oferecem mais opções do que o RGB padrão.

No caso do mocha, falta o chocolate (que não é uma opção no HWB)… então porque não usar o LCH?

• L = Lightness/Leche/Lait/Latte = Leite
• C = Chocolate
• H = café quente

E a mesma coisa acontece com as cores CSS: algumas funções de cores permitirão que você crie cores mais vibrantes do que outras, e algumas serão mais fáceis para o computador ou mais diretas para os humanos. Alguma sobreposição é esperada, e isso é completamente normal. Escolha o melhor formato de cor para as necessidades do seu projeto e aproveite. É um momento emocionante para brincar com cores CSS.

Se você quiser ler mais sobre funções de cores, verifique diretamente o CSS Color Module 4 ( e o nível 5 para algumas novas funções de cores excelentes!). É surpreendentemente simples. Você também pode conferir um artigo que publiquei há alguns anos … mas esteja avisado que está um pouco desatualizado, pois o padrão mudou continuamente desde que o escrevi.

links

• Link permanente:https://comicss.art/?id=87
• Imagem:https://comicss.art/comics/87/coffee-as-a-css-color.png
• Código fonte:https://comicss.art/comics/87/coffee-as-a-css-color.html