🧰 BirAraçtaTüm Araçlar →
Renk modeli Yayın: 13 Temmuz 2026 6 dk okuma

HSL ve HSV Renk Modelleri Arasındaki Fark (Lightness vs Value)

İki model de Hue (ton) ve Saturation (doygunluk) kullanır; isimleri de birbirine benzer. Ama üçüncü harf her şeyi değiştirir: HSL'deki L (Lightness) ile HSV'deki V (Value) aynı şey değildir. Bu rehberde farkı görselleştirir, ne zaman hangisini kullanacağınızı ve neden CSS'in yalnızca HSL'i desteklediğini açıklarız.

İçindekiler
  1. HSL ile HSV farkı nedir? (kısa cevap)
  2. Ortak eksenler: Hue ve Saturation
  3. Üçüncü bileşen: L vs V
  4. Aynı renk, iki model — tablo
  5. Ne zaman hangisi?
  6. Sık sorulan sorular

HSL ile HSV arasındaki fark nedir?

Kısa cevap İkisi de Hue (ton, 0–360°) ve Saturation (doygunluk, %) kullanır; fark üçüncü bileşendedir. HSL'de L (Lightness) %50 saf rengi, %100 beyazı, %0 siyahı verir. HSV/HSB'de V (Value) %100 en canlı rengi, %0 siyahı gösterir; beyaza ulaşmak için ayrıca doygunluğu düşürmek gerekir.

Yani L ve V farklı sıfır-yüz eksenleridir. Bir rengi iki modelde de yazabilirsiniz ve renk dönüştürücüde aynı anda ikisini de görebilirsiniz; RGB/HEX karşılıkları birebir aynı çıkar.

Ortak eksenler: Hue ve Saturation

  • Hue (ton): Renk çemberi üzerindeki açı, 0–360°. 0° kırmızı, 120° yeşil, 240° mavi. İki modelde de tamamen aynıdır.
  • Saturation (doygunluk): Rengin canlılığı, 0% (gri) → 100% (en canlı). İki modelde de var ama sayısal değeri farklı olabilir, çünkü referans aldıkları "en canlı" nokta farklıdır.
Dikkat: Aynı renk için HSL doygunluğu ile HSV doygunluğu genelde eşit değildir. Örneğin bu aracın moru HSL'de S=%83 iken HSV'de S=%76'dır. Bu bir hata değil; iki modelin doygunluğu farklı tanımlamasının doğal sonucudur.

Üçüncü bileşen: Lightness vs Value

Farkı en net şu şekilde görebilirsiniz — bir tonu sabit tutup üçüncü değeri %0'dan %100'e çıkarın:

  • HSL / Lightness: L=%0 siyah → L=%50 saf, en canlı renk → L=%100 beyaz. Yani açıklık ekseni simetriktir; renk tam ortada durur.
  • HSV / Value: V=%0 siyah → V=%100 en canlı renk. Beyaz bu eksende yoktur; beyaza ancak V=%100 iken doygunluğu %0'a çekerek ulaşırsınız.
Zihinsel model HSL'i bir küre gibi düşünün: en üstte beyaz, en altta siyah, ekvatorda (L=%50) en canlı renkler. HSV ise bir silindir/koni gibidir: tepesi canlı renkler ve beyazın olduğu düzlem (V=%100), tabanı siyah (V=%0). Bu yüzden "parlaklık" kaydırıcısı HSV'de daha sezgiseldir.

Aynı renk, iki modelde nasıl yazılır?

Aşağıdaki tablo birkaç rengin HEX, HSL ve HSV karşılığını gösterir. Tonun (H) her iki modelde aynı, üçüncü değerin ise farklı olduğuna dikkat edin:

Aynı renklerin HSL ve HSV karşılıkları
RenkHEXHSLHSV
Mor (bu araç)#7C3AED262, 83%, 58%262, 76%, 93%
Saf kırmızı#FF00000, 100%, 50%0, 100%, 100%
Beyaz#FFFFFF0, 0%, 100%0, 0%, 100%
Gri#8080800, 0%, 50%0, 0%, 50%
Pembe#FFC0CB350, 100%, 88%350, 25%, 100%

Kaynak: RenkKod sRGB dönüşüm motoru. Değerler en yakın tam sayıya yuvarlanmıştır.

