Lembar Gaya Kopi: Kopi sebagai Warna

Mereka mengatakan pengembang hanya bisa bekerja untuk kopi. Saya rasa itu tidak benar (tapi mungkin juga tidak terlalu jauh). Jadi kartun minggu ini akan memadukan dua hal favorit saya: kopi dan CSS. Dan secara khusus, saya akan fokus pada warna CSS dan bagaimana berbagai jenis kopi dapat direpresentasikan serupa dengan warna CSS.

Kita semua tahu tentang RGB, Hex (juga RGB), dan HSL (yang, lucunya, juga RGB). Dan format warna baru telah muncul dalam standar CSS: L*a*b*, LCH, CMYK, HWB, OKLCH… Begitu banyak orang bertanya kepada saya, “ Mengapa kita membutuhkan begitu banyak format warna dalam CSS? ” Dan itu adalah pertanyaan wajar yang akan saya coba jawab dengan bantuan kartun hari ini .

Dan saya akan melakukannya dengan bantuan fungsi warna CSS yang ada: HWB . Meskipun HWB singkatan H ue- Keputihan- B kekurangan, saya memodifikasi arti huruf (hanya) sedikit agar sesuai dengan tujuan saya:

• H = Air panas = air ( duh )
• W = Putih = susu (berbuih, berbusa, dikukus, dll.)
• B = Hitam = kopi (mengutip Homer Simpson: penyebab, dan solusi dari, semua masalah hidup.)

Meskipun saya menyukai idenya, itu terbatas: bagaimana jika kita menginginkan moka? Moka memiliki cokelat dan hwb()tidak memiliki cara untuk merepresentasikan cokelat. Hanya air, susu, dan kopi. Dengan tiga bahan dasar tersebut, kita hanya bisa membuat kopi di infografis dan lainnya (cortado, café bombón, atau galão, untuk beberapa nama). Namun, kami kehilangan satu ton lagi: kopi Irlandia, espresso romano, marochino, dll., Dan kami tidak dapat membuatnya hanya dengan air, susu, dan kopi.

Bahkan untuk yang ada di kartun, hwb()fungsi yang baru saya buat tidak cukup. Misalnya, periksa cappucino: 66% susu dan 33% kopi. Tampaknya menyesatkan bahwa komposisinya sama dengan latte, tetapi tidak sama: dalam cappuccino, susunya setengah dikukus dan setengah berbusa.

Akan lebih baik jika kita memiliki cara berbeda untuk mengungkapkan detail tersebut. Dan itulah yang terjadi dengan warna CSS juga! Kami telah menggunakan RGB sejak lama, tetapi RGB terbatas. Modul Warna CSS Level 4 memperkenalkan cara baru untuk menulis warna yang memodernisasi web dan menghadirkan berbagai kemungkinan: Lab, LCH, OKLCH, CMYK, fungsi color()… dan ruang warna tersebut menawarkan lebih banyak opsi daripada RGB standar.

Dalam kasus moka, kami kehilangan cokelatnya (yang bukan merupakan pilihan di HWB)… jadi mengapa tidak menggunakan LCH saja?

• L = Lightness/Leche/Lait/Latte = Susu
• C = Cokelat
• H = Kopi panas

Dan hal yang sama terjadi pada warna CSS: beberapa fungsi warna akan memungkinkan Anda membuat warna yang lebih hidup daripada yang lain, dan beberapa akan lebih mudah untuk komputer atau lebih mudah untuk manusia. Beberapa tumpang tindih diharapkan, dan itu benar-benar normal. Pilih format warna terbaik untuk kebutuhan proyek Anda, dan nikmati. Ini adalah waktu yang menyenangkan untuk bermain dengan warna CSS.

Jika Anda ingin membaca lebih lanjut tentang fungsi warna, periksa langsung Modul Warna CSS 4 ( dan level 5 untuk beberapa fungsi warna baru yang hebat!). Ini sangat mudah. Anda juga dapat memeriksa artikel yang saya publikasikan beberapa tahun yang lalu … tetapi berhati-hatilah karena ini agak ketinggalan zaman karena standarnya terus berubah sejak saya menulisnya.

Tautan

• Tautan permanen:https://comicss.art/?id=87
• Gambar:https://comicss.art/comics/87/coffee-as-a-css-color.png
• Kode sumber:https://comicss.art/comics/87/coffee-as-a-css-color.html