HesapHanem

CSS HSL'den Hex'e Dönüştürücü

HSL ton, doygunluk ve açıklık değerlerini girerek hex renk kodunu alın.

Nasıl hesaplanır?

Ton H (0–360 derece), doygunluk S ve açıklık L (ikisi de yüzde 0–100) sRGB değerlerine çevrilir. Önce renk yoğunluğu hesaplanır: C = (1 − |2L − 1|) × S. Ton, altı dilimli renk çemberinde konumlandırılır (H / 60) ve ara kanalı X = C × (1 − |(H/60 mod 2) − 1|) belirler. Ardından her kanala m = L − C/2 kaydırması eklenir, sonuç 255 ile çarpılıp 0–255 arasında tam sayıya yuvarlanır ve üç değer büyük harfli iki haneli onaltılık çiftler olarak yazılır. Aralık dışı değerlerde (360 üstü ton, 0'ın altı ya da 100'ün üstü yüzde) araç sınırlamaya çalışmaz, sonuç vermez.

Örnek hesaplama

H = 210, S = %65, L = %45 olsun. Renk yoğunluğu (1 − |0,9 − 1|) × 0,65 = 0,585 çıkar. Ton 180–240 diliminde olduğundan kırmızı 0, yeşil X = 0,2925, mavi C = 0,585 alır. Kaydırma m = 0,45 − 0,2925 = 0,1575 olur. 255 ile çarpıp yuvarlayınca kırmızı 40, yeşil 115, mavi 189 bulunur: rgb(40, 115, 189). Onaltılık karşılıkları 28, 73 ve BD olduğundan sonuç #2873BD olur.

Bu örneği dene →

Sık yapılan hatalar

  • Doygunluğu ya da açıklığı 0,65 gibi kesir olarak girmek. Araç yüzde bekler; 0,65 değeri yüzde 0,65 sayılır ve neredeyse gri bir renk çıkar.
  • Tonu negatif ya da 360'ın üstünde girmek. CSS tonu başa saracak olsa da bu araç bu değerlerde sonuç vermez; açıyı önce 0–360 aralığına indirin.
  • Açıklık 50'yi nötr bir orta ton sanmak. HSL'de yüzde 50 açıklık rengin en canlı olduğu noktadır; 0 ton ve doygunluk ne olursa olsun siyah, 100 ise beyazdır.
  • Çıktıyı küçük harfli ya da üç haneli kısa hex bekleyen bir karşılaştırmada kullanmak. Araç her zaman altı haneli büyük harfli kod verir; karşılaştırmadan önce harf boyutunu eşitleyin.
  • Aynı açıklığa sahip iki rengin aynı parlaklıkta göründüğünü varsaymak. HSL açıklığı algıya göre ayarlı değildir; aynı L değerindeki sarı ile mavi gözle çok farklı parlaklıkta görünür.

Bu hesaplama hakkında

HSL (hue, saturation, lightness — ton, doygunluk, açıklık) ve hex, CSS'te aynı sRGB rengi yazmanın iki farklı yoludur — HSL bir rengi insanın sezgisel olarak düşündüğü gibi tarif eder (hangi renk, ne kadar canlı, ne kadar açık ya da koyu), hex ise ham kırmızı, yeşil ve mavi kanal değerlerini altı haneli 16'lık taban sayısı olarak kodlar. İkisi arasında dönüşüm yapmak, önce HSL değerlerini standart HSL'den RGB'ye dönüşüm formülleriyle RGB'ye çevirmeyi, ardından her kanalı iki haneli onaltılık bir çift olarak biçimlendirmeyi gerektirir.

Bu hesaplayıcı bu dönüşümü otomatik olarak yapar; ton (0-360 derece), doygunluk ve açıklık yüzdelerini alır ve karşılığı olan büyük harfli hex kodunu verir. Bir HSL kaydırıcısında rengi sezgisel olarak seçen — çünkü açıklık ya da doygunluğu ayrı ayrı ayarlamak hex hanelerini düzenlemekten çok daha öngörülebilirdir — ama bir tasarım aracı, bir CSS değişkeni ya da hex'i standart alan bir kod tabanı için hex biçimine ihtiyaç duyan ön yüz geliştiricileri ve tasarımcılar için günlük bir araçtır.

Bu faydalı oldu mu?

En fazla 3 tepki seçebilirsiniz.

Yorumlar (1)

  • Editör ekibi

    Ton skalası için renk tonunu ve doygunluğu sabit tutup yalnızca açıklığı değiştirin. Ton 210 ve doygunluk 100 iken açıklık 40 #0066CC, 50 #0080FF, 60 ise #3399FF verir; böylece mavi ailesi tutarlı kalır. Açıklık algısal değildir, bu yüzden kontrastı ayrıca kontrol edin. Kısa hex ya da alfa kanallı 8 haneli hex gibi hangi çıktı biçimleri işinize yarar?

Popüler hesaplayıcılar

Kredi Hesaplama

Aylık taksit, toplam faiz ve ödeme planını hesaplayın.

Yüzde Hesaplama

Yüzde değişim, indirim ve oran hesaplamaları.

İndirim Hesaplama

İndirimli fiyatı, kazancı ve indirim tutarını hesaplayın.

Vücut Kitle Endeksi (VKİ)

Boy ve kiloya göre vücut kitle endeksini hesaplayın.

Yaş Hesaplama

Doğum tarihinden bugüne tam yıl, ay ve gün cinsinden yaşınızı hesaplayın.

Bileşik Faiz Hesaplama

Ana para, faiz oranı ve süreye göre bileşik faizle nihai tutarı hesaplayın.

Tüm Hesaplayıcılar