Pembe satırı farkı çarpıcı gösterir: HSL'de L=%88 (beyaza yakın açık) iken HSV'de V=%100'dür (tam parlaklık) ama S=%25'e düşer. İki model aynı rengi bambaşka koordinatlarla anlatır.

Rengi seç, HSL ve HSV'yi yan yana gör

Bir renk seç; HEX, RGB, HSL ve HSV/HSB değerleri anında senkron çıksın. Tonlar ve gölgeler paletiyle açık-koyu varyasyonları üret.

Renk Dönüştürücüyü Aç →

Ne zaman hangisini kullanmalı?

HSL'i tercih edin

  • CSS yazarken: Tarayıcılar hsl() ve hsla() destekler; hsv() yoktur.
  • Açık/koyu ton üretirken: Tonu ve doygunluğu sabitleyip yalnızca L'yi değiştirmek, bir markanın tutarlı ton rampasını üretmenin en temiz yoludur. Bu aracın "Tonlar ve gölgeler" paleti tam bunu yapar.
  • Tema sistemleri: Açık/koyu tema değişkenlerini L üzerinden ayarlamak sezgiseldir.

HSV/HSB'yi tercih edin

  • Renk seçerken: Photoshop, Figma gibi araçların kare + ton çubuğu seçicisi doğrudan HSV'nin S ve V eksenine oturur.
  • "Canlı bir renk istiyorum" derken: V=%100 sabitken H ve S ile oynamak, en parlak tonda gezmenizi sağlar.

Her iki durumda da HEX veya RGB'ye dönüştürmeniz gerekebilir; formatlar arası geçişi HEX-RGB dönüşüm rehberinde bulabilir, seçtiğiniz rengin erişilebilir olup olmadığını WCAG kontrast rehberiyle denetleyebilirsiniz.

Sık sorulan sorular

HSL ile HSV arasındaki fark nedir?
İkisi de Hue ve Saturation kullanır; fark üçüncü bileşendedir. HSL'de L=%50 saf rengi, %100 beyazı verir. HSV'de V=%100 en canlı rengi verir; beyaza ulaşmak için doygunluğu da düşürmek gerekir.
HSV ile HSB aynı şey mi?
Evet. HSV (Value) ve HSB (Brightness) tamamen aynı modeldir; yalnızca üçüncü bileşenin adı farklıdır. Hesaplama birebir aynıdır.
Neden renk seçicileri HSV kullanıyor?
Seçicinin kare alanı doygunluk-parlaklık eksenine, çubuk ise tona karşılık gelir; bu düzen HSV ile birebir örtüşür ve "parlak renk" seçimini sezgisel kılar.
Açık/koyu ton üretmek için hangisi daha iyi?
HSL. Tonu ve doygunluğu sabit tutup yalnızca L'yi değiştirerek simetrik bir ton rampası (L→%100 beyaz, L→%0 siyah) üretirsiniz.
HSL ve HSV aynı rengi mi verir?
Evet. İkisi de aynı sRGB rengini farklı koordinatlarla tarif eder; RGB/HEX karşılığı birebir aynı, dönüşüm tam çevrilebilirdir.

İlgili rehberler

DönüşümHEX ve RGB renk dönüşümü nedir? ErişilebilirlikWCAG renk kontrastı ve AA/AAA AraçPalet üretici: tonlar ve gölgeler ReferansTemel renklerin HEX/RGB/HSL tabloları
Metodoloji & kaynaklar. Bu yazıdaki HSL ve HSV değerleri standart sRGB renk uzayı dönüşümleriyle üretilmiştir: RGB kanalları 0–1'e normalize edilir, ton (H) ortak biçimde, açıklık (L) ve parlaklık (V) kendi tanımlarıyla hesaplanır. Hesaplamalar tamamen tarayıcıda, hiçbir sunucuya veri gitmeden çalışır. Kaynaklar: sRGB renk uzayı dönüşümleri · WCAG 2.1 kontrast oranı (W3C). Son güncelleme: 13 Temmuz 2026. Yazı bilgilendirme amaçlıdır; kesin baskı veya marka renkleri için ilgili renk profili (ICC/Pantone) esas alınmalıdır.