Boyaları karıştırdığınızda renkler koyulaşır. Ne kadar pigment eklerseniz karışım siyaha o kadar yaklaşır. Ama ekranlarda tam tersine bir fizik işler: kırmızı, yeşil ve mavi ışığı üst üste getirdiğinizde sonuç beyazdır. RGB renk modeli, bu ışık fiziğini sayısal ifadeye çeviren sistemdir.
Web'deki tüm renkler nihayetinde bu üç kanalın bileşimiyle oluşur. HEX kodunuz #ff6600 da olsa, CSS'de orange da yazsanız, tarayıcı arka planda bu değeri RGB bileşenlerine indirger. Modelin nasıl çalıştığını anlamak, renk seçimini sezgisel olmaktan çıkarıp hesaplanabilir hale getirir.
Eklemeli renk sistemi: ışık pigment değildir
RGB, additive yani eklemeli bir renk sistemidir. Fiziksel pigmentlerin tersine, ışık kanalları üst üste eklenince parlaklık artar, kararır değil. Üç kanal da maksimum değere ulaştığında beyaz elde edilir; üçü de sıfıra düştüğünde siyah.
Bu, CMYK'nın tam zıttıdır. Matbaa mürekkepleri siyan, magenta, sarı ve siyahı karıştırarak çalışır; karıştırdıkça ışık azalır, renk koyulaşır. RGB ise monitörlerin, telefon ekranlarının ve her türlü dijital yüzeyin çalışma prensibidir. Bir ekran milyonlarca pikselden oluşur ve her piksel üç küçük ışık kaynağı içerir: kırmızı, yeşil, mavi. Bu üçü farklı yoğunlukta yanarak gözünüze tek bir renkmiş gibi ulaşır.
Tasarım dosyaları veya görseller farklı yazılımlar arasında paylaşılırken bu ayrım kritik hale gelir. Ekran için üretilen bir rengi doğrudan baskıya göndermek renk kaymasına yol açar. İki sistem farklı fiziksel gerçekliği modeller; birinde ışık toplanır, diğerinde ışık emilir.
0'dan 255'e: her kanalın dili
RGB'de her kanal 0 ile 255 arasında bir tam sayı alır. Bu aralık 8 bit'ten gelir: 2⁸ eşittir 256 değer; sıfırdan başladığı için üst sınır 255 olur. Üç kanal bir arada 256 × 256 × 256, yani 16.777.216 farklı rengi temsil edebilir. Buna "24-bit renk" ya da "true color" denir.
0-255 skalası doğrusal bir sinyali temsil eder; gözün bu sinyali nasıl algıladığını değil. rgb(0, 0, 0)'dan rgb(128, 128, 128)'e giden bir gradyan sayısal olarak tam ortada durur, ama izleyiciye görsel olarak orta ton gibi görünmez — gamma düzeltmesi yoksa bu geçiş karanlık uca belirgin biçimde yanaşır. Tarayıcılar standart sRGB profili üzerinden bunu büyük ölçüde dengeler; ama Canvas API üzerinde doğrudan piksel hesabı yapıyorsanız veya renk iki değer arasında matematiksel olarak interpole edilecekse bu fark hesaba katılmalıdır.
rgb(255, 0, 0) yalnızca kırmızı kanalı açık bırakır; saf kırmızı. rgb(0, 255, 0) saf yeşil. rgb(255, 255, 0) ise kırmızı ile yeşilin birleşimidir; ışık fiziğinde bu sarıya eşittir. Gri tonlar için üç kanalın eşit değer taşıması yeterlidir: rgb(128, 128, 128) orta gri, rgb(200, 200, 200) açık gri.
Bu hesabı içselleştirdiğinizde bir renk değerine baktığınızda hangi kanalın baskın olduğunu ve tonun genel yönünü okuyabilirsiniz. rgb(180, 60, 200) gördüğünüzde kırmızı ve mavinin yüksek, yeşilin baskılandığını ve dolayısıyla mor-eflatun bir ton beklemeniz gerektiğini anlarsınız.
HEX kodları ile RGB değerleri arasında doğrudan bir aritmetik ilişki vardır. #ff6600 gördüğünüzde bunu üç çift onaltılık basamak olarak okursunuz: ff kırmızı, 66 yeşil, 00 mavi. ff onaltılık sistemde 255'e, 66 ise 102'ye eşittir. Yani #ff6600 tam olarak rgb(255, 102, 0)'dır. İki format aynı kanalları farklı sayı tabanlarında ifade eder; biri 16'lık, diğeri 10'luk. Bu ilişkiyi kavradıktan sonra formatlar arasında zihinsel dönüşüm yapmak mümkün hale gelir.
Sayı tabanı değişir, kanal değişmez.
CSS'te RGB kullanımı
CSS'te RGB iki sözdiziminde geçerlidir.
Geleneksel notasyon virgülle ayrılmış tamsayılar kullanır:
color: rgb(255, 99, 71);
background-color: rgb(34, 139, 34);
border-color: rgb(200, 200, 200);Modern notasyon CSS Color Level 4 ile geldi ve boşluk ayıracı kullanır:
color: rgb(255 99 71);
background-color: rgb(34 139 34);İkisi aynı sonucu üretir. Geleneksel notasyon tarayıcı uyumluluğu açısından güvenli seçimdir; modern notasyonu yalnızca hedef tarayıcılar belirli ve güncel olduğunda tercih edebilirsiniz.
CSS custom properties ile renk sistemi kuruyorsanız RGB kanallarını ayrı değişkenlere taşımak esnek bir yapı sağlar:
:root {
--marka-r: 37;
--marka-g: 99;
--marka-b: 235;
}
.buton {
background-color: rgb(var(--marka-r), var(--marka-g), var(--marka-b));
}Bu yaklaşım özellikle tema geçişlerini veya JavaScript üzerinden dinamik renk değişimlerini yönetirken kanalları ayrı ayrı kontrol etme olanağı tanır. HEX ile aynısını yapmak çok daha güçtür.
HEX bir bütündür; kanal erişimi yoktur.
JavaScript tarafında bir elementin mevcut rengini okumak istediğinizde tarayıcı her zaman RGB formatında döner. getComputedStyle(el).color çağrısı "rgb(37, 99, 235)" gibi bir string verir; HEX değil (Chrome DevTools renk panelinde ne görürseniz görün, DOM üzerinden okuma her zaman bu formata döner). Bu değerden kanalları ayıklamak için küçük bir parse işlemi gerekir:
const renk = getComputedStyle(document.querySelector('.buton')).color;
// "rgb(37, 99, 235)"
const [r, g, b] = renk.match(/\d+/g).map(Number);
// r: 37, g: 99, b: 235Renk kanallarını animasyon veya hesaplama amacıyla manipüle edecekseniz bu ayrıştırma kaçınılmazdır. HEX ile başlasanız da DOM üzerinden okuma her zaman RGB'ye döner; bu tarayıcının iç renk temsil biçiminden kaynaklanır.
rgba() ve alfa kanalı
rgba() RGB'ye dördüncü bir parametre ekler: alfa. Alfa, 0 ile 1 arasında ondalık bir değerdir ve opaklığı temsil eder.
background-color: rgba(0, 0, 0, 0.5); /* %50 şeffaf siyah */
color: rgba(255, 255, 255, 0.9); /* neredeyse opak beyaz */
border-color: rgba(100, 149, 237, 0.3); /* soluk mavi kenarlık */Metin silikleşti ama yalnızca arka planı şeffaf yapmak istiyordunuz. opacity bu ayrımı yapmaz — değer ne olursa olsun elementi bir bütün olarak etkiler: arka plan, metin, alt elementlerin tamamı aynı opaklığa düşer. rgba() ise yalnızca uygulandığı renk özelliğini etkiler; arka planı yarı şeffaf tutarken metin tam opak kalır.
/* Bu iki kart farklı görünür */
.kart-1 {
background-color: rgba(0, 0, 0, 0.3);
color: rgb(255, 255, 255); /* metin etkilenmez */
}
.kart-2 {
background-color: black;
opacity: 0.3; /* metin de şeffaflaşır */
}Overlay veya modal arka planı yaparken bu fark belirleyicidir; metin içeren bir kutu üzerinde ikisini yan yana deneyin, fark ilk bakışta görünür olur. Modern CSS'te rgb() fonksiyonu da alfa parametresini kabul eder: rgb(0 0 0 / 0.5). Bu sözdiziminde rgba() ile rgb() işlevsel olarak eşittir — IE desteğine ihtiyaç duymayan projelerde iki notasyon birbirinin yerine kullanılabilir; ancak ekip içinde tutarlılık için birini seçip sabit kalmak bakım sürtünmesini azaltır.
İkisi aynı kanalı tanımlar. Notasyon tercihidir.
RGB, HEX ve HSL: bağlama göre seçim
Bu üç format aynı renkleri farklı biçimlerde ifade eder. Seçim teknik değil, bağlamsal bir karardır.
HEX tasarım araçlarında standarttır. Figma ve benzeri araçlar renkleri varsayılan olarak HEX gösterir. Kopyala-yapıştır iş akışında pratiktir; kanal üzerinde dinamik kontrol gerekmiyorsa ve alfa şeffaflığına ihtiyaç yoksa yeterlidir.
RGB, bir kanalı ayrıca kontrol etmeniz gereken durumlarda öne çıkar. JavaScript'ten renk kanalına erişecekseniz, CSS değişkeni üzerinden dinamik renk üretecekseniz veya alfa kanalını bağımsız ayarlamanız gerekiyorsa RGB daha uygun seçimdir. Kanallar sayısal değer taşıdığından animasyon hesaplamalarına da doğrudan dahil edilebilir.
HSL renk tasarımı sezgisini en iyi destekleyen formattır. "Bu rengi biraz daha soluk yapayım" veya "aynı tonun daha koyu versiyonu" gibi kararları doğrudan sayısal değişikliğe döker. Renk sistemi veya tema tasarlarken HSL, tutarlı palet üretimini kolaylaştırır. Ama JavaScript üzerinden iki rengi interpole etmeniz veya kanal değerini doğrudan hesaplamanız gerektiğinde HSL'nin trigonometrik dönüşüm gerektiren yapısı bir sürtünme noktasına dönüşür; bu noktalarda RGB hem okunması hem de işlenmesi daha doğrusal olan formattır.
Formatlar arasında dönüşüm gerektiğinde — örneğin tasarımcıdan HEX aldınız ama rgba() kullanmanız gerekiyor — renk değerlerini karşılaştırmalı görmek için Renk Dönüştürücü'yü kullanabilirsiniz. HEX ile RGB arasındaki dönüşüm mantığını kavradıktan sonra iki format arasındaki ilişki çok daha somut hale gelir; bu dönüşüm aritmetik bir işlemdir. CSS custom properties ile renk sistemi kuruyorsanız renk teorisi temellerini uygulamak tutarlı bir palet oluşturmayı önemli ölçüde kolaylaştırır.
Web'de hiçbir renk kanaldan bağımsız değildir. rgb(200, 50, 50) yazdığınızda bir renk seçmiyorsunuz; üç ışık kaynağının yoğunluğunu ayarlıyorsunuz. Bu bakış açısı hem CSS'te renk yönetimini hem de tasarım kararlarını çok daha net bir zemine oturtuyor.