🎨
← Rehberlere dön

HEX vs RGB vs HSL: Hangi Renk Formatını Kullanmalısınız?

· Etiketler: hex-vs-rgb-vs-hsl, renk-formatlari, css, web-gelistirme, renk-donusturucu

HEX vs RGB vs HSL: Hangi Renk Formatını Kullanmalısınız?

CSS, renkleri tanımlamanın birden çok yolunu sunar, ancak en yaygın üç format HEX, RGB ve HSL'dir. Her formatın kendine özgü güçlü yanları vardır ve her birini ne zaman kullanacağınızı bilmek, stil sayfanızın sürdürülebilirliğini ve dinamik renk sistemleri oluşturma yeteneğinizi önemli ölçüde artırabilir. Bu rehber, herhangi bir durum için doğru olanı seçebilmeniz için her formatı ayrıntılı olarak inceler.

HEX Renk Formatı: Endüstri Standardı

HEX (onaltılık) renkler, web tasarımında en yaygın kullanılan formattır. Bir hex renk, # işaretinin ardından sırasıyla kırmızı, yeşil ve mavi değerlerini temsil eden altı onaltılık basamak olarak yazılır.

#FF5733
  • #FF — Kırmızı (ondalık olarak 255)
  • #57 — Yeşil (ondalık olarak 87)
  • #33 — Mavi (ondalık olarak 51)

HEX Varyasyonları

HEX, farklı ihtiyaçlar için çeşitli gösterimleri destekler:

/* Standart altı basamaklı hex */
color: #FF5733;

/* Kısaltılmış — aynı çiftler üç basamağa daraltılır */
color: #F53; /* #FF5533'e genişler */

/* Alfa kanallı sekiz basamaklı hex */
color: #FF573380; /* %50 opaklık */

Kısaltılmış HEX, her çift eşleşen karakterler kullandığında çalışır: #AABBCC, #ABC olur. Bu, tüm tarayıcılar tarafından desteklenen tamamen yer tasarrufu sağlayan bir kuraldır.

