RGB renk değeri KIRMIZI, YEŞİL ve MAVİ ışık (Red,Green,Blue) kaynaklarını temsil eder.
RGB Değeri
CSS’de bir renk, aşağıdaki formül kullanılarak RGB değeri olarak belirtilebilir:
rgb(red, green, blue)
Her parametre (kırmızı, yeşil ve mavi), rengin yoğunluğunu 0 ile 255 arasında tanımlar.
Örneğin, rgb(255, 0, 0) kırmızı olarak görüntülenir çünkü kırmızı en yüksek değerine (255) ve diğerleri 0’a ayarlanmıştır.
Siyahı görüntülemek için tüm renk parametreleri 0’a getirilir: rgb(0, 0, 0).
Beyazı görüntülemek için tüm renk parametreleri 255’e getirilir: rgb(255, 255, 255).
Örnekler;
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body>
</html>
Grinin tonları genellikle 3 ışık kaynağının tümü için eşit değerler kullanılarak tanımlanır:
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:rgb(30, 30, 60);">rgb(30, 30, 30)</h2>
<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>
</body>
</html>
RGBA Değeri
RGBA renk değerleri, bir rengin opaklığını belirten alfa kanalına sahip RGB renk değerlerinin bir uzantısıdır.
Bir RGBA renk değeri şununla belirtilir:
rgba(red, green, blue, alpha)
Alfa parametresi 0,0 (tamamen şeffaf) ile 1,0 (hiç şeffaf değil) arasında bir sayıdır:
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>
</body>
</html>
