Membuat gradasi CSS yang indah tanpa "gray dead zone"

• Jika membuat gradasi linear yang berubah dari kuning ke biru, akan muncul "gray dead zone" di tengah

→ Karena algoritme CSS linear-gradient menentukan nilai warna piksel dengan mengambil rata-rata matematis RGB

→ Dalam ruang warna RGB, jika semua nilai RGB sama, hasilnya selalu menjadi warna grayscale

• Jika rata-rata dihitung dengan HSL (Hue / Saturation / Lightness), gray dead zone tidak akan muncul

• Namun, jika gradasi dibuat hanya dengan HSL, tampilannya menjadi terlalu terang dan vivid karena "tidak mempertimbangkan persepsi manusia"

→ Meski warnanya memiliki tingkat kecerahan yang sama, kuning terasa lebih terang

• Karena itu, mungkin lebih baik menggunakan mode seperti HCL yang dimodelkan berdasarkan penglihatan manusia

• Masalahnya, CSS masih belum menyediakan fitur untuk menentukan mode warna seperti HSL/HCL

→ Karena CSS Gradient tidak terpaku pada dua warna saja, ini bisa diatasi dengan menentukan banyak warna, misalnya 10 warna atau lebih

• Dengan Gradient Generator yang dibagikan bersama, Anda bisa membuat dan menggunakan gradasi CSS dengan mode warna seperti LRGB/HSL/HSV/HCL

[xguru]

Konten terkait HSL sudah saya rangkum dalam tulisan yang pernah saya unggah sebelumnya.

• HSLuv - ruang warna yang ramah bagi developer https://id.news.hada.io/topic?id=1691