"Gri ölü bölge" olmadan güzel CSS gradient'leri oluşturmak

 (joshwcomeau.com)
14 puan yazan xguru 2022-01-13 | 1 yorum | WhatsApp'ta paylaş
  • Sarıdan maviye geçen bir lineer gradient oluşturulduğunda ortada bir "gray dead zone" oluşur

→ Bunun nedeni CSS linear-gradient algoritmasının piksel renk değerlerini belirlemek için RGB'nin matematiksel ortalamasını almasıdır

→ RGB renk uzayında RGB değerlerinin hepsi aynıysa sonuç her zaman gri tonlamalı bir renk olur

  • Ortalama HSL (Hue / Saturation / Lightness) üzerinden alınırsa gri ölü bölge oluşmaz

  • Ancak gradient'i yalnızca HSL ile oluşturmak, "insan algısını hesaba katmadığı" için fazla parlak ve canlı görünebilir

→ Aynı parlaklıktaki renkler olsa da sarı daha parlak algılanır

  • Bu yüzden insan görmesini modelleyen HCL gibi modları kullanmak daha iyi olabilir

  • Sorun şu ki CSS henüz HSL/HCL gibi renk modlarını belirtme özelliği sunmuyor

→ CSS Gradient iki renkle sabit olmadığı için, bunu 10'dan fazla farklı renk tanımlayarak çözmek mümkün

  • Birlikte paylaşılan Gradient Generator ile LRGB/HSL/HSV/HCL gibi renk modlarını kullanan CSS gradient'leri üretip kullanabilirsiniz

İlgili okumalar

1 yorum

 
xguru 2022-01-13

HSL ile ilgili içerikleri daha önce paylaştığım yazıda derlemiştim.