HSL'den OKLCH'ye Dönüştürücü
OKLCH rengini almak için HSL ton, doygunluk ve parlaklık değerlerini girin.
Sonuç
Nasıl hesaplanır?
Dönüşüm adım adım yürür. HSL, kroma c = (1 − |2L − 1|) × S ile 0 ile 1 arasında sRGB değerlerine çevrilir. Her kanal doğrusallaştırılır: v ≤ 0,04045 ? v ÷ 12,92 : ((v + 0,055) ÷ 1,055)2,4. Doğrusal RGB, Oklab matrislerinden (LMS karışımı, küp kök, ikinci matris) geçerek L, a ve b değerlerini verir. Son olarak C = √(a² + b²) ve H = atan2(b, a) derece olarak hesaplanır, 0 ile 360 arasında tutulur.
Girdiler ton (derece, 0–360) ile doygunluk ve parlaklıktır (yüzde, 0–100); 400 derecelik ton gibi bu aralıkların dışındaki değerler sonuç vermez. CSS metninde parlaklık bir ondalıklı yüzde, kroma dört ondalıklı, ton bir ondalıklı yazılır; CSS'e yapıştırılabilsin diye ondalık işareti her zaman noktadır. Ayrı iki satır L ve C değerini düz sayı olarak gösterir ve bunlarda Türkçe ondalık virgül kullanılır. Gri tonlarda (doygunluk 0) kroma 0 olur ve yazılan ton değerinin anlamı yoktur.
Örnek hesaplama
HSL 210, %50, %50 değerini alalım. Kroma c = (1 − 0) × 0,5 = 0,5 olduğundan sRGB kanalları R = 0,25, G = 0,5, B = 0,75 çıkar. Doğrusallaştırınca 0,0509, 0,2140 ve 0,5225 olurlar. Oklab matrisleri bunları L = 0,5856'ya çevirir; a ve b değerlerinin uzunluğu kroma C = 0,1183, açısı ise ton 250,5° verir. Araç oklch(58.6% 0.1183 250.5) yazar; CSS metninde nokta kullanıldığına dikkat edin. Tonun HSL'deki 210°'den OKLCH'de 250,5°'ye kaydığını da görün: iki ton çemberi aynı değildir.
Sık yapılan hatalar
- Tonun aynen geçeceğini sanmak. OKLCH tonu başka bir çemberdir; HSL 210 burada yaklaşık 250 olur.
- Parlaklığın aynen geçeceğini sanmak. HSL parlaklığı %50 olan orta gri, OKLCH'de yaklaşık %59,8 çıkar; çünkü OKLCH parlaklığı algılanan aydınlığı izler.
- Doygunluk ya da parlaklığı 0,5 gibi kesir yazmak. Alanlar yüzde ister, yani 50 girilmelidir.
- 360'ın üstünde veya negatif ton girip başa sarmasını beklemek. Bu değerler sarılmaz, reddedilir; 0–360 aralığını kullanın.
- Gri bir rengin tonunu anlamlı sanmak. Doygunluk 0 iken kroma 0,0000'dır ve ton sayısı keyfidir.
Bu hesaplama hakkında
HSL (ton, doygunluk, parlaklık), çoğu web geliştiricisinin aşina olduğu renk modelidir, ama “parlaklık” değeri gözün algıladığı gerçek parlaklıkla örtüşmez — aynı HSL parlaklık değerindeki tam doygun bir sarı ile tam doygun bir mavi göze çok farklı parlaklıkta görünür. Daha yeni OKLab renk uzayına dayanan ve CSS Color Module 4 standardında yer alan OKLCH, parlaklık eksenini algısal olarak tekdüze hale getirerek bu sorunu çözer; yani aynı L değeri her tonda aynı parlaklıkta görünür.
Arayüz ve tasarım sistemi geliştiricileri, parlaklık veya doygunluk programatik olarak değiştirildiğinde görsel tutarlılığını koruyan renk paletleri ve karanlık mod varyantları oluşturmak için OKLCH kullanır. Bu hesaplayıcı, girdiğiniz HSL değerini tam dönüşüm hattından — sRGB, doğrusal RGB, OKLab, ardından OKLCH — geçirerek eşdeğer parlaklık (L), doygunluk (C) ve ton (H) değerlerini üretir.
Bu faydalı oldu mu?
En fazla 3 tepki seçebilirsiniz.
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 (BMI)
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
Hesaplayıcı bulunamadı
Yorumlar (0)