Renk Teorisi

Isaac Newton, 1704'te yayımladığı Opticks ile ışığın doğasını kökten değiştirdi. Newton, beyaz ışığı prizmadan geçirdiğinde renk tayfına ayrıldığını keşfetti ve ardından bu tayf renklerini tekrar birleştirerek beyaz ışığa döndürebildi. Kırmızı ile morun karışımıyla tayfta olmayan magenta rengini üreterek renk tayfını bir çembere sardı — tarihte ilk renk çemberi.

Newton'un çemberinde 7 renk vardı (haftanın günleri ve müzik notalarıyla eşleştirilmiş). Çember, iki rengin karıştırma sonucunu tahmin etmek için kullanılabiliyordu: çember üzerinde ortadaki rengi gösterin.

Alman şair Wolfgang von Goethe, 1810'da yayımladığı Theory of Colors ile rengin insan algısına odaklandı. Üç ana renk — magenta, sarı ve mavi — belirledi ve bunların diğer tüm renkleri karıştırabileceğini savundu. Newton'la çelişir gibi görünse de aslında ikisi de haklıydı: Newton toplamsal (ışık), Goethe çıkarımsal (boya) karışımı anlatıyordu.

Goethe'nin ardışık görüntü (afterimage) ve optik illüzyon deneyleri, renk algısının ne kadar göreceli olduğunu gösterdi — bu çalışmalar Itten ve Albers'i derinden etkileyecektir.

Newton'un (ışık) ve Goethe'nin (boya) yaklaşımları arasındaki fark, iki temel renk karıştırma yöntemini temsil eder:

18.-19. yüzyılda sanatçılar renk tayfını 3 boyutlu katılar olarak göstermeye başladı:

• Tobias Mayer (1775): Kırmızı-sarı-mavi köşeli üçgen oluşturdu; farklı parlaklık seviyelerinde üçgenleri üst üste yığarak 3D bir model yarattı — bir rengi 3B uzayda konumuyla tanımlama fikrinin öncüsü
• Philipp Otto Runge (1810): Renk tayfını bir küre üzerinde gösterdi (beyaz ve siyah kutuplar, arada renkli bantlar). Ancak parlaklık ile doygunluğu ayırmadı
• Michel Eugène Chevreul (1839): Algısal olarak eşit adımlar oluşturmaya çalıştı. Ardışık görüntüleri kullanarak tamamlayıcı renkleri belirledi — renk uyumu çalışmalarının öncüsü

Kaynaklar: Programming Design Systems

Amerikan ressam Albert Henry Munsell, insan deneyleri ve mekanik aletlerle algısal olarak düzgün bir renk modeli yaratmayı başardı. Renk uzayını üç boyuta ayırdı:

• Hue (Ton) — rengin türü (kırmızı, mavi, vb.)
• Value (Değer) — parlaklık (açık/koyu)
• Chroma (Kroma) — rengin saflık derecesi (doygunluk)

Munsell, renk katısının düzensiz bir şekle sahip olması gerektiğini fark eden ilk kişiydi: Koyu tonların doygunluk aralığı daha dar, bazı tonlar diğerlerinden daha geniş bir chroma aralığına sahip. Bu boyutlar bugün hâlâ HSV/HSL modellerinin temelini oluşturur.

Munsell'in sistemi hâlâ birçok güzel sanatlar okulunun müfredatında kullanılmaktadır. Sayısal renk notasyonu fikri (renkleri isim yerine koordinatlarla ifade etme) bugünkü dijital renk kodlarının atası sayılabilir.

20. yüzyılın başında Bauhaus okulu renk eğitiminde devrim yarattı:

Johannes Itten — Yedi Renk Kontrastı

Itten, The Art of Color (1961) kitabında tasarımcıların ustalaşması gereken 7 renk kontrastı tanımladı: açık-koyu kontrastı, ton kontrastı, sıcak-soğuk kontrastı, tamamlayıcı kontrast, eşzamanlı kontrast, doygunluk kontrastı ve alan kontrastı. Bu sınıflandırma hâlâ renk hakkında sistematik düşünmenin temelini oluşturur.

Josef Albers — Rengin Göreceliliği

Itten'in öğrencisi Albers, Interaction of Color (1963) kitabında rengin ne kadar göreceli olduğunu gösterdi. En ünlü deneyi: iki farklı arka plan üzerindeki aynı renkteki iki kare, tamamen farklı renkler gibi algılanır.

Cyan, Magenta, Yellow, Key (Black) — Çıkarımsal (subtractive) renk modelidir. Mürekkep/boya ile çalışır.

