Skip to content

HEX'ten HSL'ye Dönüştürücü

Herhangi bir HEX rengi tarayıcınızda HSL'ye dönüştürün — 3 haneli, 6 haneli ve alpha içeren 8 haneli HEX desteklenir. Ücretsiz, anında, kayıt yok, renkleriniz sayfadan asla çıkmaz.

Takip Yok Tarayıcıda Çalışır Ücretsiz
Tüm renk dönüşümü tarayıcınızda yerel olarak gerçekleşir. Hiçbir veri herhangi bir sunucuya gönderilmez.
Renk gamı: sRGB Display P3 Rec2020
Karşı kontrast: —
AA AA-Lg AAA AAA-Lg · APCA Lc —
Renk körlüğü simülasyonu (8 tür)
Protanopi (kırmızı-kör) —
Döteranopi (yeşil-kör) —
Tritanopi (mavi-kör) —
Akromatopsi (tam) —
Protanomali (kırmızı-zayıf) —
Döteranomali (yeşil-zayıf) —
Tritanomali (mavi-zayıf) —
Akromatomali (kısmi) —
Açık Tonlar / Koyu Tonlar / Gri Tonlar / Uyumlar

Açık Tonlar

Koyu Tonlar

Gri Tonlar

Uyumlar

Kod olarak kopyala
—
—
—
—
—
Yaygın renkler referansı
CSS Color 4 §6.4 uyumluluğu, 3/4/6/8 haneli HEX şekil desteği, alpha-çifti çözüm doğruluğu ve HEX ile HSL arasında 0-360° hue ve %0-100 S/L aralıklarında gidiş-dönüş kararlılığı için incelendi. — Go Tools Mühendislik Ekibi · May 27, 2026

HEX'ten HSL'ye Dönüştürücü Nedir?

HEX'ten HSL'ye dönüştürücü, bir HEX renk kodunu (`#3b82f6`), aynı sRGB rengini kodlayan silindirik Hue / Saturation / Lightness üçlüsüne (`hsl(217 91% 60%)`) çeviren küçük bir yardımcı programdır. HEX kodları, tasarımcıların ve geliştiricilerin Figma, Sketch, Photoshop, marka kılavuzu PDF'leri ve CSS stil sayfaları arasında yapıştırdığı kısa taban-16 dizgesidir — 1996'da IEC 61966-2-1 tarafından tanımlanan sRGB renk uzayına bağlı, 6 karakterlik bir `#RRGGBB` biçimine paketlenmiş üç 8-bit kanal. HSL, aynı renk uzayının üç tasarımcı dostu eksene silindirik yeniden şekillendirmesidir: renk tekerleği üzerinde bir renk tonu açısı, renkli bir doygunluk yüzdesi ve bir açıklık yüzdesi. Geliştiriciler sürekli olarak HEX → HSL dönüştürür: bir marka rengini CSS değişkeni olarak tanımlamak ve ardından yalnızca L'yi ayarlayarak daha açık veya daha koyu tonlar oluşturmak için, Hue'yu ve SL'yi ayrı kontroller olarak gösteren bir renk seçici arayüzünü beslemek için, bir tasarım sistemi için açık ton ve koyu ton rampaları üretmek için veya türetilmiş tema belirteçleri için `hsl(from var(--primary) h s calc(l + 10%))` aracılığıyla çalışma zamanı CSS değişken matematiği gerçekleştirmek için. Bu araç, tıklanacak bir "Dönüştür" düğmesi olmadan dönüşümü siz yazarken canlı çalıştırır ve diğer her yaygın renk biçimini (RGB, OKLCH, OKLAB, HSV, HWB, CMYK, artı 148 CSS adlandırılmış rengi) HSL çıktısının yanında ücretsiz olarak yüzeyleştirir.

