×
İçindekiler

CSS'de HSL önemi - Yeni nesil renk kodu kullanımı


Merhabalar, şimdilik yaygın bir kullanımı yok fakat CSS’de yeni bir renk kodu dönemi başlayacağını düşünüyorum; HSL.

hsl önemi

Neden kullanmalıyız, bizlere faydası neler, neden Hex Code #RRGGBB veya Decimal Code (R,G,B) den vaz geçmeliyiz bunlardan bahsetmek istiyorum. Makale sonunda hex kodları ile devam edip etmemek sizlerin kararı :) Ben yapıyı beğendim ve sonraki projelerimde HSL kullanmayı planlıyorum.

hsl önemi caniuse.com/mdn-css_types_color_hsl

Hex ve Decimal kodunun dezavantajları #

“Sınırlı” derken, bir renk tekerleğini açıp kendiniz bir renk seçmeden rengi değiştirmek kolay değil. Bu seçimi yaparken tondan çıkmanız çok muhtemel bir durum ki genellikle bu durum olur. Buna ek olarak, hex veya decimal koduna bakarak hangi rengin olduğunu (sürekli kullanılan #000, #fff gibi renklerden bahsetmiyorum) tahmin etmek kolay değil.

hsl önemi color.adobe.com/tr/

Kırmızı bir renk paleti seçtim ve tonlarını görüyorsunuz. Hepsinde de kırmızı ama farklı tonlarda olduğunu koda bakarak söylemek zor.

Hızlı bir şekilde test etmek veya doğrulamak için bir rengin daha açık veya daha koyu bir tonunu oluşturmanız gerekebilir. Renk seçiciyi açmadan bu neredeyse imkansızdır :) Renk seçici ile seçeceğiniz ton ise monitörünüzün kalitesine göre değişiklik gösterebilir. (Şahsi fikrim)

Neyse ki, HSL renkleri bu özel sorunu çözmemize yardımcı oluyor ve farklı senaryolara hızlı çözümler sunmamıza imkan sağlıyor. Bir arayüzden farklı renk paletlerini hızlıca oluşturmak gibi.

HSL Nedir? #

HSL, ton, doygunluk ve parlaklık anlamına gelir.
hsl (hue, saturation, lightness)
RGB renk tekerleğine dayanmaktadır. Her rengin doygunluk ve açıklık değerleri için bir açısı ve yüzde değeri vardır.

Kaynak: w3schools.com/colors/colors_hsl.asp

Bununla ton, doygunluk ve parlaklığı temsil eden üç değerimiz var. Rengi CSS’de şu şekilde kullanabiliriz:

.element {
    background-color: hsl(196, 73%, 62%);
}

hsl önemi hslpicker.com/

Doygunluk ve ışık korunarak (şeffaflıkla karıştırılmasın) renkler arasında geçiş ve kolay bir şekilde okuyabilmek için HSL tercih etmekte fayda var.

HSL Renkleri İçin Kullanım Örnekleri #

İmleç üzerine geldiğinde daha koyu yapalım. Bunun için sadece renk parlaklığı yüzdesi ile oynamamız yeterli.
(hue, saturation, lightness)

hsl önemi hslpicker.com/

.btn {
    background-color: hsl(166, 78%, 37%);
}
.btn:hover {
    background-color: hsl(166, 60%, 30%);
}

Farklı senaryo ve daha etkili kullanımı

:root {
  --btn-main-h: 166;
  --btn-main-s: 60%;
  --btn-main-l: 37%;
}
.btn {
  background-color: hsl(var(--btn-main-h), var(--btn-main-s), var(--btn-main-l));
}
.btn:hover {
  --btn-main-l: 54%;
}

Işık yüzdesi ne kadar yüksek olursa, o kadar hafif olur. Daha koyu bir renk için değeri azaltmamız gerekiyor.

Umarım faydalı olmuştur :) Tasarım dolu günler dilerim.

Faydalandığım kaynaklar