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ı*
Hex Code #RRGGBB veya Decimal Code (R,G,B) okumak zordur.

“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.

Hue
Ton, renk tekerleğinde 0 ile 360 arasındaki bir derecedir.
**Saturation
**Doygunluk bir yüzde değeri; %0 bir gri tonu ve %100 tam renk anlamına gelir.
**lightness
**Parlaklık yüzdesidir; %0 siyah, %100 beyazdı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
Kapak resmi: https://tsh.io/blog/why-should-you-use-hsl-color-representation-in-css/ https://www.smashingmagazine.com/2021/07/hsl-colors-css/ https://www.w3schools.com/colors/colors_hsl.asp https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl() https://color.adobe.com/tr/ https://hslpicker.com/