• Her kanal 0% - 100% arasında. Cyan %100 = tüm kırmızı ışık emilir
• K (Black): Teoride CMY karışımı siyah verir ama pratikte koyu kahverengi olur. Bu yüzden saf siyah mürekkep ayrı eklenir
• Kullanım: Ofset baskı, dergi, poster, kartvizit — bastırılacak her şey CMYK'dır
• Dikkat: Bazı RGB renkleri CMYK'da üretilemez (gamut farkı). Parlak neon yeşil veya elektrik mavisi ekranda olduğu gibi basılamaz!

GIMP'te: Image → Mode → CMYK (GIMP 3.0+) veya Colors → Components → Decompose → CMYK ile kanallara ayırabilirsiniz
Inkscape'te: File → Document Properties → Color Management ile CMYK profili atayabilirsiniz

CIE (Commission Internationale de l'Éclairage) tarafından 1976'da tanımlanan bu model, insan algısına en yakın renk uzayıdır.

• L* = Lightness (0 = siyah, 100 = beyaz)
• a* = Yeşil ↔ Kırmızı ekseni (negatif = yeşil, pozitif = kırmızı)
• b* = Mavi ↔ Sarı ekseni (negatif = mavi, pozitif = sarı)

Neden önemli? Lab'da eşit mesafe = eşit algısal fark. Bu kavram JND (Just Noticeable Difference — Fark Edilebilir En Küçük Fark) ile doğrudan ilişkilidir. Lab uzayında iki renk arasındaki mesafe ΔE (Delta E) olarak ölçülür. ΔE ≈ 1 bir JND'ye karşılık gelir — yani insan gözünün ayırt edebildiği en küçük renk farkıdır. ΔE < 1 ise fark algılanamaz, ΔE 2-5 arası yakından bakınca fark edilir, ΔE > 5 ise açıkça farklı renkler olarak görülür. RGB/HSL'de ise aynı sayısal mesafe eşit algısal farka karşılık gelmez!

Kullanım: Renk düzeltme, cilt tonu ayarlama, fotoğraf düzenleme, endüstriyel renk kalite kontrolü (boya, tekstil). Photoshop'un dahili renk dönüşümleri Lab üzerinden geçer.

Araç: Colorizer.org — Lab, RGB, CMYK, HSV arasında interaktif dönüşüm yapabilirsiniz

TV yayıncılığı ve video sıkıştırma (JPEG, MPEG, H.264) için tasarlanmış modeldir.

• Y = Luma (parlaklık bilgisi) — gri tonlu görüntü
• U (Cb) = Mavi fark sinyali
• V (Cr) = Kırmızı fark sinyali

Neden önemli? İnsan gözü parlaklık değişimlerine renkten çok daha hassastır (çubuk hücreler > koni hücreler). YUV bunu kullanır: Y kanalı (parlaklık) tam çözünürlükte saklanır, U ve V kanalları yarı çözünürlükte saklanır → dosya boyutu %50 azalır, göz farkı anlamaz! Buna chroma subsampling (4:2:0) denir.

Kullanım: JPEG sıkıştırma, video codec'ler (H.264, H.265, VP9), TV yayını (PAL/NTSC), video oynatıcılar

Eğer Photoshop/Unity kullanıyorsanız HSV düşünün, CSS/web yapıyorsanız HSL düşünün. Dönüşüm formülleri basittir, çoğu araç otomatik yapar.

1930'larda CIE (Commission Internationale de l'Éclairage), insan denekleri üzerinde yürütülen kapsamlı görme deneyleriyle insan gözünün algılayabildiği tüm renkleri bir diyagrama yerleştirdi. Bu CIE kromatiklik diyagramı (veya CIE XYZ renk uzayı), tüm modern renk uzaylarının referans noktasıdır.

• Diyagramdaki at nalı şeklindeki eğri saf (monokromatik) tayfsal renkleri gösterir
• Eğrinin içindeki alan, insan gözünün görebildiği tüm renkleri temsil eder
• Her renk uzayı, bu alanın içine bir üçgen çizer — buna gamut (renk aralığı) denir
• Üçgenin köşeleri o uzayın ana (primary) renklerini tanımlar

sRGB — İnternet ve Dijital Standart

1996'da HP ve Microsoft tarafından oluşturulan ve bugün web'in, çoğu monitörün ve dijital fotoğrafçılığın standardı olan renk uzayı.