Sekiz basamaklı HEX (#RRGGBBAA), alfa saydamlığı ekledi. Alfa değeri 00 (tamamen saydam) ile FF (tamamen opak) arasında değişir. 8 basamaklı hex için tarayıcı desteği tüm modern tarayıcılarda mükemmeldir.

Dört basamaklı kısaltma (#RGBA) da mevcuttur: #F538, #FF553388'e genişler.

HEX Ne Zaman Kullanılır

  • Tasarım araçlarından kopyala-yapıştır — Figma, Sketch ve Adobe XD varsayılan olarak hex çıktısı verir
  • Sabit kodlanmış marka renkleri — Hex, asla değişmeyen değerler için nettir ve kompakttır
  • Dokümantasyon ve maketler — Hex, tasarımcılar ve geliştiriciler arasında en tanınabilir formattır
  • CSS özel özellikleri — Marka token'larını hex olarak saklamak yaygın bir uygulamadır

HEX'ten Ne Zaman Kaçınılır

  • Programatik renk manipülasyonu — Bireysel kanalları ayarlamak, string ayrıştırma gerektirir
  • Renk sistemleri oluşturma — Daha açık veya daha koyu varyantlar oluşturmak, basit olmayan matematik içerir
  • Renk amacını iletme — Hex, renk hakkında anlamsal bilgi vermez

RGB Renk Formatı: Kanal Kontrolü

RGB; Kırmızı, Yeşil, Mavi anlamına gelir. CSS'te, 0 ile 255 arasında değerler veya yüzdeler (%0 ile %100) ile bir fonksiyon olarak yazılır.

/* Eski virgülle ayrılmış sözdizimi */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* Modern boşlukla ayrılmış sözdizimi */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* Yüzde değerleri */
color: rgb(100% 34% 20%);

Modern RGB Sözdizimi İyileştirmeleri

CSS Color Level 4 spesifikasyonu, rgb() fonksiyonunu iki önemli şekilde modernize etti:

  1. Boşlukla ayrılmış değerler — Virgüller artık gerekli değil, sözdizimini daha temiz hale getirir
  2. Eğik çizgiyle ayrılmış alfa — rgba() takma adı artık gerekli değil; rgb() artık isteğe bağlı bir alfa kanalı kabul eder

Hem eski hem de modern sözdizimleri tamamen desteklenir, ancak yeni kod için modern sözdizimi önerilir.

RGB Ne Zaman Kullanılır

  • Canvas ve WebGL — Görüntü verisi API'leri piksel değerlerini RGB olarak döndürür
  • Sayısal renk ayarlamaları — Kırmızı, yeşil ve mavi değerleri ayrı değişkenler olarak saklandığında
  • Tasarım şartnamelerinden çeviri — Bazı tasarım sistemleri renkleri RGB üçlüleri olarak belirtir
  • Renk seçicilerle çalışma — Birçok renk seçici arayüzü 0-255 kaydırıcıları kullanır

RGB'den Ne Zaman Kaçınılır

  • Tutarlı renk paletleri oluşturma — Üç kanalın hepsini bağımsız olarak ayarlamak, tutarlı ayarlamaları zorlaştırır
  • İnsan okunabilirliği — rgb(123, 45, 67) hangi rengi temsil ettiğine dair anında bir fikir vermez

HSL Renk Formatı: İnsan Dostu Renkler

HSL; Renk Tonu, Doygunluk ve Açıklık anlamına gelir. Bu format, rengin kendisini (renk tonu) yoğunluğundan (doygunluk) ve parlaklığından (açıklık) ayırdığı için insanlar için daha sezgiseldir.

/* Eski sözdizimi */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* Modern sözdizimi */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

HSL Kanallarını Anlamak

Renk Tonu (0-360) — Renk çarkındaki renk açısı. Bu "hangi renk olduğu" bileşenidir:

| Ton Değeri | Renk | |------------|------------| | 0 veya 360 | Kırmızı | | 30 | Turuncu | | 60 | Sarı | | 120 | Yeşil | | 180 | Camgöbeği | | 240 | Mavi | | 300 | Galibarda |

Doygunluk (%0-100) — Rengin ne kadar yoğun veya canlı olduğu. %0 gri bir ton üretir; %100, renk tonunun en saf versiyonudur.

Açıklık (%0-100) — Rengin ne kadar açık veya koyu olduğu. %0 her zaman siyah, %50 renk tonunun "normal" versiyonu ve %100 her zaman beyazdır.

HSL Renk Sistemleri için Neden Üstündür

HSL, HEX veya RGB'de zor olan görevleri son derece basit hale getirir:

/* Ana marka rengi */
--brand: hsl(220, 80%, 50%);

/* Hover durumu — biraz daha açık */
--brand-hover: hsl(220, 80%, 60%);

/* Aktif durum — biraz daha koyu */
--brand-active: hsl(220, 80%, 40%);

/* Devre dışı durum — doygunluğu azaltılmış */
--brand-disabled: hsl(220, 30%, 70%);

/* Arka plan tonu — çok açık */
--brand-bg: hsl(220, 40%, 95%);

HSL ile her varyant tek değişkenli bir değişikliktir. Bu, HEX ile imkansız ve RGB ile hantaldır.

HSL Ne Zaman Kullanılır

  • Renk paletleri oluşturma — HSL, tasarım token üretimi için fiili standarttır
  • Temalar ve karanlık mod — Karanlık mod varyantları oluşturmak için açıklık değerlerini değiştirin
  • Hover ve focus durumları — Açıklığı sabit bir yüzdeyle ayarlayın
  • Erişilebilirlik ayarlamaları — Rengi değiştirmeden açıklık kontrastını artırın
  • Etkileşimli renk seçiciler — HSL kaydırıcıları, RGB kaydırıcılarından daha sezgiseldir

Hızlı Karşılaştırma Tablosu

| Özellik | HEX | RGB | HSL | |---------|-----|-----|-----| | Piksel düzeyinde okunabilirlik | Zayıf | Orta | İyi | | Kanal anlambilimi | Opak | Sayısal | Algısal | | Programatik ayarlama | Zor | Orta | Kolay | | Alfa saydamlığı | 8 basamaklı hex | rgb(R G B / A) | hsl(H S% L% / A) | | Tarayıcı desteği | Mükemmel | Mükemmel | Mükemmel | | Modern sözdizimi | Hayır | Evet | Evet | | Tasarım aracı varsayılanı | Evet | Yaygın | Nadir | | Renk sistemi uygunluğu | Zayıf | Orta | Mükemmel |

Tarayıcı Desteği: Üçü de Güvenli

HEX, RGB ve HSL aynı tarayıcı desteğine sahiptir. Üçü de Internet Explorer 9'dan beri piyasaya sürülen tüm tarayıcılarda çalışır. Modern boşlukla ayrılmış sözdizimi (rgb(255 0 0 / 0.5)), 2020'den beri piyasaya sürülen tüm tarayıcılarda desteklenir. Birini diğerine tercih etmek için uyumluluk açısından hiçbir neden yoktur.

Pratik Karar Çerçevesi

Formatınızı ne yaptığınıza göre seçin:

  1. Bir tasarım maketinden mi kopyalıyorsunuz? HEX kullanın — tasarım araçlarının çıktısı budur.
  2. Bir tasarım token sistemi mi oluşturuyorsunuz? HSL kullanın — palet oluşturmayı önemsiz hale getirir.
  3. Canvas veya görüntü verileriyle mi çalışıyorsunuz? RGB kullanın — piksel API'leri doğal olarak RGB kullanır.
  4. Tek seferlik bir stil kuralı mı yazıyorsunuz? HEX kullanın — en kompakt olanıdır.
  5. Dinamik renk geçişleri mi oluşturuyorsunuz? HSL kullanın — renk tonunu enterpole etmek gökkuşağı efektleri oluşturur; RGB'yi enterpole etmek çamurlu ara değerler oluşturur.

Herhangi Bir Format Arasında Dönüştürün

HEX, RGB, HSL ve diğer CSS renk formatları arasında anında dönüşüm yapmak için ücretsiz çevrimiçi renk dönüştürücümüzü kullanın. Artık manuel matematik veya tarayıcı DevTools keşfine gerek yok.