Renk Formatları Açıklandı: HEX, RGB ve HSL
Hızlı Yanıt
HEX (#RRGGBB) ve RGB (kanal başına 0–255) kırmızı, yeşil ve mavi yoğunluklarını doğrudan kodlar. HSL (ton 0–360°, doygunluk/parlaklık 0–100%) rengi insan algısına uygun şekilde kodlar. Üçü arasında Color Converter ile dönüştürün.
giriiş
Web renkleri üç baskın formatta belirtilir: HEX (base-16 kırmızı, yeşil, mavi), RGB (kanal başına ondalık 0–255) ve HSL (ton, doygunluk, parlaklık). Üçü de aynı sRGB renk uzayını tanımlar ama farklı eksenleri açığa çıkarır: HEX ve RGB donanım-odaklı, HSL ise insan-odaklıdır. Modern CSS alpha'yı HEX8, rgba() ve hsla() ile destekler.
Adım adım
-
HEX gösterimini anlayın
HEX her kanalı iki haneli 16 tabanlı bir sayı olarak yazar: #RRGGBB. 00 kapalı, FF (255) tam yoğunlukta. #FF0000 saf kırmızı, #00FF00 saf yeşil, #0000FF saf mavi, #FFFFFF beyaz, #000000 siyahtır. 4 basamaklı kısa yol #RGB #RRGGBB'ye genişler ve #RRGGBBAA alfa ekler (ör. #FF573380 %50 alfadır).
-
RGB gösterimini anlayın
RGB kanal başına 0-55 arası ondalık sayı kullanır: rgb(255, 87, 51), #FF5733 ile aynıdır. rgba() işlevi bir 0— alfa ekler: rgba(255, 87, 51, 0,5) %50 opaktır. RGB, HEX ile eşdeğerdir — 16 tabanı yerine yalnızca ondalık sayıdır.
-
HSL gösterimini anlayın
HSL renk tonunu (renk tekerleğinde 0—60°: 0=kırmızı, 120=yeşil, 240=mavi), doygunluğu (%0 = gri, %100 = tam renkli) ve açıklığı (%0 = siyah, %50 = normal, %100 = beyaz) kullanır. hsl(11, %100, %60) canlı turuncu renktedir. HSL aynı renk tonunun renk tonlarını (açıklığı artırın) ve gölgeleri (açıklığı azaltın) oluşturmayı önemsiz hale getirir.
-
Formatlar arasında dönüştürme
HEX→RGB: her çifti baz-16 olarak ayrıştırın. RGB→HEX: her kanalı 2 basamaklı 16 tabanına dönüştürür. RGB→HSL: normalleştirilmiş kanalların maksimum/min'ini hesaplayın, açıklık = (maks+min)/2, doygunluk açıklığa bağlıdır, renk tonu baskın kanalın açısıdır. Tüm bunları anında yapmak için Renk Dönüştürücümüzü kullanın.
-
Görev için doğru formatı seçin
Tasarım belirteçleri ve varlıklarında kompaktlık için HEX kullanın. Kanalları enterpolasyona almanız veya canlandırmanız gerektiğinde RGB/rgba() öğesini kullanın. Paletler, gölgeler veya tema çeşitleri oluştururken HSL/HSLA'yı kullanın; açıklığı %10 oranında ayarlamak, RGB deltaları hakkında akıl yürütmekten çok daha kolaydır.
Örnekler
Her üç formatta da saf kırmızı
Giriş: #FF0000
Çıkış: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Canlı bir turuncu
Giriş: #FF5733
Çıkış: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Beyaz ve siyah
Giriş: #FFFFFF ve #000000
Çıkış: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Tek bir HSL renk tonundan 5 adımlı bir gölge oluşturma
Giriş: hsl(210, %70, %50) — hafifliği %30/40/50/60/70 olarak değiştirir
Çıkış: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 — tutarlı bir mavi palet
Yaygın Sorunlar
- 3 basamaklı ve 6 basamaklı HEX'in karıştırılması: #F00 ve #FF0000 aynı renktedir, ancak bazı ayrıştırıcılar yalnızca bir formu kabul eder. Sürprizlerden kaçınmak için kodu 6 haneli olarak normalleştirin.
- HSL hafifliğin %50'sinin 'yarı parlaklık' olmadığını unutmak: %100 doygunlukta, %50 açıklık saf renk tonudur; %50'nin üzerinde beyaza doğru renklenir, %50'nin altında siyaha doğru gölgelenir. '%50 gri' hsl(0, %0, %50)'dir.
- Alfa kanalı karışıklığı: #RRGGBBAA (HEX8) modern tarayıcılarda desteklenir ancak eski tarayıcılarda desteklenmez; rgba()/hsla() daha geniş bir desteğe sahiptir. Her zaman hedef ortamı test edin.
- Renk alanı uyumsuzluğu: HEX, RGB ve HSL'nin tümü sRGB'yi tanımlar. P3'e veya Lab/OKLCH'ye (modern ekranlar tarafından kullanılır) dönüştürme yaparsanız, saf bir kanal kopyası yanlış renkler üretir; uygun bir renk kitaplığı kullanın.
İpuçları
- Bir palet tasarlarken HSL kullanın: bir renk tonu seçin, ardından tutarlı gölgeler ve renk tonları oluşturmak için açıklığı (ör. %30/50/70) ve doygunluğu (ör. %60/80/100) değiştirin.
- Erişilebilirlik için arka plana karşı kontrast oranını kontrol edin —WCAG AA normal metin için 4,5:1, AAA 7:1 gerektirir. Göreli parlaklık ve kontrastı hesaplamak için Renk Dönüştürücümüzü kullanın.
- Algısal olarak tek biçimli enterpolasyon için modern CSS color-mix() veya oklch()'yi tercih edin —RGB enterpolasyon, tamamlayıcı renkleri karıştırırken çamurlu grilerden geçebilir.
- Degradeler oluştururken, önce uç noktaları aynı formata dönüştürün; tek bir degrade bildiriminde HEX ve HSL'yi karıştırmak beklenmedik orta noktalar üretebilir.