• Gamut: Üç renk uzayı arasında en dar — ama çoğu ekranın gösterebileceği renk aralığına karşılık gelir
• Gamma: ~2.2 (doğrusal olmayan kodlama)
• Kullanım: Web, sosyal medya, e-posta, CSS'teki tüm renkler, P5.js, Processing, oyun motorlarının varsayılan ayarı
• Web'de: Profil belirtilmemiş her görsel sRGB olarak kabul edilir

Adobe RGB (1998) — Baskı ve Profesyonel Fotoğraf

Adobe tarafından CMYK baskının gerektirdiği renk aralığını karşılamak üzere oluşturulmuş geniş gamutlu bir uzay.

• Gamut: sRGB'den çok daha geniş, özellikle yeşil-mavi bölgede
• Kullanım: Profesyonel fotoğrafçılık, matbaa, poster baskı, yüksek kalite baskı iş akışları
• Dikkat: Adobe RGB bir görüntüyü sRGB olarak açarsanız renkler soluk/yanlış görünür — profil dönüşümü şarttır!

DCI-P3 — Sinema ve Yeni Nesil Ekranlar

Dijital sinema endüstrisi tarafından tanımlanan ve Apple'ın 2015'ten beri tüm ürünlerinde benimsediği geniş gamutlu renk uzayı.

• Gamut: sRGB'den %25 daha geniş. Kırmızı-sarı tonlarda Adobe RGB'den daha iyi, ancak bazı yeşil-mavi tonlarda daha dar
• Kullanım: iPhone, iPad, MacBook Pro, iMac Retina, modern Android telefonlar, HDR içerik
• Web'de: CSS color(display-p3 1 0 0) sözdizimi ile kullanılabilir (CSS Color Level 4)

Dijital bir görüntü ICC profili (renk profili) gömerek piksel değerlerinin hangi renk uzayına ait olduğunu belirtir. Profil olmadan, program renkleri yanlış yorumlayabilir.

• Profil eşleşmezse: Adobe RGB'de kaydedilmiş bir fotoğrafı sRGB olarak açarsanız, yeşiller ve maviler soluk ve cansız görünür
• Photoshop: Profil uyumsuzluğunda uyarı verir ve dönüşüm seçenekleri sunar — Edit → Convert to Profile
• Baskı öncesi: Matbaalar genelde Adobe RGB veya CMYK profili ister. sRGB görseli direkt basarsanız renkler beklediğinizden farklı çıkabilir
• Web: Profilsiz görseller sRGB olarak yorumlanır. Bazı tarayıcılar Retina ekranlarda sRGB görüntüleri DCI-P3'e dönüştürmekte başarısız olabilir → renklerde oversaturation sorunu

📖 Making Sense of Color Management (A Book Apart) — renk yönetimi hakkında kapsamlı kaynak

CIELAB ve CIELUV (1976)

CIE'nin 1930'lardaki XYZ uzayını geliştirerek oluşturduğu iki renk uzayı. İkisi de algısal düzgünlük hedefler:

• CIELAB: L* (parlaklık), a* (yeşil↔kırmızı), b* (mavi↔sarı). Endüstride en yaygın — boya, tekstil, gıda kalite kontrolü
• CIELUV: L (parlaklık), u (kırmızı↔yeşil skalası), v (sarı↔mavi skalası). Ekran renkleri için daha uygun
• İkisinde de aynı L* değerine sahip renkler eşit parlaklıkta algılanır — sRGB HSL'de sarı (L=50%) ile mavi (L=50%) arasında büyük parlaklık farkı vardır!

Ancak bu uzaylarda "u, v" veya "a, b" değerleriyle renk tanımlamak sezgisel değil — karanlık mor için hangi LUV değerlerini kullanacağınızı tahmin edemezsiniz. Çözüm: sezgisel modelle birleştirmek.

HSLuv — "İnsan Dostu HSL"

HSLuv, CIELUV renk uzayını tanıdık Hue-Saturation-Lightness boyutlarıyla kullanmanıza olanak tanır. Sonuç: HSL kadar sezgisel, ama algısal olarak düzgün.

• Aynı Lightness değerine sahip iki renk gerçekten eşit parlaklıkta görünür
• Eşit Saturation adımları eşit doygunluk farkları üretir
• JavaScript kütüphanesi mevcut: hsluv.hsluvToRgb([h, s, l])
• Pratik kullanım: koyu arka plan üzerinde rastgele okunaklı renk seçme, tutarlı renk geçişleri