**HSL biçiminin kendisi daha yakından bakmayı hak eder.** HSL = Hue (0-360°), Saturation (%0-100), Lightness (%0-100). Hue, renk tekerleği üzerindeki açısal konumdur — 0° kırmızı, 60° sarı, 120° yeşil, 180° camgöbeği, 240° mavi, 300° magenta ve 360° kırmızıya geri sarmalanır. Doygunluk, %0'dan (renksiz gri) %100'e (gri içeriği olmayan tamamen renkli) renkli yoğunluktur. Açıklık, %0'dan (renk tonundan veya doygunluktan bağımsız olarak saf siyah) %50'den (tam chroma'da saf renk tonu) %100'e (renk tonundan veya doygunluktan bağımsız olarak saf beyaz) parlaklıktır. Alvy Ray Smith, orijinal türetmeyi 1978'de erken bilgisayar grafiği itkisinin bir parçası olarak yayımladı; amacı tasarımcılara renge dair zihinsel modellerine ham RGB kanal adreslemesinden daha yakın koordinat sistemleri vermekti. Model, CSS3'ten (2010) beri CSS'tedir ve IE 9'a kadar her tarayıcıda gönderilir. Orijinal CSS sözdizimi virgül kullandı: opak için `hsl(217, 91%, 60%)`, alpha taşıyan için `hsla(217, 91%, 60%, 0.5)`. CSS Color 4 (2022'den beri W3C Aday Önerisi) modern boşlukla ayrılmış biçimi ekledi: `hsl(217 91% 60%)` ve eğik çizgi önekli alpha ile `hsl(217 91% 60% / 0.5)` — diğer CSS Color 4 işlevsel gösterimleriyle (`rgb()`, `lab()`, `oklch()`, `color()`) aynı sözdizim şekli. Hue ayrıca tur (`hsl(0.6turn 91% 60%)`) veya radyan (`hsl(3.787rad 91% 60%)`) cinsinden ifade edilebilir; hepsi kanonik derece biçimiyle eşdeğerdir. Her yaşayan tarayıcı her sözdizimsel çeşidi ayrıştırır; araç varsayılan olarak modern boşlukla ayrılmış biçimi yayar.

Dönüşüm matematiği her iki yönde de temiz çalışır. **HEX → HSL**, iki adımlı bir boru hattıdır. İlk olarak, 6 haneli HEX `#RRGGBB`'yi `parseInt(hex.slice(1, 3), 16)` vb. aracılığıyla üç 2 haneli taban-16 sayı olarak ayrıştırarak 0-255 arasında tamsayı RGB kanalları elde edin. İkinci olarak, her kanalı 255'e bölerek 0-1'e normalleştirin, ardından `max = Math.max(r, g, b)`, `min = Math.min(r, g, b)`, `delta = max - min` hesaplayın. Açıklık, max ve min'in ortalamasıdır: `L = (max + min) / 2`. Doygunluk açıklığa bağlıdır: L ≤ 0.5 olduğunda, `S = delta / (max + min)`; L > 0.5 olduğunda, `S = delta / (2 - max - min)`. CSS Color 4 §6.4 biçiminde eşdeğer olarak, `S = delta / (1 - |2L - 1|)` (delta = 0 olduğunda S = 0 ile). Hue, hangi kanalın max olduğuna göre parçalıdır: R max olduğunda, `H = ((G - B) / delta) % 6`; G max olduğunda, `H = (B - R) / delta + 2`; B max olduğunda, `H = (R - G) / delta + 4`; dereceye ölçeklendirmek için 60 ile çarpın, negatifse 360 ekleyin. Tersi (HSL → HEX, RGB üzerinden), `f(n) = L - a * max(-1, min(k-3, 9-k, 1))` yardımcı işlevini kullanır; burada `a = S * min(L, 1-L)` ve `k = (n + H/30) mod 12`, sırasıyla R, G, B üretmek için n = 0, 8, 4 ile uygulanır, ardından 0-255'e ölçeklenir ve HEX kodlanır.

**HSL hâlâ neden kullanışlıdır.** Sezgisel kaydırıcılar — L'yi ayarlamak renk tonu kimliğini bozmadan öngörülebilir şekilde açıklatır veya koyulaştırır, RGB kanalını ayarlamak ise daha az öngörülebilir bir renk kayması üretir. Çalışma zamanı CSS matematiği — modern tarayıcılar, oluşturma zamanında tema belirteçleri türetmek için `hsl(from var(--primary) h s calc(l + 10%))` destekler. Tasarımcı bilişi — HSV renk seçicileriyle büyüyen tasarımcılar, dosya HEX gönderse bile renk hakkında hue + chroma terimleriyle düşünür. **HSL'nin sorunu**, Açıklık ekseninin algısal olarak tek tip olmamasıdır — L=%50'deki bir yeşil, L=%50'deki bir maviden gözle görülür şekilde daha parlak görünür çünkü HSL, sRGB'nin gamma tuhaflıklarını miras alır ve her renk tonunu L ölçeğinde eşdeğer olarak ele alır. Algısal tek tipliğe ihtiyacınız olduğunda (her adımın eşit derecede parlak görünmesi gereken palet üretimi, mavi metni yeşil metinden okumayı yanlışlıkla zorlaştırmayan koyu mod belirteci hesaplama), bunun yerine OKLCH'ye uzanın — aynı araç her ikisini de yüzeyleştirir, böylece seçim bir bakış uzaklıktadır.

Bu aracın HEX → HSL iş akışı, hepsi aynı altyapıdaki birleşik renk dönüştürücüyü paylaşan 5 maçalı bir ailenin bir yönüdür. Özel birleşik renk dönüştürücü merkezdir — 9 biçimin tümünü eşzamanlı olarak düzenlenebilir gösterir ve iş akışınız yalnızca HEX ve HSL'den fazlasına ihtiyaç duyduğunda doğru araçtır. Tek yönlü maçalar belirli Google arama amaçlarını hedefler: canvas-ve-donanım yönü için HEX'ten RGB'ye dönüştürücü, ters yön için RGB'den HEX'e dönüştürücü, modern algısal olarak tek tip tasarım sistemleri için HEX'ten OKLCH'ye dönüştürücü (Tailwind v4 ve shadcn ikisi de artık varsayılan olarak OKLCH'dir) ve baskı hazırlık yaklaşımları için HEX'ten CMYK'ya dönüştürücü. Beş maça ve merkez aynı ayrıştırma motorunu ve aynı dönüşüm matematiğini paylaşır, böylece sonuçların aile genelinde aynı olması garanti edilir. Her dönüşüm tarayıcınızda yerel olarak çalışır — HEX kodlarınız asla yüklenmez, asla kaydedilmez ve siz yazarken sıfır ağ isteği tetiklenir. DevTools'ta doğrulayın.

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

Temel Özellikler

Beş HEX Şeklinin Tümü Aynı Şekilde Ayrıştırılır

3 haneli `#F73`, 4 haneli alpha `#F738`, 6 haneli `#3b82f6`, 8 haneli alpha `#FF573380`, artı her biri için `#` olmadan varyant. Ayrıştırıcı, HSL'yi türetmeden önce hepsini aynı dahili renge normalleştirir, böylece kısa biçimi önce elle genişletmek zorunda kalmadan kaynağınızın kullandığı şekli yapıştırabilirsiniz. Büyük/küçük harf de normalleştirilir — `#3b82f6` ve `#3B82F6` aynı HSL çıktısını üretir.

Modern Boşlukla Ayrılmış Sözdiziminde HSL Çıktısı

HSL alanı, değeri CSS Color 4'ün modern biçiminde yüzeyleştirir: opak renkler için `hsl(217 91% 60%)`, alpha taşıyanlar için `hsl(217 91% 60% / 0.5)`. Her iki şekil de tüm yaşayan tarayıcılarda çalışır (Chrome 65+, Safari 13+, Firefox 52+). Eski virgül biçimi `hsl(217, 91%, 60%)`, hedefinizin gerektirmesi durumunda tek bir mekanik değiştirme uzaklıktadır; modern sözdizimi yeni kodda tercih edilir çünkü CSS Color 4'ün diğer işlevsel sözdizimleriyle hizalanır.

OKLCH Kaynak-Doğru, HSL Merkezli Değil

Bu maça özellikle HEX → HSL'yi hedeflese de, paylaşılan altyapı dönüştürücüsü kanonik rengi dahili olarak bir OKLCH üçlüsü olarak tutar. Bu, HEX → HSL → RGB → OKLAB → HEX gidiş-dönüşlerinin adım başına float sapması olmadan gerçekleştiği anlamına gelir; HSL'yi merkez olarak yönlendiren eski dönüştürücüler her dönüşümde yuvarlama hatası biriktirir ve birkaç dönüşüm üzerinde renk tonunu birkaç derece kaydırabilir. OKLCH merkezi, diğer her biçimi aynı kaynak noktasına matematiksel olarak demirler.

Alpha Kanalı Temiz Çözülür

Alpha ile 8 haneli ve 4 haneli HEX (`#RRGGBBAA` ve `#RGBA`) doğru ayrıştırılır. Sondaki çift bir 0-1 alpha float'una eşler: `00` → 0, `80` → 0.502, `FF` → 1. Çıktı varsayılan olarak CSS Color 4'ün eğik çizgi sözdizimini (`hsl(217 91% 60% / 0.5)`) kullanır; eski `hsla(217, 91%, 60%, 0.5)` biçimi tek bir değiştirme uzaklıktadır. Alpha değerlerinin 8 haneli HEX kodlarına gömülmüş olabileceği tasarım belirteci geçişi için kullanışlıdır.

Eşzamanlı Olarak Görünen Sekiz Diğer Biçim

Yapıştırdığınız aynı HEX ayrıca RGB, HSV, HWB, OKLCH, OKLAB, CMYK ve en yakın CSS adlandırılmış rengini de sürer — hepsi aynı sayfada bir bakışta görünür. Yalnızca HEX → HSL ile sınırlı değilsiniz. Bir takım arkadaşı bir Tailwind v4 belirteci için (algısal tek tipliliğin HSL'nin gamma-tuhaf L'sinden daha önemli olduğu yerde) OKLCH üçlüsüne, belgelendirme düz yazısı için en yakın adlandırılmış renge veya bir canvas çağrısı için RGB demetine ihtiyaç duyduğunda, değerler kendi Kopyala düğmeleriyle zaten oradadır.

WCAG + APCA Kontrastı Yerleşik

Bir HEX'i geçirin ve kontrast satırı onu hem WCAG 2.1 (düzenleyici taban: gövde metni için 4.5:1, AAA için 7:1) hem de APCA Lc (önerilen WCAG 3 ardılı: gövde metni için `|Lc| ≥ 75` hedef) kullanarak hem beyaza hem de siyaha karşı anında puanlar. Bir marka HEX'ini HSL'ye dönüştürdüğünüzde ve elde edilen rengin (veya açıklığı ayarlanmış bir varyantın) gerçekten gövde metni rengi olarak okunabilir olduğunu göndermeden önce doğrulamak istediğinizde kullanışlıdır.

CSS / Tailwind v4 / SwiftUI / Compose / Flutter Olarak Kopyala

Seçicinin altındaki Kod olarak kopyala bölümü, geçerli rengi beş platform için yapıştırmaya hazır parçacıklara çevirir: CSS özel özelliği (`--color-brand: hsl(217 91% 60%)`), Tailwind v4 `@theme` belirteci, SwiftUI `Color(hue:saturation:brightness:)` literal'i, Jetpack Compose `Color.hsl(217f, 0.91f, 0.60f)` sabiti, Flutter `HSLColor.fromAHSL(...)`. Her platformun beklediği tam sözdizimi, bir iOS varlık kataloğuna, Android tema dosyasına veya Flutter `ThemeData` içine bırakmaya hazır.

%100 Tarayıcı İçi — Yükleme Yok, İzleme Yok

Tüm HEX ayrıştırma, HSL dönüşümü, kontrast puanlaması ve palet üretimi tarayıcınızda yerel olarak çalışır. HEX kodlarınız asla iletilmez, hiçbir sunucuda asla kaydedilmez, asla analiz edilmez. Siz yazarken sıfır ağ isteği — DevTools'ta doğrulayın. Duyurulmamış marka paletleri, dahili tasarım belirteçleri, NDA altındaki taslak mock'lar ve diğer gizli renk çalışmaları için güvenli.

Tam Renk için Paylaşılabilir URL Hash'i

Geçerli renk her değişiklikte URL hash'ine otomatik olarak `#hex=3b82f6` olarak kodlanır. URL'yi kopyalayın, bir Slack iş parçacığına veya bir GitHub sorununa yapıştırın ve onu açan herkes aynı HEX ile aynı HSL üçlüsüne düşer. Hash yalnızca adres çubuğunuzda yaşar ve sunucuya asla iletilmez (tarayıcılar URL parçalarını HTTP isteklerine dahil etmez), bu yüzden bağlantıyı paylaşmak bile rengi herhangi bir üçüncü tarafa sızdırmaz.

HEX'ten HSL'ye Dönüştürücü Alternatifleri

RapidTables Hex to HSL

tarayıcı aracı

"hex to hsl" için varsayılan Google sonucu — HEX girişi, HSL çıkışı olan tek yönlü bir form, başka biçim görünmez. Aramadan gelirken tek seferlik aramalar için yararlı. OKLCH, kontrast denetimi, renk gamı algılama, alpha işleme ve çoklu biçim eşzamanlı görünümünden yoksun. Bu araç, sade tek-dönüşüm durumu dışında her eksende kazanır.

ColorHexa

tarayıcı aracı

Derin meta verilerle uzun süredir devam eden renk başına SEO sayfaları: sorguladığınız herhangi bir HEX için dönüşümler, paletler, uyumlar, gradyanlar. Arayüz eskimiş (2010 başı), OKLCH desteği yok, APCA kontrast yok, geniş gamlı işleme yok. Belirli bir HEX'in Google üzerinden SEO keşfi için güçlü; birleşik alan kullanıcı deneyimine yazmanın daha hızlı olduğu aktif dönüşüm iş akışları için daha zayıf.

W3Schools HSL Hesaplayıcı

tarayıcı aracı

Öğretime odaklı bir sayfada yeni başlayanlar için uygun HEX/RGB/HSL geçişi, arama sonuçlarında her yerde. OKLCH yok, hsla ötesinde alpha işleme yok, gelişmiş özellik yok. W3Schools'un açıklayıcı içeriğinin yanında referans olarak yararlı. Bu araç diğer her eksende kazanır: daha fazla biçim, algısal matematik, renk gamı + kontrast + renk körlüğü özellikleri, Tailwind v4 / SwiftUI / Compose / Flutter için modern kod dışa aktarımı.

Tarayıcı DevTools Renk Seçici

yerleşik tarayıcı özelliği

Chrome, Firefox ve Safari DevTools'un tümü, CSS bölmesinde bir renk örneğine tıkladığınızda HEX, RGB ve HSL arasında satır içi geçiş yapan bir renk seçici gönderir. Ücretsiz, kurulum yok, her zaman kullanılabilir. OKLCH'den, paylaşılabilir URL'lerden, web olmayan platformlar için (SwiftUI, Compose) kod dışa aktarımından yoksun. Zaten CSS hata ayıklıyorsanız DevTools'a uzanın; çapraz platform çıktıya ihtiyacınız olduğunda bu araca uzanın.

Mothereff'in HSL Renk Seçicisi

tarayıcı aracı

Canlı hue/doygunluk/açıklık kaydırıcılarına ve bir HEX çıkışına sahip odaklanmış bir HSL seçicisi. Minimal arayüz, hızlı HSL keşfi için iyi. OKLCH'den ve daha geniş biçim ızgarasından yoksun; kontrast veya renk gamı özelliği yok. Odaklanmış HSL-only aracı olarak yararlı; bu araç aynı iş akışını artı 8 diğer biçim görünümünü ve algısal denetimleri kapsar.

ConvertingColors

tarayıcı aracı

Birçok uzayı (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB) kapsayan renk başına SEO sayfaları. Modern OKLCH desteğinden ve birleşik alan düzenleme kullanıcı deneyiminden yoksun. Otomatik üretilen içerik sayfaları içerik-çiftliği hissi verir ancak dönüşüm verileri doğrudur. Google üzerinden bireysel renk meta verilerini incelemek için iyi; bu araç aktif iş akışları için daha hızlıdır.

HEX'ten HSL'ye Örnekleri

Bir marka rengi için CSS değişkeni tanımı

#3b82f6

HSL çıktısı: `hsl(217 91% 60%)`. HSL üzerine kurulu bir tasarım sistemi için kanonik iş akışı: markayı bir kez `--primary: hsl(217 91% 60%)` olarak tanımlayın, ardından yalnızca L yüzdesini ayarlayarak daha açık tonlar oluşturun — bir hover açık tonu için `hsl(217 91% 70%)`, devre dışı durum için `hsl(217 91% 80%)`, hafif bir arka plan dolgusu için `hsl(217 91% 90%)`. Renk tonu ve doygunluk kilitli kalır, böylece aile tutarlı bir rampa olarak okunur. RGB tabanlı stil sayfaları adım başına üç koordineli kanal düzenlemesi gerektirir; HSL bir tane gerektirir.

Figma rengini HSL seçicisine çeviren tasarımcı

#FF5733

HSL çıktısı: `hsl(11 100% 60%)`. Renk hakkında hue + doygunluk + açıklık terimleriyle düşünen tasarımcılar (Munsell'in 1905'te resmileştirdiği bilişsel model), kaynak-doğru dosya HEX gönderse bile genellikle HSL üçlüsünü ister. Hue = 11°, bunu turuncu diliminin kırmızı tarafına yerleştirir; doygunluk = %100, kanalın tamamen renkli olduğu anlamına gelir; açıklık = %60, orta noktanın bir adım üzerindedir. Figma HEX'ini bir kez yapıştırmak, tasarımcının zihinsel seçicisine bir renk-tekerleği tahmini olmadan bırakmaya hazır eşleşen HSL'yi üretir.

Bir palet için hızlı açıklık taraması

#3b82f6

HSL çıktısı: `hsl(217 91% 60%)`. HSL üçlüsü elinizde varken, açık ton rampası üretmek tek boyutlu bir taramadır: beyaza tırmanmak için L'yi `hsl(217 91% 70%)` için %70'e, `hsl(217 91% 80%)` için %80'e, `hsl(217 91% 90%)` için %90'a çevirin; daha koyu tonlar için %50, %40, %30'a düşürün. Tüm 9 adımlı rampa tek bir sayıyı değiştirmekten ortaya çıkar. Renk tonu ve doygunluk sabit kaldığı için açık tonlar ve koyu tonlar tonal olarak ilişkili kalır — OKLCH algısal olarak tek tip rampaları ucuzlaştırmadan önce eski tasarım sistemlerinin kullandığı numara.

Alpha ile 8 haneli HEX → hsla()

#FF573380

HSL çıktısı: `hsl(11 100% 60% / 0.5)`. Son çift (`80`), `128/255 ≈ 0.502` olarak çözülür ve CSS Color 4'ün eğik çizgi sözdizimi aracılığıyla alpha kanalı olarak yüzeyleştirilir. Eşdeğer eski biçim `hsla(11, 100%, 60%, 0.5)`'tir; IE 9'dan beri her tarayıcıda desteklenir ve eski ön işlemcilerin beklediği şeydir. Alpha ile 8 haneli HEX, 2018'de tüm yaşayan tarayıcılarda yerel olarak gönderildi; ondan önce alpha, açıkça `hsla()` işlevi aracılığıyla gelmek zorundaydı.

Yaygın HEX → HSL Dönüşümleri

En çok dönüştürülen 10 HEX kodunun ve HSL eşdeğerlerinin referans tablosu — saf primerler, saf sekonderler ve Tailwind paletinden iki gerçek dünya marka rengi.

Siyah

#000000 → hsl(0 0% 0%)

Saf siyah. Açıklık %0'da — yayılan ışığın yokluğu. Renk tonu ve doygunluk, griler için geleneksel olarak 0'dır.

#000000 → hsl(0 0% 0%)

Bir ekranda saf siyah nadiren doğru tasarım seçimidir — daha yumuşak gövde metni için `hsl(0 0% 7%)` veya OKLCH algısal açıklık 0.1-0.15 deneyin.

Bunun yerine algısal olarak tek tip çıktıya mı ihtiyacınız var? Özel HEX'ten OKLCH'ye dönüştürücüyü deneyin — her L adımı, HSL'nin aksine, renk tonları arasında eşit derecede parlak görünür.

Beyaz

#FFFFFF → hsl(0 0% 100%)

Saf beyaz. Açıklık %100'de — mümkün olan en parlak sRGB rengi. Renk tonu ve doygunluk, griler için geleneksel olarak 0'dır.

#FFFFFF → hsl(0 0% 100%)

Saf beyaz arka planlar karanlık ortamlarda göz yorgunluğu üretebilir — daha sıcak alternatifler için `hsl(0 0% 98%)` veya OKLCH 0.98 deneyin.

Bunun yerine algısal olarak tek tip çıktıya mı ihtiyacınız var? Özel HEX'ten OKLCH'ye dönüştürücüyü deneyin — her L adımı, HSL'nin aksine, renk tonları arasında eşit derecede parlak görünür.

Kırmızı

#FF0000 → hsl(0 100% 50%)

Saf kırmızı. Hue 0°'de (tekerleğin başlangıç konumu), doygunluk tamamen renkli, açıklık saf renk tonlarının yaşadığı orta noktada.

#FF0000 → hsl(0 100% 50%)

Saf kırmızı oldukça doygundur ve nadiren bir marka paletine uyar — çoğu "kırmızı" marka rengi `hsl(0 73% 50%)` (#DC2626)'a daha yakın oturur.

Bunun yerine algısal olarak tek tip çıktıya mı ihtiyacınız var? Özel HEX'ten OKLCH'ye dönüştürücüyü deneyin — her L adımı, HSL'nin aksine, renk tonları arasında eşit derecede parlak görünür.

Yeşil

#00FF00 → hsl(120 100% 50%)

Saf yeşil. Hue 120°'de (tekerleğin üçte birinde), doygunluk tamamen renkli, açıklık %50'de. CSS adlandırılmış rengi `lime`.

#00FF00 → hsl(120 100% 50%)

CSS anahtar sözcüğü `green`, #00FF00 değil, #008000'e (hsl(120 100% 25%)) çözülür — sık bir kafa karışıklığı kaynağı. Saf hsl(120 100% 50%) için `lime` kullanın.

Bunun yerine algısal olarak tek tip çıktıya mı ihtiyacınız var? Özel HEX'ten OKLCH'ye dönüştürücüyü deneyin — her L adımı, HSL'nin aksine, renk tonları arasında eşit derecede parlak görünür.

Mavi

#0000FF → hsl(240 100% 50%)

Saf mavi. Hue 240°'de (tekerleğin üçte ikisinde), doygunluk tamamen renkli, açıklık orta noktada.

#0000FF → hsl(240 100% 50%)

Beyaz arka plan üzerinde saf mavi, WCAG AA kontrastında başarısız olur (3.7:1) — gövde metni için `hsl(224 76% 48%)` (Tailwind blue-700) düşünün.

Bunun yerine algısal olarak tek tip çıktıya mı ihtiyacınız var? Özel HEX'ten OKLCH'ye dönüştürücüyü deneyin — her L adımı, HSL'nin aksine, renk tonları arasında eşit derecede parlak görünür.

Camgöbeği

#00FFFF → hsl(180 100% 50%)

Camgöbeği. Hue 180°'de (tekerleğin orta noktası, kırmızının karşısında), doygunluk tamamen renkli, açıklık saf renk tonu orta noktasında. CSS adlandırılmış rengi `cyan` veya `aqua`.

#00FFFF → hsl(180 100% 50%)

Camgöbeği, tekerlekte kırmızının karşısında oturur (180°/0°), bu da onu herhangi bir kırmızı ailesi marka rengi için doğal tümleyici uyum ortağı yapar.

Bunun yerine algısal olarak tek tip çıktıya mı ihtiyacınız var? Özel HEX'ten OKLCH'ye dönüştürücüyü deneyin — her L adımı, HSL'nin aksine, renk tonları arasında eşit derecede parlak görünür.

Magenta

#FF00FF → hsl(300 100% 50%)

Magenta. Hue 300°'de (tekerleğin altıda beşinde), doygunluk tamamen renkli, açıklık saf renk tonu orta noktasında. CSS adlandırılmış rengi `magenta` veya `fuchsia`.

#FF00FF → hsl(300 100% 50%)

Magenta, tekerlekte yeşilin karşısında oturur (300°/120°), bu da onu herhangi bir yeşil ailesi marka rengi için doğal tümleyici uyum ortağı yapar.

Bunun yerine algısal olarak tek tip çıktıya mı ihtiyacınız var? Özel HEX'ten OKLCH'ye dönüştürücüyü deneyin — her L adımı, HSL'nin aksine, renk tonları arasında eşit derecede parlak görünür.

Sarı

#FFFF00 → hsl(60 100% 50%)

Sarı. Hue 60°'de (tekerleğin altıda birinde, kırmızı ile yeşil arasında), doygunluk tamamen renkli, açıklık saf renk tonu orta noktasında.

#FFFF00 → hsl(60 100% 50%)

hsl(60 100% 50%)'deki sarı, hsl(0 100% 50%)'deki kırmızıdan çok daha parlak görünür — HSL'nin algısal tek tip olmamasının canlı bir örneği. OKLCH bunu normalleştirir.

Bunun yerine algısal olarak tek tip çıktıya mı ihtiyacınız var? Özel HEX'ten OKLCH'ye dönüştürücüyü deneyin — her L adımı, HSL'nin aksine, renk tonları arasında eşit derecede parlak görünür.

Tailwind blue-500

#3b82f6 → hsl(217 91% 60%)

Tailwind CSS'in varsayılan blue-500 marka rengi — 2020'lerin ortasının kanonik "web mavisi". Sayısız panoda, pazarlama sitesinde ve yönetici aracında kullanılır.

#3b82f6 → hsl(217 91% 60%)

Tailwind v4, algısal olarak tek tip rampalar için blue-500'ü OKLCH'de (`oklch(0.629 0.193 263.4)`) yeniden tanımlar — HSL, v3 geri dönüşüdür.

Bunun yerine algısal olarak tek tip çıktıya mı ihtiyacınız var? Özel HEX'ten OKLCH'ye dönüştürücüyü deneyin — her L adımı, HSL'nin aksine, renk tonları arasında eşit derecede parlak görünür.

Tailwind rose-500

#f43f5e → hsl(350 89% 60%)

Tailwind CSS'in varsayılan rose-500'ü — yüksek doygunluklu pembe-kırmızı, vurgu düğmeleri, uyarı durumları ve marka kontrastı için yaygın olarak kullanılır.

#f43f5e → hsl(350 89% 60%)

Rose-500'ün renk tonu (350°), tekerlekte kırmızının (0°/360°) hemen önünde oturur — saf kırmızıdan daha sıcak okunan hafif bir pembe kayması.

Bunun yerine algısal olarak tek tip çıktıya mı ihtiyacınız var? Özel HEX'ten OKLCH'ye dönüştürücüyü deneyin — her L adımı, HSL'nin aksine, renk tonları arasında eşit derecede parlak görünür.

HEX'ten HSL'ye Dönüştürücü Nasıl Kullanılır

  1. 1

    HEX alanına bir HEX kodu yapıştırın

    Herhangi bir HEX değerini HEX girdisine bırakın — baştaki `#` ile veya `#` olmadan, 3 haneli kısa biçimde (`#F73`), 6 haneli tam biçimde (`#3b82f6`), 4 haneli alpha kısa biçiminde (`#F738`) veya 8 haneli alpha tam biçiminde (`#FF573380`). Araç, beş girdi şeklinin tümünü dahili olarak aynı kanonik renge normalleştirir. Büyük/küçük harf önemli değildir (`#3b82f6` ve `#3B82F6` aynı şekilde ayrıştırılır). Geçersiz karakterler veya yanlış hane sayıları sessiz bir satır içi hata üretir; geçerli HEX, HSL dahil diğer her biçim alanını gerçek zamanlı olarak günceller.

  2. 2

    HSL üçlüsünü HSL alanından okuyun

    HEX alanının altındaki HSL alanı, eşleşen `hsl()` değerini CSS Color 4'ün modern boşlukla ayrılmış sözdiziminde gösterir: opak bir renk için `hsl(217 91% 60%)`, alpha taşıyan bir renk için `hsl(217 91% 60% / 0.5)`. Hue, 0 ile 360 arasında bir tamsayı derecedir; doygunluk ve açıklık 0 ile 100 arasında tamsayı yüzdelerdir. Değerler görüntü okunabilirliği için yuvarlanır — aracın dahili OKLCH kaynak-doğru yaklaşımı, altta yatan hassasiyetin float olduğu anlamına gelir, böylece HEX'e geri dönüş kararlı kalır.

  3. 3

    HSL dizgesini almak için Kopyala'ya tıklayın

    Her biçim kartının sağında bir Kopyala düğmesi vardır. Tek tık ve değer panonuza iner — düğme etiketi kısaca "Kopyalandı!" olarak değişir, böylece bilirsiniz. Kopyalanan dizge kanonik CSS Color 4 sözdizimidir (`hsl(217 91% 60%)`); hedefiniz eski virgül biçimini (`hsl(217, 91%, 60%)`) gerektiriyorsa dönüşüm mekaniktir. Platforma özgü çıktı (Tailwind v4, SwiftUI, Compose, Flutter) için seçicinin altındaki Kod olarak kopyala bölümünü kullanın — bu parçacıklar, her platformun yerel olarak beklediği biçimi yayar.

  4. 4

    Ayrıca görünür: RGB, OKLCH, OKLAB, HSV, HWB, CMYK, adlandırılmış renk

    Yapıştırdığınız aynı HEX, diğer biçim alanlarını da aydınlatır — canvas çağrıları ve donanım için RGB, algısal olarak tek tip tasarım sistemleri için OKLCH ve OKLAB, tasarımcı renk seçici iş akışları için HSV ve HWB, baskı tahminleri için CMYK ve belgelendirme düz yazısı için en yakın CSS adlandırılmış rengi. Yalnızca HEX → HSL ile sınırlı değilsiniz. Bir Tailwind v4 `@theme` bloğu için (algısal açıklığın HSL'nin gamma-tuhaf L'sinden daha önemli olduğu yerde) OKLCH üçlüsüne de ihtiyacınız varsa, kendi Kopyala düğmesiyle OKLCH alanında orada bekliyor.

  5. 5

    Açıklığı görsel olarak taramak için seçiciyi kullanın

    Biçim ızgarasının altında, görsel keşif için bir SL karesi + renk tonu kaydırıcısı + alpha kaydırıcısı bulunur. SL karesi, HSL'nin Doygunluk × Açıklık düzlemine doğrudan eşlenir: HSL alanının gerçek zamanlı güncellendiğini izlerken L'yi %0'dan %100'e yürümek için dikey olarak sürükleyin. Tam yüzdeyi sabitlemeden önce görsel olarak bir açık ton veya koyu ton üretmek için kullanışlıdır. Chromium tabanlı tarayıcılarda (Chrome, Edge, Brave) Damlalık düğmesi yerel `EyeDropper` API'sini etkinleştirir — tarayıcı penceresinin dışı dahil ekrandaki herhangi bir pikseli örneklemek için.

Yaygın HEX / HSL Hataları

HSL Açıklığının Algısal Olarak Tek Tip Olduğunu Varsaymak

`hsl(120 100% 50%)`'deki bir yeşil, `hsl(240 100% 50%)`'deki bir maviden gözle görülür şekilde daha parlak görünür, her ikisi de L=%50'de olsa bile. L'yi tarayarak açık ton rampaları üretmek, renk tonları arasında eşitsiz görünen sonuçlar üretir — yeşil rampanın açık ucu, mavi rampanın açık ucundan daha hızlı tırmanır. Bu, kodunuzdaki bir hata değil, HSL'nin sRGB'nin gamma tuhaflıklarını miras almasının yapısal bir özelliğidir. Algısal olarak tek tip rampalar için OKLCH'ye geçin.

✗ Yanlış 
9 adımlı bir palet için HSL L'yi tarayın:
hsl(120 100% 50%) ve hsl(240 100% 50%) aynı L'de
Parlaklıkta gözle görülür şekilde farklı görünür — palet eşitsiz hissettirir.
✓ Doğru 
Bunun yerine OKLCH L'yi tarayın:
oklch(0.7 0.2 130) ve oklch(0.7 0.2 250)
Eşit derecede parlak görünür; palet tüm renk tonlarında tutarlı okunur.

Hue'nun 360°'de Sarmalandığını Unutmak

HSL hue açısaldır — `hsl(370 91% 60%)`, `hsl(10 91% 60%)` olarak yorumlanır çünkü 370° mod 360° = 10°. Hue'yu 350°'den 380°'ye animasyon yapmak 360°/0° boyunca temiz olarak sarmalanır (ince bir kırmızı dilim), ancak H=350'den H=10'a yanlış yönde doğrusal olarak ara değer hesaplamak *uzun* yolu camgöbeği, yeşil, sarı üzerinden alır — 320° sapma. Kısa yolu seçmek için `Math.min(diff, 360 - diff)` kullanın veya bir renk kütüphanesinin yerleşik hue ara değer hesaplamasını kullanın.

✗ Yanlış 
H=350'den H=10'a doğrusal ara değer hesaplama:
(350 + 10) / 2 = 180° (camgöbeği orta noktası)
Yanlış — tekerlek etrafında uzun yoldan gider.
✓ Doğru 
Kısa yol hue ara değer hesaplaması:
orta = ((350 + 10 + 360) / 2) % 360 = 0° (kırmızı orta noktası)
Kırmızıdan geçer, tekerlek etrafında kısa yol.

HSL'yi HSV ile Karıştırmak

HSL ve HSV hue eksenini paylaşır ancak üçüncü eksenlerinde farklılık gösterir. HSL'nin Açıklığı simetriktir — %0 siyah, %50 saf renk tonu, %100 beyaz. HSV'nin Değeri asimetriktir — %0 siyah, %100 saf renk tonu, beyaz yalnızca Doygunluk 0'a düştüğünde. `hsl(0 100% 100%)` beyazdır; `hsv(0 100% 100%)` saf kırmızıdır. Birçok renk kütüphanesi ve tasarım aracı (Photoshop'un HSB seçicisi, Sketch'in renk paneli) HSV kullanır — iki sistem arasında dönüştürmeden değerleri kopyalamak son derece farklı renkler üretir.

✗ Yanlış 
Photoshop'tan HSV değerlerini bir CSS hsl() kuralına yapıştırın:
Photoshop HSB 0, 100, 100 (saf kırmızı)
CSS hsl(0 100% 100%) beyaz olarak işlenir — tamamen yanlış renk.
✓ Doğru 
CSS'e yapıştırmadan önce HSV → HSL dönüşümü yapın:
HSV 0, 100, 100 → HSL 0, 100%, 50%
CSS hsl(0 100% 50%) saf kırmızı olarak işlenir — doğru.

HSL'de Yüzde İşaretlerini Düşürmek

HSL'nin S ve L eksenleri CSS'te `%` son ekini gerektirir — `hsl(217 91 60)` her tarayıcıda bir ayrıştırma hatasıdır; doğru biçim `hsl(217 91% 60%)`'tir. Yalnızca Hue boyutsuzdur (birimi derecedir, ancak son ek isteğe bağlıdır). Birçok geçici dönüştürücü, HSL çıktılarında yüzde işaretlerini yaymayı unutur ve yapıştırıldığında sessizce başarısız olan geçersiz CSS üretir. Araç, HSL alanında her zaman yüzde işaretlerini yayar.

✗ Yanlış 
Yüzde işaretleri olmadan HSL yayın:
hsl(217 91 60)
CSS ayrıştırma hatası — her tarayıcı tüm kuralı yok sayar.
✓ Doğru 
S ve L üzerinde yüzde işaretleriyle HSL yayın:
hsl(217 91% 60%)
Geçerli CSS — her yaşayan tarayıcı ve IE 9+'da çalışır.

HEX'ten HSL'ye Kimler Kullanır

HSL CSS Değişkenleri Tanımlayan Ön Uç Geliştiriciler
Figma HEX'inden `--primary: hsl(217 91% 60%)`'yi bir kez tanımlayın, ardından yalnızca L sayısını ayarlayarak `--primary-hover: hsl(217 91% 70%)`, `--primary-active: hsl(217 91% 50%)`, `--primary-bg: hsl(217 91% 95%)` oluşturun. HEX'i bir kez yapıştırın, HSL üçlüsünü okuyun, CSS özel özellik bloğuna bırakın. OKLCH tabanlı rampalar devralmadan önce eski tasarım sistemlerinin açık tonları ve koyu tonları tonal olarak tutarlı tutmak için kullandığı desen.
HEX'i HSL Seçicisine Çeviren Tasarımcılar
Hue + doygunluk + değer seçicileriyle (Adobe, Sketch, Figma'nın HSB modu) büyüyen tasarımcılar, kaynak dosya HEX gönderse bile genellikle HSL üçlüsünü ister. HEX'i bir kez yapıştırmak, tasarımcının zihinsel renk-tekerleği konumuna elle tahmin olmadan okumaya hazır eşleşen HSL'yi üretir. Bir marka rengi spesifikasyonunu incelerken ve onun ailedeki diğer marka renklerine göre renk tonu tekerleğinde nereye oturduğunu bilmek isterken yararlıdır.
Koyu Mod Belirteçlerini Hesaplayan Tema Sistemi Yazarları
Koyu mod tematizasyonu genellikle H ve S'yi korurken L'yi ters çevirir — bir açık mod `hsl(217 91% 60%)` primary, bir koyu mod `hsl(217 91% 40%)`'a (veya benzeri) eşlenir. Açık mod HEX'ini yapıştırın, HSL'yi okuyun, koyu mod L'sini hesaplayın, yeni HSL'yi koyu tema belirtecine geri yazın. HSL üçlüsü elinizdeyken desen mekaniktir; ham RGB kanallarıyla yapmak çok daha zahmetlidir.
Açık Ton ve Koyu Ton Rampaları Üreten Tasarım Sistemi Yazarları
L'yi tarayarak 9 adımlı bir açık ton/koyu ton rampası üretin: `hsl(217 91% 95%)` (en açık), %85, %75, %65, %55, %45, %35, %25, `hsl(217 91% 15%)` (en koyu). Temel HEX'i yapıştırın, HSL'yi okuyun, L'yi %10'luk adımlarla zihinsel olarak veya kodda tarayın. (Her adımın eşit derecede parlak göründüğü algısal olarak tek tip rampalar için yandaki OKLCH alanına geçin — HSL rampaları renk tonları arasında eşitsiz görünür çünkü L algısal olarak tek tip değildir.)
Çalışma Zamanı hsl(from ...) Matematiği Kullanan CSS Yazarları
Modern CSS, `color-function-from` sözdizimini destekler: `hsl(from var(--primary) h s calc(l + 10%))`, her adımı önceden hesaplamadan `--primary`'nin daha açık bir varyantını oluşturma zamanında türetir. Marka HEX'ini yapıştırın, HSL üçlüsünü doğrulayın, temeli bir CSS değişkenine bırakın ve türetilmiş belirteçler için çalışma zamanı matematiğini kullanın. Chrome 119+, Safari 17.2+, Firefox 128+'da gönderilir.
Tailwind v3 HSL Belirteç Setleri Oluşturan Ön Uç Geliştiriciler
Tailwind v3, tema renklerini CSS değişkenlerinde boşlukla ayrılmış HSL üçlüleri olarak (`--primary: 217 91% 60%`) sakladı; `tailwind.config.js`'te `hsl(var(--primary))` aracılığıyla oluşturuldu. Marka HEX'ini yapıştırın, HSL'yi okuyun, üç sayıyı (`hsl(...)` sarmalayıcısı olmadan) değişken tanımına bırakın. Tailwind v4 o zamandan beri OKLCH-öncelikli'ye döndü, ancak v3 kod tabanları hâlâ HSL desenini kullanır ve yıllarca kullanmaya devam edecek.
HEX'i HSL Kontrollerine Eşleyen Renk Seçici Arayüzü Yazarları
Hue / doygunluk / açıklığı üç ayrı kaydırıcı olarak ortaya çıkaran bir renk seçici inşa etmek (klasik Adobe stili arayüz), gelen bir HEX'i seçicinin üç kontrolüne eşlemek anlamına gelir. HEX'i burada yapıştırın, HSL üçlüsünü okuyun, üç kaydırıcıyı programatik olarak konumlandırın. Dönüşüm, seçicinizin dahili olarak çalıştıracağı dönüşümün aynısıdır; bu araç ara değerleri hata ayıklama için yüzeyleştirir.
Kontrast için Marka Rengi Açıklığını Ayarlayan Erişilebilirlik Mühendisleri
Bir marka rengi bir arka plana karşı WCAG kontrastında başarısız olduğunda, ucuz düzeltme oran netleşene kadar L'yi yükseltmektir — H veya S değişmeden, renk hâlâ aynı marka kimliği olarak okunur. Marka HEX'ini yapıştırın, kontrast rozetlerini izleyin, hem WCAG hem de APCA geçene kadar L'yi zihinsel olarak (veya seçicinin L eksenini kullanarak) ayarlayın. HSL alanı, spesifikasyon belgesi için yeni L yüzdesini yüzeyleştirir; HEX alanı, stil sayfası için eşleşen kodu yüzeyleştirir.

HEX'ten HSL'ye Matematik ve Ayrıştırma

HEX → RGB → HSL İki Adımlı Bir Boru Hattıdır
Dönüşüm, ara biçim olarak RGB'den geçer. Birinci adım: kanal başına `parseInt(hex.slice(1, 3), 16)` aracılığıyla HEX'i RGB tamsayılarına ayrıştırın. İkinci adım: RGB'yi 0-1'e normalleştirin, `max`/`min`/`delta` hesaplayın, CSS Color 4 §6.4 parçalı trigonometrisini uygulayın: `L = (max + min) / 2`, `S = delta / (1 - |2L - 1|)`, `H = parçalı * 60`. İki adımlı yapı, aracın ara RGB demetini de yüzeyleştirmesinin nedenidir — görüntülemek ücretsizdir ve hata ayıklama için kullanışlıdır.
CSS Color 4 §6.4 Referans Algoritmayı Tanımlar
W3C CSS Color 4 spesifikasyonu §6.4 (`rgb()`'den `hsl()`'ye algoritma), kanonik parçalı matematiği tanımlar: açıklık, max ve min'in orta noktası olarak; doygunluk, `delta / (1 - |2L - 1|)` olarak (delta = 0 olduğunda S = 0, grilerde sıfıra bölmeyi önlemek için); hue, hangi kanalın max olduğuna göre adım başına 60 derecelik bir trigonometri olarak. Spesifikasyon ayrıca uç durumları işler: saf siyah (`#000`), keyfi 0° hue ile `hsl(0 0% 0%)` verir; saf beyaz (`#FFF`), benzer şekilde `hsl(0 0% 100%)` verir; saf gri, `hsl(0 0% 50%)` verir.
Hue 360°'de Sarmalanır, S ve L Yüzdedir
HSL'nin üç ekseninin farklı birimleri vardır. Hue, 0 ile 360 arasında sarmalama ile açısal bir derecedir — `hsl(370 ...)`, `hsl(10 ...)` olarak yorumlanır çünkü açısal konumlar sarmalanır. Doygunluk ve Açıklık, %0 ile %100 arasında sarmalama olmayan yüzdelerdir; aralık dışı değerler kırpılır. CSS Color 4 ayrıca hue'yu tur (`hsl(0.6turn ...)`) veya radyan (`hsl(3.787rad ...)`) cinsinden kabul eder; aracın çıktısı derece kullanır çünkü tasarım aracı arayüzlerinde ve marka spesifikasyon belgelerinde en yaygın biçim budur.
HSL Açıklığı Algısal Olarak Tek Tip DEĞİLDİR
`hsl(120 100% 50%)`'deki bir yeşil, `hsl(240 100% 50%)`'deki bir maviden gözle görülür şekilde daha parlak görünür, ikisinin nominal Açıklığı aynı olsa bile — çünkü HSL, sRGB'nin gamma tuhaflıklarını miras alır ve her renk tonunda aynı L ölçeğini kullanır. HSL tabanlı açık ton rampalarının eşitsiz görünmesinin (yeşil rampanın açık ucu, mavi rampanın açık ucundan daha hızlı tırmanır) ve tasarım sistemlerinin rampa üretimi için büyük ölçüde OKLCH'ye geçmesinin nedeni budur. Araç hem HSL'yi hem de OKLCH'yi yüzeyleştirir, böylece seçim bir bakış uzaklıktadır.
Gidiş-Dönüş Kararlılığı için OKLCH Dahili Kaynak-Doğru
Bu maça özellikle HEX → HSL'yi hedeflese de, paylaşılan altyapı dönüştürücüsü kanonik rengi dahili olarak bir OKLCH üçlüsü olarak tutar. HEX → HSL → RGB → OKLAB → HEX gidiş-dönüşleri bit-kararlı kalır; eski HSL-merkezli dönüştürücüler yuvarlama hatası biriktirir ve birkaç dönüşüm boyunca renk tonunu birkaç derece kaydırabilir. OKLCH merkezi ayrıca Hue'yu kararlı bir eksen olarak korur, böylece renk tonu kaydırıcısını sürüklemek yanlışlıkla gri üzerinden çapraz geçiş yapmaz. Björn Ottosson'un 2020 OKLAB makalesine göre.
Kanal Kodlaması: 8-Bit İşaretsiz, sRGB Gamma Kodlanmış
HEX kodları, IEC 61966-2-1 (1996) tarafından tanımlanan sRGB renk uzayında 8-bit işaretsiz RGB kanalları (0-255) kodlar. Değerler *gamma kodludur* — kanal değeri ile algılanan parlaklık arasındaki ilişki doğrusal değildir, parçalı sRGB transfer işlevini izler (sıfır yakınında küçük bir doğrusal segmentle yaklaşık 2.4 üs). HSL, herhangi bir doğrusallaştırma adımı olmadan doğrudan bu gamma kodlu RGB değerlerinden türetilir; bu, HSL'nin algısal tek tiplik probleminin kök nedenidir. OKLCH önce doğrusallaştırır ve sonra algısal olarak tek tip bir uzaya yeniden eşler; HSL bunu yapmaz.

HEX / HSL İş Akışları için En İyi Uygulamalar

Yeni Kodda Modern Boşlukla Ayrılmış HSL Sözdizimini Kullanın
CSS Color 4'ün `hsl(217 91% 60%)` (boşlukla ayrılmış) ve `hsl(217 91% 60% / 0.5)` (alpha için eğik çizgi), 2025 ve sonrası gönderilen kod için kanonik sözdizimleridir. Eski virgül biçimleri `hsl(217, 91%, 60%)` ve `hsla(217, 91%, 60%, 0.5)`, her yerde hâlâ desteklenir ancak CSS Color 4'te biçemsel olarak kullanımdan kaldırılmıştır. Yeni stil sayfalarında modern sözdizimini kullanın; gerçekten eski desteğe ihtiyacınız olduğu IE 9-11 geri dönüş bağlamları için yalnızca `hsla()`'yı tutun.
Rampaları HSL'de Değil, OKLCH'de Üretin
HSL'nin Açıklık ekseni algısal olarak tek tip değildir — 9 adımlı bir L taraması, yeşil adımların her L değerinde mavi adımlardan daha parlak göründüğü bir rampa üretir. Her adımın eşit derecede parlak görünmesi gereken rampalar (varsayılan tasarım sistemi talebi) için bunun yerine OKLCH'de üretin: `oklch(0.7 0.15 217)`, `oklch(0.6 0.15 217)`, vb. Araç, aynı HEX için hem HSL'yi hem de OKLCH'yi yüzeyleştirir, böylece ikisi arasında geçiş bir Kopyala tıklaması uzaklıktadır.
Renk Tonunu ve Doygunluğu Kilitleyin, Açıklığı Tarayın
HSL'yi açık ton/koyu ton çalışması için kullanırken yalnızca L sayısını değiştirin — H ve S'yi rampada aynı tutun. Renk tonu sapması (5° bile) bir rampanın karışık görünmesine neden olur. Doygunluk sapması, açık ucun yıkanmış görünmesine ve koyu ucun çamurlu görünmesine neden olur. Tek-eksen-bir-seferde disiplini, HSL'ye tasarım dostu itibarını veren şeydir; bundan vazgeçmek size her iki dünyanın en kötüsünü verir.
Kaynak-Doğru Belirteçler için HEX'i, Hesaplanmış Varyantlar için HSL'yi Tercih Edin
Bir tasarım belirteci spesifikasyonu yazarken, kanonik biçim olarak HEX'i (veya OKLCH'yi) tercih edin — daha kısalardır ve JSON veya YAML'a temiz olarak sığarlar. HSL, kaynak-doğru biçim olmaktan çok çalışma zamanında *türetilmiş* belirteçler (`hsl(from var(--primary) h s calc(l + 10%))`) için daha kullanışlıdır. İki biçim aynı rengi tanımlar; seçim, belirtecin sistemde oynadığı rol hakkındadır.
HSL Varyantlarını Temel HEX ile Belgeleyin
`--primary-light: hsl(217 91% 70%)` gibi bir CSS değişkeni gönderdiğinizde, temel HEX'e geri işaret eden bir yorum ekleyin: `/* base: #3b82f6 → hsl(217 91% 60%), light variant +10% L */`. Altı ay sonra, biri `--primary-lighter` türetmek istediğinde, hesaplamak için temel renge ihtiyacı vardır — ve HSL tek başına bunu yüzeyleştirmez. HEX + HSL birlikte tam izlenebilirliği korur.
Canlı Renk Kararlarını Paylaşmak için URL Hash'ini Kullanın
Her renk değişikliği URL hash'ini otomatik olarak `#hex=3b82f6` olarak günceller. URL'yi bir Slack iş parçacığına veya GitHub sorununa kopyalayın ve onu açan herkes aynı renge aynı HSL üçlüsüyle düşer. Bu, sohbette bir HSL dizgesi yapıştırmaktan daha güvenilirdir — alıcılar bazen değeri elle girerken dereceyi yanlış yazar veya yüzde işaretini düşürür — ve bir tasarım inceleme iş parçacığının "Salı günü tartıştığımız mavi" yerine tam bir renge başvurmasına olanak tanır. Hash sunucuya asla iletilmez.

Sıkça Sorulan Sorular

HEX'i HSL'ye nasıl dönüştürürüm?
Önce HEX'i `parseInt(hex, 16)` aracılığıyla RGB tamsayılarına dönüştürün, ardından her kanalı 255'e bölerek 0-1'e normalleştirin, ardından üç kanal arasında `max`/`min`/`delta` hesaplayın ve CSS Color 4 §6.4 parçalı trigonometrisini uygulayın: açıklık = `(max + min) / 2`, doygunluk = `delta / (1 - |2L - 1|)` (delta sıfır olduğunda sıfır), hue = hangi kanalın max olduğuna göre parçalı (tekerlek etrafında adım başına 60°). `#3b82f6`, `rgb(59 130 246)` olarak ayrıştırılır ve ardından `hsl(217 91% 60%)`'a dönüştürülür. Bu araç, siz yazarken tam boru hattını canlı çalıştırır.
HSL rengi nedir?
HSL, sRGB renk uzayının üç algısal olarak anlamlı eksene silindirik yeniden şekillendirmesidir: Hue (0-360°, renk tekerleği üzerindeki açısal konum — 0° kırmızı, 120° yeşil, 240° mavi), Saturation (%0-100, renkli yoğunluk — %0 gri, %100 tamamen renkli) ve Lightness (%0-100, parlaklık — %0 siyah, %50 saf renk tonu, %100 beyaz). Alvy Ray Smith, 1978'de tasarımcılara renk hakkında düşündükleri şekle ham RGB kanal adreslemesinden daha yakın bir koordinat sistemi vermek için türetmeyi yayımladı. HSL, 2010'dan beri CSS'tedir (CSS3) ve her tarayıcıda gönderilir.
HSL ile HSV arasındaki fark nedir?
İkisi de aynı hue eksenine sahip sRGB'nin silindirik yeniden şekillendirmeleridir, ancak üçüncü ekseni farklı ele alırlar. HSL'nin Açıklığı %0'da siyahtan, %50'de saf renk tonundan, %100'de beyaza simetrik olarak gider — `hsl(0 100% 50%)` saf kırmızıdır ve `hsl(0 100% 100%)` beyazdır. HSV'nin Değeri %0'da siyahtan %100'de saf renk tonuna asimetrik olarak gider — `hsv(0 100% 100%)` saf kırmızıdır ve beyaz yalnızca doygunluk 0'a düştüğünde görünür. HSL, tasarım sistemi açık ton/koyu ton rampaları için daha kullanışlıdır çünkü %50 orta noktası saf renk referansını işaretler; HSV ise renk seçiciler için daha kullanışlıdır çünkü doygunluk/değer karesi bir SV seçici arayüzüne temiz olarak eşlenir.
RGB yerine neden HSL kullanmalı?
Üç neden. İlki, sezgisel kaydırıcılar — L'yi %60'tan %70'e taşımak aynı rengin daha açık bir tonunu öngörülebilir şekilde üretir; R'yi 130'dan 150'ye taşımak daha az öngörülebilir bir renk kayması üretir. İkincisi, palet üretimi — `hsl(217 91% 60%)`, `hsl(217 91% 70%)`, `hsl(217 91% 80%)`, bir sayıyı değiştirerek üretilen tonal olarak tutarlı bir açık ton rampasıdır; aynı şey RGB'de üç koordineli düzenleme gerektirir. Üçüncüsü, çalışma zamanı CSS matematiği — modern CSS, temel belirteçten daha açık bir varyant türetmek için her adımı önceden hesaplamadan `hsl(from var(--primary) h s calc(l + 10%))` hesaplamanıza olanak tanır. RGB böyle bir silindirik eksen kolaylığına sahip değildir.
Bir HSL değeri nasıl okunur?
HSL'nin sırayla üç parçası vardır: Hue, Saturation, Lightness. `hsl(217 91% 60%)`, hue = 217° (temiz bir mavi, 240° saf-mavi bölgesini biraz geçmiş ve camgöbeğine doğru geri dönmüş), doygunluk = %91 (çok renkli, neredeyse hiç gri yok), açıklık = %60 (saf renk tonu orta noktasından bir adım daha parlak) anlamına gelir. Hue, yüzde son eki olmayan tek eksendir çünkü derece olarak ifade edilir — değerler 360°'de sarmalanır, böylece `hsl(370 ...)`, `hsl(10 ...)` ile özdeştir. Sondaki eğik çizgili değer (varsa) 0-1 aralığında alpha'dır: `hsl(217 91% 60% / 0.5)`, %50 opaklıkta aynı renktir.
CSS, HSL'yi destekler mi?
Evet — HSL, 2010'da CSS3'ten beri CSS'tedir ve IE 9 dahil her tarayıcıda gönderilir. Orijinal sözdizimi virgül kullandı: opak için `hsl(217, 91%, 60%)` ve alpha taşıyan için `hsla(217, 91%, 60%, 0.5)`. CSS Color 4 (2022'den beri W3C Aday Önerisi) modern boşlukla ayrılmış biçimi ekledi: `hsl(217 91% 60%)` ve eğik çizgi önekli alpha ile `hsl(217 91% 60% / 0.5)`. Hue ayrıca tur veya radyan olarak ifade edilebilir (`hsl(0.6turn 91% 60%)`, `hsl(217 91% 60%)` ile özdeştir). Hem eski hem de modern sözdizimi tüm yaşayan tarayıcılarda birbirinin yerine geçer.
HSL'deki L neyi temsil eder?
Lightness (Açıklık). Rengin ne kadar parlak göründüğünü kontrol eden %0-100 ekseni; %0 saf siyaha ve %100 saf beyaza eşlenir. Orta nokta (%50), saf renk tonunun yaşadığı yerdir — `hsl(0 100% 50%)` saf kırmızıdır, `hsl(0 100% 25%)` daha koyu bir kırmızıdır ve `hsl(0 100% 75%)` daha açık bir pembedir. Açıklık, HSV'nin asimetrik Değerinin simetrik karşılığıdır. HSL açıklığının algısal olarak tek tip *olmadığını* unutmayın — L=%50'deki bir yeşil, L=%50'deki bir maviden gözle görülür şekilde daha parlak görünür çünkü HSL, sRGB'nin gamma tuhaflıklarını miras alır; algısal tek tiplik için OKLCH'ye uzanın.
HEX'ten HSL'ye dönüşüm ne kadar hassastır?
HEX → RGB adımı bit-hassasiyetindedir (`parseInt(hex, 16)` float katılımı olmadan tamsayılar döndürür). RGB → HSL adımı trigonometri ve bölme içerir, böylece çıktı, aracın görüntü için tamsayı dereceye ve tamsayı yüzdeye yuvarladığı bir float'tur. HEX → HSL → HEX gidiş-dönüşü, orijinal HEX'i 1 kanal birimi içinde geri kazanır (H'yi tamsayı derece olarak göstermenin yuvarlama hatası). Kayıpsız çalışma için OKLCH daha iyi bir dahili biçimdir — bu araç aslında OKLCH'yi dahili kaynak-doğru olarak tutar, ardından görüntüde HSL'yi türetir, böylece gidiş-dönüş kararlılığı saf HSL-merkezli dönüştürücülerden daha iyidir.

İlgili Araçlar

Tüm araçları görüntüleyin →

Sayı Tabanı Dönüştürücü — Binary, Hex, Decimal ve Octal

Dönüştürme Araçları

Binary, hex, decimal, octal ve herhangi bir taban (2-36) arasında anında dönüştürün. Ücretsiz ve gizli — tüm işlem tarayıcınızda yapılır.

Renk Dönüştürücü — HEX, RGB, HSL & OKLCH

Dönüştürme Araçları

HEX'i RGB, HSL, OKLCH, OKLAB ve CMYK biçimlerine tarayıcınızda dönüştürün — herhangi bir biçimi tek tıkla kopyalayın. Ücretsiz, kayıt yok, renkleriniz sayfadan asla çıkmaz.

HEX'ten CMYK'ye Dönüştürücü

Dönüştürme Araçları

HEX renklerini tarayıcınızda CMYK'ye dönüştürün. Baskı önizlemeleri için sRGB tabanlı saf yaklaşım. Ücretsiz, kayıt yok, renkleriniz sayfadan asla çıkmaz.

HEX'ten OKLCH'ye Dönüştürücü

Dönüştürme Araçları

Tailwind v4 tasarım token'ları için HEX'i OKLCH'ye dönüştürün. Display P3 renk gamı uyarılarıyla canlı algısal olarak tekdüze çıktı. Ücretsiz, yalnızca tarayıcıda.

HEX'ten RGB'ye Dönüştürücü

Dönüştürme Araçları

Herhangi bir HEX renk kodunu tarayıcınızda RGB'ye dönüştürün — 3 haneli, 6 haneli ve alpha içeren 8 haneli HEX desteklenir. Ücretsiz, anında, kayıt yok, renkleriniz sayfadan asla çıkmaz.

Resimleri Çevrimiçi Sıkıştırın — JPEG, PNG ve WebP

Dönüştürme Araçları

JPEG, PNG ve WebP'yi %80'e kadar küçültün — tarayıcınızda, yükleme yok. 20 resim toplu, kalite ayarı, öncesi/sonrası karşılaştırma. Ücretsiz ve gizli.