Bir CSS rengi iki şeyi belirler: tonu ve yoğunluğu. Ama tasarımda üçüncü bir boyut daha vardır — ne kadar görünür olduğu. RGB ve HSL bu boyutu kapsayamaz. RGBA ve HSLA bu boşluğu kapatır; var olan renk formatlarına dördüncü bir parametre ekleyerek şeffaflığı rengin bir parçası haline getirir.
Alpha kanalı ayrı bir CSS özelliği değildir. Renk değerinin içine gömülü bir parametredir. Bu küçük ayrım, nasıl çalıştığını ve opacity gibi görünen ama aslında farklı işleyen diğer yöntemlerden neden ayrıştığını anlamayı kolaylaştırır.
Alpha kanalı nedir?
Alpha, bir rengin opaklığını tanımlayan sayısal değerdir. CSS'te 0 ile 1 arasında ondalıklı bir sayı olarak verilir: 0 tam şeffaf, 1 tam opaktır. 0.5 ise ikisinin tam ortasıdır — altındaki içerik geçer, renk de kısmen görünür.
Teknik bir ayrım dikkat gerektirir: alpha değeri CSS'te 0-255 değil, 0-1 aralığındadır. Görüntü işleme kütüphanelerinde ve bazı design araçlarında 255 tabanlı sistem kullanılır; CSS'teyse standart 0-1'dir. Bunu karıştırmak sessiz hatalara yol açar. rgba(255, 0, 0, 128) yazdığınızda renk tam opak çıkar, çünkü 128 değeri 1'in üzerinde olduğundan tarayıcı bunu 1 olarak yorumlar. Hiçbir hata mesajı görmezsiniz.
CSS Level 4 standardıyla birlikte alpha değeri yüzde olarak da yazılabilir hale geldi: rgba(255 0 0 / 50%). Bu sözdiziminde virgüller kalkar, kanallar boşlukla ayrılır ve alpha eğik çizginin sağında yüzde olarak verilir. Hem 0.5 hem 50% aynı sonucu üretir; hangisini seçeceğiniz stil tercihinize bağlıdır. Modern tarayıcıların tamamı her iki formu destekler.
Bir de transparent anahtar kelimesi vardır. Bu, rgba(0, 0, 0, 0) ile birebir eşdeğerdir — tam şeffaf siyah. CSS geçişlerinde ve animasyonlarda sık kullanılır: bir elementin rengini transparent'tan gerçek bir renge kademeli taşımak yaygın bir tekniktir. Ama dikkat: transparent'tan white'a geçişte tarayıcı ara değerleri hesaplarken siyah tonlar geçebilir. Bunun nedeni, transparent'ın beyaz değil siyah bazlı olmasıdır. Bu sorunu önlemek için rgba(255, 255, 255, 0) kullanmak gerekir.
Çoğu kaynak bu ayrıntıyı atlar.
RGBA formatı
RGBA, RGB formatının dört parametreli halidir. İlk üç değer kırmızı, yeşil ve mavi kanallarını 0-255 aralığında tanımlar; dördüncü parametre alpha değeridir:
rgba(kırmızı, yeşil, mavi, alpha)
rgba(255, 99, 132, 0.5) /* yarı şeffaf pembe-kırmızı */
rgba(0, 128, 0, 0.8) /* %80 opak yeşil */
rgba(30, 30, 30, 0.15) /* hafif koyu overlay */
rgba(255, 255, 255, 0) /* tam şeffaf beyaz */
/* CSS Level 4 sözdizimi — virgülsüz, yüzde alpha */
rgb(255 99 132 / 0.5)
rgb(255 99 132 / 50%)RGBA'nın öne çıktığı durum, bir rengin altındaki içerikle karışmasının istendiği tasarımlardır. Modal arka planları, kart overlay'leri, resim üstü metin bantları ve glassmorphism efektleri bunların başında gelir. mevcut renk değerlerini RGBA formatına dönüştürmek için dönüşüm hesaplamalarını elle yapmak yerine hazır bir araçtan yararlanmak süreci hızlandırır.
RGBA, CSS animasyonlarında da yaygın kullanılan bir formattır. @keyframes içinde alpha değeri 1'den 0'a kademeli düşürüldüğünde yalnızca arka plan rengi solar, metin ve alt elementler etkilenmez. Aynı işi opacity ile yapmak tüm içeriği birlikte soluturur. Üst üste binen, birbirinden bağımsız animasyon gereksinimi olan katmanlarda bu fark belirleyicidir.
Yanlış seçim tüm katmanı etkiler.
HSLA formatı
HSLA, HSL formatına alpha eklenmiş halidir. Ton (hue) 0-360 derece renk çemberini ifade eder; 0 kırmızı, 120 yeşil, 240 mavidir. Doygunluk ve açıklık yüzde değeri alır. Alpha RGBA ile aynı şekilde çalışır:
hsla(ton, doygunluk, açıklık, alpha)
hsla(200, 80%, 50%, 0.7) /* %70 opak mavi-turkuaz */
hsla(0, 100%, 50%, 0.3) /* %30 opak kırmızı */
hsla(280, 60%, 40%, 1) /* tam opak mor */
hsla(45, 90%, 60%, 0.5) /* yarı şeffaf sarı-turuncu */HSLA'nın gerçek avantajı, CSS custom properties ile birleştiğinde ortaya çıkar. Bir marka rengi yalnızca ton değeri olarak bir değişkende tutulduğunda, doygunluk, açıklık ve alpha her kullanım yerine göre bağımsız ayarlanabilir:
:root {
--marka-tonu: 220;
}
.buton {
background-color: hsla(var(--marka-tonu), 75%, 50%, 1);
}
.buton:hover {
background-color: hsla(var(--marka-tonu), 75%, 40%, 1); /* koyulaştı */
}
.kart-arka-plan {
background-color: hsla(var(--marka-tonu), 60%, 95%, 0.6); /* açık, yarı şeffaf */
}
.overlay {
background-color: hsla(var(--marka-tonu), 80%, 20%, 0.85); /* koyu overlay */
}Aynı tonu tüm bu varyasyonlarda RGB formatıyla kullanmak dönüşüm hesabı gerektirir. HSLA'da yalnızca bir sayıyı değiştirmek yeterlidir. HSL formatının nasıl hesaplandığını anlayan biri için HSLA bu mantığın doğal uzantısıdır.
RGBA mı, HSLA mı seçilmeli?
İki format aynı görsel çıktıyı üretir; fark çalışma akışındadır. Seçimi en çok belirleyen, rengin nereden geldiğidir.
Figma, Sketch veya Adobe XD renkleri RGB ya da HEX olarak verir. Bu değerleri kopyalayıp alpha ekleyerek kullanıyorsanız RGBA daha az adım gerektirir; HSLA'ya çevirmek için ayrıca dönüşüm yapmanız gerekir. Tasarım aracından kod tabanına taşınan renklerde RGBA daha sürtünmesizdir.
CSS custom properties üzerine kurulu bir projede tablo tersine döner. Ton bir değişkende, açıklık ve alpha kullanım bağlamına göre ayrı ayrı tanımlandığında renk sistemi tek bir sayıyı değiştirerek genişler. RGB tabanlı sistemde aynı esnekliği yakalamak üç kanalı eşgüdümlü değiştirmeyi gerektirir — bakım yükü katlanır.
Bir de kod okunabilirliği var. hsla(220, 75%, 50%, 0.8) ile rgba(38, 115, 191, 0.8) aynı rengi ifade eder. Birincisinde "mavi tonlu, orta doygunlukta, orta açıklıkta, biraz şeffaf" hemen okunur. İkincisinde bu çıkarım yapılamaz; ne renk olduğunu anlamak için tarayıcıda görsel kontrol gerekir. Renk değerlerini kod incelemesinde anlayan insanlar çalışacaksa HSLA bu farkı yaratır.
opacity ile alpha arasındaki kritik fark
CSS'te şeffaflık denildiğinde iki farklı mekanizma birbirine karıştırılır. opacity bir CSS özelliğidir; RGBA ve HSLA'daki alpha ise renk değerinin içine gömülü bir parametredir. İkisi aynı şey değildir.
Kalıtsallık. opacity, uygulandığı elementi ve içindeki tüm alt elementleri etkiler. Bu değer alt elementlerden override edilemez:
/* opacity: arka plan da, metin de, her şey %50 şeffaflaşır */
.overlay {
background-color: #000000;
opacity: 0.5;
/* içindeki p, span, img — hepsi soluklaşır */
}
/* rgba: yalnızca arka plan şeffaf, metin tam opak kalır */
.overlay {
background-color: rgba(0, 0, 0, 0.5);
/* içindeki metin etkilenmez */
}Modal arka planı veya resim üstü overlay'de yanlış mekanizma seçildiğinde içerik de soluklaşır, okunabilirlik düşer. Hedef yalnızca arka planı şeffaflaştırmaksa opacity değil RGBA veya HSLA kullanmak gerekir.
Katmanlı tasarımlarda z-index sorunları baş gösteriyorsa opacity kullanımını kontrol edin. Değeri 1'den küçük olan her element yeni bir stacking context oluşturur; bu context içindeki çocuklar, dışarıdaki elementlerle z-index yarışına giremez. RGBA'daki alpha böyle bir context oluşturmaz — bu fark çoğu zaman sorun yaşanana kadar görünmez.
opacity: 0 olan bir element DOM'da varlığını korur. Tıklanabilir olmaya devam eder, klavye odaklanmasını engeller. rgba(..., 0) da elemanı DOM'dan kaldırmaz; ama en azından yalnızca rengi etkiler, etkileşim davranışını değiştirmez.
Sekiz haneli HEX ve alpha
Daha az bilinen ama design araçlarından sık karşılaşılan bir format daha vardır: sekiz haneli HEX. Standart HEX altı hanedir (#RRGGBB); iki hane daha eklendiğinde son iki hane alpha değerini onaltılık sistemde ifade eder:
#FF000080 /* yarı şeffaf kırmızı — 80 hex = 128 onluk ≈ %50 alpha */
#00000000 /* tam şeffaf siyah — transparent ile aynı */
#000000FF /* tam opak siyah — standart HEX ile aynı */
#FFFFFF33 /* yaklaşık %20 opak beyaz */Modern tarayıcılar bu formatı destekler ve Figma gibi araçlar zaman zaman sekiz haneli HEX çıktısı verir. Ancak okunabilirlik açısından rgba(255, 0, 0, 0.5) çok daha anlaşılırdır; onaltılık alpha değerini zihinsel olarak yüzdeye çevirmek kod incelemelerinde ekstra yük yaratır. Bu yüzden elle yazılan kodda sekiz haneli HEX nadiren tercih edilir — görülür, bilinir, ama üretilmez.
Renk değerleri arasında dönüşüm yaparken alpha kanalı ayrı tutulur. RGB ve HEX arasındaki dönüşüm hesapları yalnızca üç renk kanalını kapsar; alpha değeri bu hesapların dışındadır ve her formata aynı mantıkla eklenir.
Pratik seçim çoğu zaman basittir: design araçlarından renk alıyorsanız RGBA yeterlidir. CSS içinde renk sistemi kuruyorsanız HSLA daha esnek bir yapı sunar. Sekiz haneli HEX araçların ürettiği bir çıktıdır; elle yazılmaz, okunur. En çok atlanan bilgi ise opacity'nin stacking context oluşturduğu ve alpha'nın oluşturmadığıdır — bu fark, katmanlı tasarımlarda sorun başlayana kadar fark edilmez.