// HSLuv → RGB dönüşüm (JavaScript)
const rgb = hsluv.hsluvToRgb([hue, saturation, lightness]);
// rgb dizisi [0-1, 0-1, 0-1] — 255 ile çarparak CSS'e uygun hale getirin
const cssRgb = `rgb(${rgb[0]*255}, ${rgb[1]*255}, ${rgb[2]*255})`;

Oklab / oklch — CSS'in Yeni Renk Uzayı

Björn Ottosson'un 2020'de geliştirdiği Oklab, modern bir algısal düzgün renk uzayı olarak hızla yaygınlaştı. CSS Color Level 4 ile oklch() fonksiyonu olarak doğrudan CSS'e eklendi.

• oklch(L C H) = Lightness (0-1), Chroma (0-0.4), Hue (0-360°)
• Tüm modern tarayıcılar destekliyor (Chrome 111+, Firefox 113+, Safari 15.4+)
• HSL'ye göre avantaj: Lightness gerçekten algısal, renk geçişleri çok daha pürüzsüz
• Gradient'lerde ara tonlarda "çamurlu" gri oluşmaz (HSL'de kırmızıdan maviye geçişte oluşabilir)

/* CSS'te oklch kullanımı */
.button { 
  background: oklch(0.7 0.15 180);    /* L=0.7, C=0.15, H=180° (cyan) */
  color: oklch(0.98 0.01 180);        /* Neredeyse beyaz, hafif cyan ton */
}

/* Perceptually uniform gradient */
.gradient {
  background: linear-gradient(in oklch, oklch(0.6 0.2 0) , oklch(0.6 0.2 240));
}

📖 Oklab: A Perceptual Color Space for Image Processing — Björn Ottosson'un orijinal makalesi
📖 Chrome Developers: CSS Color Spaces — oklch() kullanım rehberi

GIMP'te Histogram

Colors → Levels (Renkler → Düzeyler) veya Colors → Curves (Renkler → Eğriler) diyaloglarında histogram görüntülenir. Histogram'ı ayrıca Windows → Dockable Dialogs → Histogram ile bağımsız panel olarak açabilirsiniz.

📖 GIMP Tutorial: GIMP Histogram Dialog | Levels Tool | Curves Tool

Krita'da Histogram

Settings → Dockers → Histogram ile canlı histogram paneli açılır. Seçili katmanın veya tüm görüntünün histogramını gösterir. RGB kanallarını ayrı ayrı veya birlikte izleyebilirsiniz.

📖 Krita Tutorial: Histogram Docker

Photoshop'ta Histogram

Window → Histogram ile panel açılır. Image → Adjustments → Levels (Ctrl+L) veya Curves (Ctrl+M) ile histogram üzerinden düzenleme yapılır. Photoshop'ta histogram canlı güncellenir ve RGB kanalları renkli çizgilerle gösterilir.

Doygunluk tercihinin kültürel ve bağlamsal olduğunu gösteren mükemmel bir karşılaştırma:

İki yaklaşım da "doğru" — bağlama göre birini seçmek tasarımcının işi. Oyun seviyeleri, UI tasarımı, marka kimliği hep bu tercihi yansıtır. Kaynak: Programming Design Systems

Analog (yakın ton) renk şemaları doğanın en sık kullandığı uyum tipidir. İşte iki farklı atmosfer:

Her iki sahne de analog ton şeması kullanıyor ama tamamen farklı atmosferler oluşturuyor — çünkü doygunluk, parlaklık ve seçilen ton aralığı farklı. Kaynak: Programming Design Systems

Programming Design Systems kitabında, HSL boyutlarının bilinçli kullanımına güzel bir gerçek dünya örneği: Mast Brothers çikolata ambalajları. Her ürün farklı bir renk şemasıyla kişilik kazanıyor:

Aynı marka, aynı geometrik desen, sadece renk şeması değişiyor — her biri tamamen farklı bir kişilik ve tat çağrışımı oluşturuyor. Bu, HSL'nin üç boyutunun gücünü gösterir. Kaynak: Programming Design Systems

🎯 60-30-10 Kuralı

İç mekan tasarımından gelen bu kural oyunlarda da çalışır:

• %60 — Ana Renk (Dominant): Arka plan, zemin, büyük yüzeyler. Genellikle nötr veya sakin bir ton.
• %30 — İkincil Renk (Secondary): UI elemanları, dekoratif objeler, orta önemdeki detaylar.
• %10 — Vurgu Renk (Accent): Butonlar, önemli objeler, dikkat çekici noktalar. En canlı ve çarpıcı renk.

