Skip to content
user@convertitive:~$convertitiveLog in

Guide

Hex'ten RGBA'ya: Hex Renge Saydamlık Ekleme

#FF6B35'te saydamlık kavramı yoktur. rgba(255, 107, 53, 0.5) vardır — dönüşüm, hex hanelerini yeniden kanallara ayırmaktan ibarettir.

By Published

#FF6B35 gibi standart 6 haneli bir hex renk yalnızca kırmızı, yeşil ve maviyi kodlar — başka hiçbir şeyi değil. Bu biçimde saydamlık için bir yer yoktur. CSS'te bir rengi kısmen şeffaf hale getirmek için ya dördüncü bir alfa kanalını 0 ile 1 arası ondalık bir sayı olarak ekleyen rgba() fonksiyonuna ya da aynı amaçla iki hex hanesi daha ekleyen daha yeni 8 haneli hex sözdizimine (#RRGGBBAA) ihtiyacınız var. Hex ile RGBA arasında dönüşüm, düz hex'ten RGB'ye dönüşümle aynı kanal ayırma matematiğidir, artı bir sayı daha.

Hex hanelerini RGB kanallarına ayırmak

6 haneli bir hex renk, art arda üç adet 2 haneli hex bayt çiftidir: FF (kırmızı), 6B (yeşil), 35 (mavi). Her çift, 00 ile FF arasında 16 tabanlı bir sayıdır ve ondalıkta 0-255'i temsil eder. FF = 255, 6B = 107, 35 = 53 — bu da rgb(255, 107, 53)'ü verir. 0 ile 1 arasında bir alfa değerini dördüncü argüman olarak ekleyin, tamamen opak için rgba(255, 107, 53, 1) ya da kısmi saydamlık için 1'in altında herhangi bir kesir elde edersiniz.

Yaygın opaklık değerleri, iki biçimde

Opaklıkrgba() alfa8 haneli hex son eki
%1001FF
%900,9E6
%750,75BF
%500,580
%250,2540
%100,11A
%0000

Hex son eki, opaklık kesrinin 255 ile çarpılıp hex'e çevrilmesinden gelir — %50, 0,5 × 255 = 127,5'tir, bu da 128'e (ondalık) veya 80'e (hex) yuvarlanır. Hem rgba() fonksiyonu hem de 8 haneli hex sözdizimi, W3C CSS Color Module uyarınca 2017'den beri her büyük tarayıcıda desteklenir, dolayısıyla aralarındaki seçim tamamen stil meselesidir.

Bunun CSS'in ötesinde neden önemli olduğu

Aynı matematik, bir tasarım aracının veya API'nin alfa destekli bir renk istediği her yerde geçerlidir — SVG'nin fill-opacity'si, canvas fillStyle dizeleri veya yarı saydam kaplama renkleri saklayan bir tasarım sistemi belirteci. Bir marka hex renginden başlayıp yarı saydam bir kaplama varyantına ihtiyaç duyarsanız (hover durumları veya modal arka planları için yaygın bir desen), önce temel hex'i bir hex'ten RGB'ye dönüştürücüyle RGB'ye çevirin, ardından tasarımın gerektirdiği alfa ile rgba() olarak yeniden birleştirin — her seferinde bayt çiftlerini elle hesaplamaya gerek kalmadan.

Frequently asked questions

Hex rengi RGBA'ya nasıl çeviririm?
Hex'i kırmızı, yeşil ve mavi bayt çiftlerine ayırın ve her birini ondalık sayıya (0-255) çevirin — düz hex'ten RGB'ye dönüşümle aynı işlem — sonra 0 (tamamen saydam) ile 1 (tamamen opak) arasında dördüncü bir alfa değeri ekleyin: rgba(R, G, B, A). Örneğin #FF6B35, %50 opaklıkta rgba(255, 107, 53, 0.5) olur.
rgba() ile 8 haneli hex renk arasındaki fark nedir?
Aynı bilgiyi farklı biçimde temsil ederler. rgba(255, 107, 53, 0.5) ile #FF6B3580 aynı turuncuyu %50 opaklıkta ifade eder — 8 haneli hex, ayrı bir ondalık değer yerine alfa için iki hex hanesi (00-FF) daha ekler. İkisi de 2017'den beri tüm büyük tarayıcılarda desteklenir.
Bir alfa yüzdesini iki hex hanesine nasıl çeviririm?
Yüzdeyi (0-1 kesri olarak) 255 ile çarpın, en yakın tam sayıya yuvarlayın ve iki haneli hex değerine çevirin. %50 opaklık 0,5 × 255 = 127,5'tir, 128'e yuvarlanır, bu da 0x80'dir — bu yüzden %50 opaklıktaki turuncu için #FF6B3580 kullanılır.
CSS'te rgba() mi yoksa 8 haneli hex mi kullanmak daha iyi?
İşlevsel olarak aynıdır — kod tabanınızın stiline uyanı seçin. rgba() ilk bakışta alfa değeri hakkında daha açıktır; 8 haneli hex daha kompakttır ve zaten hex renk kodu çıktısı veren tasarım araçlarıyla doğal biçimde eşleşir.

Sources & references

Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.

Related

Published September 25, 2026