Bu oranları takip ederseniz, tasarımınız doğal ve profesyonel görünecektir!

Color swatch, belirli bir rengin fiziksel veya dijital örneğidir. Baskı dünyasında Pantone swatch kitapları standart referanstır. Dijital ortamda ise swatch'lar renk paletlerinin yapı taşlarıdır.

• Pantone: Evrensel renk standardı. "Pantone 186 C" dendiğinde dünyada herkes aynı kırmızıyı anlar. 2.000+ standart renk.
• GIMP Swatch: Windows → Dockable Dialogs → Palettes ile hazır swatch paletleri kullanın veya kendi paletinizi oluşturun
• Inkscape Swatch: Object → Fill and Stroke → Swatches sekmesiyle erişin. SVG dosyasına gömülü paletler oluşturabilirsiniz
• CSS Custom Properties: :root { --primary: #e94560; } ile kendi swatch sisteminizi kodda tanımlayın

📖 Pantone Color Finder — Pantone renklerini arayın | Yılın Rengi 2025

🔴 Renk = Bilgi (Fonksiyonel Renk)

Oyunlarda renkler evrensel bir dil oluşturur. Oyuncular bu renk kodlarını sezgisel olarak anlar:

• 🔴 Kırmızı: Tehlike, hasar, düşman, düşük sağlık, durdurma sinyali
• 🟢 Yeşil: Güvenli, sağlık, para, toplanabilir eşya, "devam et"
• 🔵 Mavi: Mana, enerji, su, sakinlik, bilgi arayüzleri
• 🟡 Sarı/Altın: Değerli, önemli, quest işaretçisi, uyarı
• ⚪ Beyaz: Saf, nötr, kutsal, iyileştirme, aydınlık alan
• 🟣 Mor/Eflatun: Nadir, büyülü, gizemli, efsanevi eşya (Epic/Legendary loot)
• 🟠 Turuncu: Enerji, coşku, "uncommon" nadirlikteki eşyalar

🎭 Renk = Duygu (Atmosferik Renk)

Renk, diyalog veya metin olmadan bile güçlü duygular yaratır:

• Sıcak renkler (kırmızı, turuncu, sarı): Enerji, heyecan, tehlike, savaş, öfke
• Soğuk renkler (mavi, yeşil, mor): Huzur, gizemli, melankolik, ürkütücü, soğuk
• Düşük doygunluk (desaturated): Hüzün, nostalji, gerçekçilik, savaş sonrası, hastalık
• Yüksek doygunluk (saturated): Çizgi film, eğlence, enerji, oyuncaklık
• Koyu paletler: Korku, gerilim, ciddiyet, gece, yer altı
• Açık/pastel paletler: Mutluluk, masumiyet, rahatlık, çocuk oyunu, rüya

🧭 Renk = Yönlendirme (Navigation Color)

Oyuncunun nereye gitmesi gerektiğini anlatmak için renk, en doğal ve non-intrusive (oyunu bozmayan) yöntemdir:

• Etkileşilebilir objeler arka plandan farklı renkte olur (parlak sarı sandık, gri duvar içinde)
• Doğru yol daha aydınlık, yanlış yol daha karanlık — oyuncu farkında olmadan doğru yöne çekilir
• Mirror's Edge: Kırmızı = doğru yol, parkur yapılacak objeler kırmızı vurgulanır (mükemmel örnek!)
• Uncharted serisi: Tırmanılacak çıkıntılar sarı/turuncu ile vurgulanır
• Dead Space: Kaynak ve önemli objeler mavi ışıkla vurgulanır, tehlike kırmızıyla

İyi bir oyun tasarımında oyuncu "nereye gideceğimi nasıl anladım bilmiyorum ama doğru yere gittim" der — bu genellikle renk yönlendirmesi sayesindedir!

📖 Renk = Hikâye Anlatımı (Narrative Color)

Renk, hikâye anlatımının görsel bir aracı olarak da kullanılır:

• Karakter kişiliği: Kötü karakter = koyu renkler, iyi karakter = açık/canlı renkler
• Zaman geçişi: Flashback sahneleri desaturated (renksiz), şimdiki zaman renkli
• Hikâye dönüm noktaları: Önemli anlarda renk paleti değişir (Journey'de her bölüm farklı palet)
• Karakter gelişimi: Karakter güçlendikçe renkleri canlılaşır (Hades'te silah upgrade'leri)

🎨 Renk Skriptleme (Color Scripting)

Pixar ve büyük oyun stüdyoları, bir projenin tüm sahne akışının renk planını önceden çıkarır. Buna color script denir. Her sahnenin baskın rengini, atmosferini ve geçişlerini gösteren panoramik bir çalışmadır.

• Pixar'ın "Inside Out": Her duygunun rengi var — Joy=sarı, Sadness=mavi, Anger=kırmızı
• Journey (thatgamecompany): Başlangıçta sıcak altın tonlar → ortada soğuk mavi → finalde parlak altın geri dönüşü
• Celeste: Her bölümün renk paleti karakterin psikolojik durumunu yansıtır

📖 GDC: The Art of Journey — Color scripting örneği
📖 Gamasutra: Color in Games — Detaylı makale

⚡ Dinamik Renk Sistemleri

Modern oyunlar, renkleri statik değil dinamik olarak kullanır:

• Gündüz/gece döngüsü: Zelda: TOTK, The Witcher 3 — saate göre renk paleti otomatik değişir
• Sağlık durumuna göre: Düşük sağlıkta ekran desaturated olur (Call of Duty serisinin patenti!)
• Hava durumu: Yağmurda soğuk mavi filtre, güneşte sıcak sarı filtre (RDR2)
• Bölge bazlı: Hollow Knight'ta her bölgenin tamamen farklı renk paleti var
• Hikâye bazlı: Gris'te oyun ilerledikçe dünya renk kazanır — renk bizzat gameplay mekaniği

📖 Renk ve Oyun Türü İlişkisi

Dinamik aralık: Bir sahnenin en karanlık ve en aydınlık noktası arasındaki parlaklık farkıdır. Gerçek dünyada bu aralık çok geniştir (güneş vs gölge). Standart ekranlar (SDR) bu aralığı sınırlı gösterir.

• SDR (Standard Dynamic Range): 8-bit, 0-255 arası parlaklık. Sınırlı aralık → koyu sahnelerde detay kaybı, parlak sahnelerde yanma (clipping)
• HDR: 10-bit veya daha fazla, çok daha geniş parlaklık aralığı. Güneşin parlaklığıyla gölgenin koyuluğu aynı anda detaylı gösterilebilir
• HDR10: 10-bit renk derinliği, 1000 nit tepe parlaklık. PS5, Xbox Series X'in desteklediği standart
• Dolby Vision: 12-bit renk derinliği, dinamik metadata ile sahne başına ton eşleme

Oyunlarda HDR: Red Dead Redemption 2, God of War, Forza Horizon — HDR ile gün batımları, ateş efektleri, neon ışıklar çok daha etkileyici görünür.

Kontrast, bir görseldeki en açık ve en koyu değer arasındaki farktır. Yüksek kontrast = net ayrım, düşük kontrast = sisli/soluk görünüm.

• Yumuşak kontrast (low contrast): Nostaljik, rüyamsı, huzurlu atmosfer. Pastel oyunlar, flashback sahneleri
• Sert kontrast (high contrast): Dramatik, gerilimli, güçlü atmosfer. Film noir, korku oyunları, karanlık souls-like oyunlar
• Kontrast Oranı: Erişilebilirlik için metin/arka plan kontrast oranı en az 4.5:1 (WCAG AA), ideal olarak 7:1 (WCAG AAA) olmalı

📖 WebAIM Contrast Checker ile hemen test edin

Gerçek dünyanın geniş parlaklık aralığını ekranın sınırlı aralığına sığdırma işlemidir. Fotoğrafçılıkta ve oyun motorlarında kritik öneme sahiptir.

• Reinhard Tone Mapping: Basit ve yaygın. Parlak değerleri sıkıştırır, karanlıkları korur
• ACES (Academy Color Encoding System): Film endüstrisi standardı. Unreal Engine ve Unity'de varsayılan
• Filmic Tone Mapping: Film benzeri görünüm sağlar. Koyu bölgelerde hafif mavi, parlak bölgelerde sıcak tonlar ekler

Gamma: Ekranın giriş sinyali ile gösterdiği parlaklık arasındaki doğrusal olmayan ilişkidir. İnsan gözü karanlık tonlardaki farklara daha hassas olduğu için gamma düzeltmesi uygulanır.

• Gamma 2.2: Standart ekran gamma değeri (sRGB). Çoğu oyun ve uygulama bunu varsayar
• Linear color space: Shader hesaplamaları doğrusal uzayda yapılır, sonra gamma uygulanır (gamma correction)
• sRGB: İnternet ve dijital ortamın standart renk uzayı. Gamma 2.2 yaklaşımı ile kodlanmış
• Display-P3: Daha geniş renk gamut'u. iPhone/Mac ekranları bunu destekler. sRGB'den %25 daha fazla renk

Oyunlarda "parlaklık ayarı" ekranı genelde gamma ayarıdır. "Karanlıkta logoyu zar zor görecek şekilde ayarlayın" — bu gamma kalibrasyonudur!

Temel Renk Araçları

📖 GIMP Colors Menüsü Resmi Dokümantasyonu
📖 GIMP Tutorial: Eğriler (Curves) ile Renk Düzeltme
🎬 GIMP Color Correction Tutorial — Davies Media Design

GIMP'te Renk Değiştirme (Color Swap)

Bir görseldeki belirli bir rengi başka renkle değiştirmek için:

1. Select → By Color (Seç → Renge Göre) ile değiştirmek istediğiniz rengi seçin
2. Colors → Hue-Saturation ile seçili alandaki rengi kaydırın
3. Veya Colors → Map → Color Rotate ile renk haritası üzerinden dönüştürün

📖 GIMP: Renge Göre Seçim Aracı

Temel Renk Araçları

• Object → Fill and Stroke (Shift+Ctrl+F): Ana renk kontrol paneli. RGB, HSL, CMYK, renk çemberi destekler
• Swatches paneli: Hazır renk paletleri. Auto palette (belgeden otomatik algıla) özelliği var
• Renk Pipeti (Eyedropper): F7 tuşuyla aktifleştirin, ekrandaki herhangi bir renkten örnek alın
• Gradient aracı: G tuşu ile iki renk arası geçiş (linear, radial) oluşturun
• Extensions → Color: Eklenti menüsündeki renk araçları (renk değiştirme, randomize, grayscale)
• Filtreler → Color: Renk filtrelerini doğrudan SVG'ye uygulayın (colorize, duotone, sepia vb.)

📖 Inkscape Fill and Stroke Referansı
📖 Inkscape Temel Tutorial
🎬 Inkscape Color Management Tutorial

🔲 Gri Tonlamaya Çevirme (Grayscale)

Matematiksel karşılığı: Y = 0.299R + 0.587G + 0.114B (luminosity yöntemi — insan gözünün yeşile daha hassas olmasını hesaba katar)

magick input.png -colorspace Gray output_gray.png

Alternatif yöntemler: -grayscale Rec709Luminance (daha doğru), -monochrome (siyah-beyaz, gri yok)

🔄 Negatif Alma (Invert)

Matematiksel karşılığı: Her piksel değeri: newValue = 255 - oldValue. Siyah→beyaz, beyaz→siyah, kırmızı→cyan

magick input.png -negate output_negative.png

☀️ Parlaklık Artırma / Azaltma (Brightness)

Matematiksel karşılığı: newValue = oldValue + offset (parlaklık). Clamp: min(255, max(0, newValue))

# Parlaklık +30, kontrast +20
magick input.png -brightness-contrast 30x20 output_bright.png

# Sadece gamma ile parlaklık ayarı (daha doğal)
magick input.png -gamma 1.5 output_gamma.png

🎨 Renk Kanallarını Ayırma / Değiştirme

Matematiksel karşılığı: Kanal ayırma: pixelR = (r, r, r), pixelG = (g, g, g). Kanal değiştirme: (R,G,B) → (B,G,R) gibi permütasyonlar

# Sadece kırmızı kanalı çıkar
magick input.png -channel R -separate red_channel.png

# RGB kanallarını ayrı ayrı dosyalara çıkar
magick input.png -separate channels_%d.png

# Kırmızı ve mavi kanalları yer değiştir (soğuk efekt)
magick input.png -channel RGB -separate -swap 0,2 -combine swapped.png

🎭 Diğer Renk Filtreleri

# Sepia efekti (nostaljik kahverengi ton)
magick input.png -sepia-tone 80% output_sepia.png

# Doygunluk artırma/azaltma
magick input.png -modulate 100,150,100 output_saturated.png
# modulate: parlaklık, doygunluk, hue (yüzde olarak, 100=değişim yok)

# Posterize (renk sayısını azaltma — pixel art efekti)
magick input.png -posterize 4 output_poster.png

# Belirli bir rengi değiştir (kırmızıyı maviye)
magick input.png -fill blue -opaque red output_recolor.png

# Histogram eşitleme (otomatik kontrast iyileştirme)
magick input.png -equalize output_equalized.png

# Toplu işlem: klasördeki tüm PNG'leri gri yap
magick mogrify -colorspace Gray *.png

Aşağıdaki fotoğraflar, aynı sahnenin farklı renk körlüğü derecelerinde nasıl göründüğünü karşılaştırır:

Dikkat edin: Şiddetli renk körlüğünde kırmızı meyveler yeşil yapraklardan neredeyse ayırt edilemiyor. Oyun tasarımında sadece renge değil, parlaklık kontrastına ve şekil/ikon gibi ek ipuçlarına güvenmek şart! Kaynak: Programming Design Systems

1. Asla sadece renge güvenmeyin: Önemli bilgiyi renk + şekil + ikon + metin ile iletin. Kırmızı daire yerine kırmızı X işareti veya "Tehlike" yazısı.
2. Renk körlüğü modu ekleyin: Birçok modern oyun (Fortnite, Overwatch, Apex Legends) bunu ayarlarda sunar. Genellikle renkleri farklı tonlara kaydırır.
3. Yüksek kontrast kullanın: Önemli elemanlar arka plandan en az 4.5:1 kontrast oranıyla ayrılmalı (WCAG standardı).
4. Farklı doku/pattern kullanın: Takım renklerini veya kategorileri ayırt etmek için renk yanında farklı desenler ekleyin.
5. Simülatörlerle test edin: Coblis veya Color Oracle ile ekranınızı renk körü gözüyle görün.
6. Boyut ve kalınlık farkı kullanın: Önemli çizgiler daha kalın, daha büyük olsun — renk farkı görülmese bile boyut farkı görülür.

1. Coolors.co'ya gidin
2. Space tuşuna basarak rastgele paletler keşfedin (beğendiğiniz renkleri kilitleyebilirsiniz)
3. Aşağıdaki temalardan biri için 5 renklik bir palet oluşturun:
   • 🌊 Okyanus macera oyunu
   • 🔥 Cehennem temalı aksiyon oyunu
   • 🌸 Kawaii/sevimli mobil oyun
   • 🧟 Zombi hayatta kalma oyunu
   • 🚀 Uzay keşif oyunu
4. Paleti kaydedin (Export → veya ekran görüntüsü) ve HEX kodlarını not edin
5. 60-30-10 kuralına göre: hangi renk %60, hangisi %30, hangisi %10 olacak?
6. Neden bu renkleri seçtiğinizi 2-3 cümleyle açıklayın

1. GIMP veya Photopea açın
2. Basit bir oyun sahnesi çizin: gökyüzü, zemin, bir ağaç, bir ev (çok detaylı olmak zorunda değil, 320×240 px yeterli)
3. Bu sahneyi 3 farklı renk paletiyle renklendirin:
   • ☀️ Gündüz versiyonu (sıcak, aydınlık — sarı/turuncu tonlar)
   • 🌙 Gece versiyonu (soğuk, koyu — mavi/mor tonlar)
   • ☢️ Kıyamet/post-apokaliptik versiyonu (gri, soluk, desaturated)
4. Her versiyonu ayrı katman (layer) olarak yapabilir veya 3 farklı dosya oluşturabilirsiniz
5. 3 versiyonu yan yana koyun — rengin atmosferi nasıl değiştirdiğini gözlemleyin
6. Bonus: HSL'de sadece H (Hue) değiştirerek otomatik ton değişimi deneyin (GIMP: Colors → Hue-Saturation)

1. Lab 1'de oluşturduğunuz paleti Coblis Simulator'da test edin (paletteki renklerle basit bir görsel yapıp yükleyin)
2. Her üç renk körlüğü tipinde (Protanopi, Deuteranopi, Tritanopi) simülasyon çalıştırın
3. Renk körü bir oyuncu paletinizdeki renkleri ayırt edebilir mi? Hangi renkler karışıyor?
4. Eğer ayırt edemiyorsa, paleti nasıl iyileştirirsiniz? (İpucu: Sadece rengi değil, parlaklık farkını da düşünün)
5. WebAIM Contrast Checker ile metin ve arka plan renginizin kontrast oranını ölçün (minimum 4.5:1 olmalı)

1. İnternetten renkli bir oyun ekran görüntüsü indirin (Celeste, Hollow Knight vb.)
2. GIMP'te açın ve Colors → Components → Decompose → RGB seçin
3. Her renk kanalını (R, G, B) ayrı ayrı inceleyin — gri tonlu görüntüler
4. Hangi bölgelerde hangi kanal parlak? Neden?
5. Bir kanalı kapatın (siyah yapın) ve rengin nasıl değiştiğini gözlemleyin