Grafik tasarım

Renk teorisi

Renk teorisi, iki rengin birbiriyle nasıl ilişkilendiğini ve neden birinin ötekinin üzerinde okunup ikincisinin okunamadığını anlatan küçük bir kurallar bütünüdür. Her rengin üç sayısı vardır: ton, doygunluk ve açıklık; bu üçünden yalnızca açıklık, arka plan üstündeki metnin okunup okunamayacağını belirler.

Ders 3 / 12
Başlangıç
Ücretsiz, kayıt yok

Çemberde tam bir tur: ana renkten tamamlayıcısına ve geri

Her durak bir ilişkidir. Ana renkten uzaklaştıkça gerilim artar.

1 Ana renk
2 Komşu
3 Üçlü
4 Tamamlayıcı
5 Üçlü, diğer taraf
6 Komşu, diğer taraf

Düğüm renkleri her durağın çember üzerindeki yerini gösterir, tonun kendisini değil; bu sitenin kendi paletinden gelirler. Ve şekil yalnızca tondan söz eder: açıklık ile her rengin ekrandaki payı bunun dışındadır.

Son kontrol: 6 Eylül 2026 Bu dersteki bilgiler ve araç adları bu tarihte kaynaklarıyla yeniden doğrulanır.

Renk bir ad değil, üç sayıdır

"Mavi" dediğinizde bin türlü mavi mümkündür. Renk üzerine düşünüp karar verebilmek için addan çıkıp sayıya ulaşmak gerekir. Tasarımcıların çoğunun içinde düşündüğü sistemin üç sayısı vardır ve adı HSL'dir.

Renk teorisi pratikte bu üç eksenle çalışmak demektir. Ton, rengin çember üzerindeki yeridir ve sıfırdan üç yüz altmışa derece ile ifade edilir. Doygunluk, o tonun ne kadar saf olduğunu söyler; sıfır doygunluk gri demektir. Açıklık ise beyaza mı siyaha mı yakın durduğunu söyler.

Faydası, bir ekseni ötekilere dokunmadan oynatabilmenizdir. Marka renginin daha açık bir sürümünü isterseniz ton ile doygunluğa dokunmaz, yalnızca açıklığı yükseltirsiniz. Hex kodu bunu yapmanıza izin vermez; çünkü hex yalnızca kırmızı, yeşil ve mavi miktarını söyler ve "biraz daha açık" için hiçbir tutamak sunmaz. CSS hsl() yazımını doğrudan anlar, dolayısıyla elle bir dönüştürme gerekmez.

Bir nokta daha en baştan söylenmeli, çünkü ileride işe yarıyor ve pek yazılmıyor: HSL'deki açıklık, gözünüzün gördüğü açıklık değildir. hsl(60 100% 50%) sarısı ile hsl(240 100% 50%) mavisinin ikisi de yüzde elli açıklık taşır; ama o sarı siyah üstünde 19,56:1 kontrast oranı verirken o mavi yalnızca 2,44:1 verir. Aynı tek sayı, gözün asla eşit görmediği iki renk. oklch() gibi daha yeni renk uzayları, dördüncü CSS renk şartnamesiyle gelen bu yazım, tam da bu kusuru gidermek için var.

Tek bir rengi kuran üç sayı

Her biri diğer ikisine dokunmadan oynatılabilir; HSL'yi hex'ten yararlı kılan budur.

Ton, çemberdeki yerDoygunluk, ne kadar saf

Tek renküç bağımsız eksenAçıklık, beyaza ne kadar yakın

HSL açıklığı gözün gördüğü açıklık değildir, örneği bu bölümün metnindedir. Algısal açıklık gerektiren iş daha yeni bir renk uzayına aittir.

Renk çemberi ne söyler, ne söylemez?

Renk çemberi tonları bir daire boyunca dizer ve işi ilişkileri görünür kılmaktır. Bu ilişkilerden üçü işin çoğunu yapar: tamamlayıcı, birbirinin karşısındaki iki renk; komşu, yan yana duran iki üç ton; ve üçlü, daire üzerinde eşit aralıklı üç nokta.

Her birinin farklı bir hissi vardır ve bu his gizemli değildir. Komşular sakindir, çünkü göz aralarında sıçrama yapmaz. Tamamlayıcılar gergindir, çünkü dairenin izin verdiği en uzak noktalarda dururlar; birincil düğme için iyi, gövde metni için kötü olmalarının nedeni budur. Üçlüler ikisinin arasında bir yere düşer ve grafikler gibi veri yoğun ekranlarda ikisinden de iyi çalışır, çünkü üç kategoriyi birbirinden ayrı tutar.

Şimdi çemberin söylemedikleri; paletlerin çoğu tam burada kırılır. Çember yalnızca tondan söz eder. Her rengin ekranın ne kadarını kaplayacağını söylemez, her birinin ne kadar açık olacağını söylemez ve hepsinden önemlisi bu üç ilişkiden hangisinin sizin projenize ait olduğunu söylemez. Çember üzerinde kusursuz duran tamamlayıcı bir palet, gerçek bir sayfada felaket olabilir; çünkü önemli olan her karar dairenin dışında verilir.

Bir rengin kültürel anlamı da çemberin dışındadır. Bir rengin İran pazarında ne ilettiği ya da belirli bir sektörde nasıl bir beklenti kurduğu geometriyle ilgili değildir ve kendi başına ele alınmayı hak eder; markalamada renk psikolojisi o tartışmayı ayrıca açıyor.

Bir palet kaç renkten kurulmalı?

Kısa yanıt: sandığınızdan az. Gerçek işle temasa dayanan paletlerde genellikle bir ana ton, bir destek tonu, ölçülü kullanılan bir vurgu ve iki üç gri bulunur. Liste bu kadar. Bir palette gördüğünüz geri kalanın çoğu yeni tonlar değil, aynı birkaç tonun açıklık basamaklarıdır.

Bu son cümle ton sayısından önemlidir. Bir arayüzü bir arada tutan şey renk sayısı değil, açıklık basamağı sayısıdır: sayfa arka planı, kart yüzeyi, kartın üstündeki kart, kenarlık, gövde metni, ikincil metin, soluk metin. Bu basamaklar olmadan, kaç renk eklerseniz ekleyin ekran düz kalır.

Tanıdık 60-30-10 el kuralı da aynı şeyi alan diliyle söyler: ekranın kabaca yüzde altmışı baskın renk, otuzu destek, onu vurgu. Başlangıç noktası olarak fena değil, ama iki yerde hızla kırılır. Birincisi, önemden değil alandan söz eder; vurgu rengi en küçük payı alır ve en önemli işi yapar. İkincisi, veri yoğun bir panoda ya da bir tabloda bu oranlar hiçbir şey ifade etmez ve yerlerini daha katı bir kural alır: renk yalnızca anlam taşıdığı yerde.

Yıllarca Farsça arayüz kurduktan sonraki tutumumuz şu: marka paletlerinin çoğunda çok fazla ton ve çok az gri var. Paletinizde bir şeyi artıracaksanız, grileri artırın.

İşleyen bir paletin doldurduğu beş rol

Baskın renk

Ekranın en büyük payı. Markanın bir rengi varsa genelde budur.
Destek rengi

Bağırmadan geri kalandan ayrılması gereken bölümler için.
Vurgu rengi

En küçük alan, en önemli iş. Her yere koyarsanız vurgu olmaktan çıkar.
Açık nötrler

Yüzeyler, kenarlıklar ve boşluklar. Ana renkten çok daha fazla görülür.

Palet

Bunlar roldür, renk sayısı değil. Tek bir ton, farklı açıklık basamaklarıyla birkaç rolü doldurabilir ve genelde doğrusu da budur.

Kontrast neden rengin değil açıklığın işidir

Renk teorisinin arkasında katı bir sayı bulunan tek bölümü budur ve en çok hatanın yapıldığı yer de burasıdır. Saf kırmızıyı saf yeşilin üstüne koyun: bambaşka iki renk, çoğu kişinin çemberde olabileceğini düşündüğü kadar karşıt, ve kontrast oranları yalnızca 2,91:1. Yeşil zemin üzerindeki kırmızı metin, iki renk ne kadar zıt görünürse görünsün, fiilen okunamaz.

Nedeni basit. İnsan gözü ton farkını değil, açıklık farkını okur. Ton farkı ruh hâli yaratır; açıklık farkı okunurluk yaratır. İkisini karıştırırsanız, örnek şeridinde muhteşem, gerçek ekranda okunamayan bir palet kurarsınız.

Yirmi saniye süren ve bu dersteki en işe yarar şey olan bir sınama: tasarımı gri tonlamaya çevirin. Gride hâlâ neyin önemli olduğu anlaşılıyor ve metin arka planından ayrılıyorsa paletiniz sağlamdır. Her şey tek bir düz griye çöküyorsa, renginiz vardı ama kontrastınız yoktu.

Zorunlu sayıları WCAG verir: sıradan metin için en az 4,5:1, büyük metin ve arayüz bileşenleri için 3:1. Bunları web erişilebilirliği dersinde bu sitenin paletinden gerçek sayılarla ve ölçme yoluyla açtık, burada tekrarlamıyoruz. Bu dersin eklediği tek şey şu: kontrast bir rengin değil, bir çiftin özelliğidir. Metin olarak mükemmel bir renk, kendisi arka plan olduğunda kalabilir; o noktada bir tonun bir değil iki sürümüne ihtiyacınız olur.

Hangi eksen kontrast, hangisi yalnızca atmosfer yaratır

İkisi de gerekli. Hata, birincinin işini ikinciden beklemektir.

Açıklık: okunurluğu yaratan

Sayfanın her yerinde arka plan üstündeki metin
Giriş alanının kenarlığı ve anlam taşıyan her simge
Yüzey basamakları: arka plan, kart, kartın üstündeki kart
Gri tonlama sınamasından geçmesi gereken her şey

Ton ve doygunluk: atmosferi yaratan

Marka karakteri ve rakipten farkı
Sayfanın bütününün sıcak mı soğuk mu okunduğu
Bir grafikte kategorileri ayırmak, ikinci bir ipucuyla birlikte
Metin de aynısını söylediğinde başarı ya da tehlike hissi

Bu ayrım metin okumaya dairdir. Bir grafikte kategorileri ayırmak için ton gerçekten işe yarar, yeter ki tek ipucu olmasın.

Tek hex kodu, iki ekran, iki renk

Renk teorisi eğitimlerinin neredeyse hiç değinmediği bir şey: renk kodu bir talimattır, garanti değil. Aynı hex, tasarımcının monitöründe, müşterinin ucuz telefonunda ve toplantı odasındaki projeksiyonda birbirinden biraz farklı üç renge dönüşür ve bu kimsenin kusuru değildir.

Nedeni renk uzayıdır. Yıllarca herkes sRGB varsaydı ve renk kodu onun içinde bir anlam taşıdı. Bugün pek çok ekran daha geniş bir gamut kapsıyor ve dördüncü CSS renk şartnamesi, sRGB'ye hiç sığmayan renkleri yazmanıza izin veriyor. Bunun sonucu şu: "marka rengi" artık sabit bir nokta değil, bir aralıktır.

Baskı ise üçüncü bir dünyadır. Ekran ışıkla, kâğıt mürekkeple çalışır; bu yüzden ekranda gözü çeken yüksek doygunluklu parlak renkler, baskıda müşterinin beklemediği bir donukluğa dönüşür. Hem ekranı hem kartviziti olan bir marka kimliği kuruyorsanız, palete yalnızca monitörde değil ikisinde de bakın.

Yaptığımız şey göründüğünden basit: ana renge, karanlık odadaki kalibre monitörde değil, gün ışığında ucuz bir telefonda bakıyoruz. Yalnızca mükemmel koşullarda iyi olan renkler pratikte iyi değildir.

Yapay zekayla hızlı yol

Modellerin palet işinde gerçekten iyi olduğu şey kombinasyon üretmek değildir, çünkü bunu her palet üreticisi yapar. Değerli olan şu: elinizde zaten olan bir rengi alsın, açıklık basamaklarını kursun, arka plan üstünde metin taşıyacak her çifti hesaplasın ve hangi çiftlerin kaldığını açıkça söylesin. Modeli sanatçı rolüne değil, hesaplayıcı rolüne koyun.

Elinizde zaten olan rengi alın, logodan tek bir hex bile olsa. Marka renginden başlamak, paleti ilk günden müşterinin sahip olduğu şeye bağlar.
Aşağıdaki reçeteyi o hex ile çalıştırın. Burada Gemini Flash sınıfından hızlı ve ucuz bir model yeter, çünkü iş büyük ölçüde aritmetiktir; modeller arasındaki güncel tercihimiz <a class="text-link" href="/ai/">yapay zekâ bölümünde</a> güncel tutulur.
Çift tablosunu yukarıdan okuyun ve eşiğin altındaki her satırı orada açıklığı yükseltip alçaltarak düzeltin. Tona dokunmayın; tonu değiştirirseniz artık marka rengi değildir.
Çıktıyı gerçek bir sayfaya koyun ve gri tonlamaya çevirin. Doğru sayılar gerekli ama yeterli değildir; asıl kararı gri tonlama sınaması verir.

Kopyalamaya hazır şablon

Ana rengim şu: {marka hex}
Site arka planı: {açık ya da koyu}

1. Bu renkten, tonu ve doygunluğu kabaca sabit tutarak çok açıktan çok koyuya dokuz açıklık basamağı kur. Her basamağı hem hex kodu hem hsl() karşılığı olarak yaz.
2. Ayrıca bu tonla uyumlu üç gri öner: biri yüzey arka planı, biri kenarlıklar, biri ikincil metin için.
3. Pratikte arka plan üstünde metin olacak her çiftin tablosunu kur. Her çift için WCAG bağıl parlaklık formülüyle kontrast oranını hesapla ve sayıyı iki ondalık basamakla yaz.
4. Her satırın yanına, sıradan metin için 4,5:1 ve büyük metin ile arayüz bileşenleri için 3:1 ölçütüne göre geçti ya da kaldı yaz. Kalan satırları başa koy.
5. Kalan her satır için tam olarak bir düzeltme öner ve bu düzeltme ton değişikliği değil açıklık değişikliği olsun.

Palete kendinden hiçbir renk ekleme. Yanıt için yazmadığım bir şeye ihtiyacın olursa sor; tahmin etme.

Çıktıya güvenmeden önce: Bu reçetenin çözmediği iki şey var. Birincisi, modelin verdiği sayılar bir kez sizin tarafınızdan denetlenmeli; kontrast aritmetiği basittir ama modeller elle hesapta hata yapar ve tarayıcı geliştirici araçlarındaki renk seçici aynı sayıyı ücretsiz ve doğru gösterir. İkincisi, bu sayıların hiçbiri paletinizin güzel ya da markaya uygun olduğunu söylemez; okunabildiğini söyler. O yargı sizindir ve tek yolu, paleti örnek şeridinde değil gerçek bir sayfada görmektir.

Bu işte yapay zeka

Renk ve yapay zekâ konusundaki tutumumuz: hesaplamak için mükemmel, seçmek için değil. Modeller kontrast oranlarını sizden hızlı hesaplar, açıklık basamakları kurar ve bir fotoğraftan mevcut renkleri çıkarır. Ama "bu markaya hangi renk yakışır" sorusu geometriye değil bir pazara ve müşterilerine dairdir; orada modelin yanıtı gördüklerinin ortalamasıdır ve herkesin çıktısını birbirine benzeten tam da budur.

Gerçekten işe yarayan araçlar

Gemini Yukarıdaki reçete için en uygunu, çünkü hem görsel okur hem hesap yapar: mevcut sayfanın ekran görüntüsünü verin ve çift tablosunu isteyin. Google'ın kendi sayfası, Gemini web uygulamasının iki yüz otuzdan fazla ülke ve bölgede kullanılabildiğini söylüyor ve İran o listede yok; bunu ağ testiyle değil kendi sayfalarından okuduk.
Claude Paleti koda çevirmek istediğinizde daha iyi: anlamlı adlarla CSS değişkenleri, belirteç biçiminde açıklık basamakları ve yan yana açık ile koyu mod. İran, Anthropic'in iki destekli ülke listesinin hiçbirinde yok; bunu Anthropic'in kendi sayfasında okuduk.
Adobe Color Yapay zekâ değil ve asıl değeri de bu: çember, tamamlayıcı, komşu ve üçlü ilişkiler ve kontrast ile renk körlüğü denetimi için ayrı bir bölüm. İlişkilerin kendisini öğrenmek için herhangi bir modelden daha nettir, çünkü sonucu hareket ettikçe görürsünüz. İran'dan erişilip ödenebildiği kendinizin sınayacağı bir şeydir; bu konuda bir iddia yazmıyoruz.

Nerede geri teper

Buradaki asıl risk ne güvenlik ne telif; daha basit bir şey: modelin kurduğu palet, sayfada değil örnek şeridinde yargılanır. Palet üreticileri, yapay zekâlı olsun olmasın, kontrastı değil ton ilişkilerini eniyiler; güzel bir paletin sürekli WCAG'nin 4,5:1 eşiğinde kalan metne varmasının nedeni budur. Bir modelden aldığınız her palet, kullanmadan önce çift çift hesaplanmalıdır.
İkinci risk daha genel ve renkle ilgisi yok: bir sohbete koyduğunuz her görsel ya da marka dosyası makinenizden çıkmıştır ve başına gelen, o hizmetin planına ve ayarlarına bağlıdır ve kendi veri kullanım sayfasında yazılıdır. Kişisel bir proje için sorun değil; henüz açıklanmamış bir müşteri kimliği için önce izin alın. Bu araçların İran'dan nasıl ödenebileceği için satın alma rehberine bakın.

Kaynaklar: W3C: Understanding Contrast (Minimum), WCAG 2.2 Google: where the Gemini web app is available Anthropic: supported countries Adobe Color: accessibility tools

Bu tavsiyenin sınırı

Bu ders ekrandaki renk üzerinedir ve içindeki hemen her şey ışığın ekranın kendisinden geldiğini varsayar. Baskıda denklem değişir: renk uzayı CMYK'dir, yüksek doygunluklu renkler basılabilir değildir ve kâğıt ile mürekkep sonucu kendi başlarına etkiler. İkinci sınır renk körlüğüdür; yeterli kontrast gereklidir ama kırmızı ile yeşili ayıramayan biri için hiçbir renk birleşimi tek başına yetmez ve ikinci bir ipucu gerekir. Açıkça söylenmesi gereken üçüncü bir sınır daha: bu derste hiçbir şey markanıza hangi rengin uygun olduğunu söylemez. Renk teorisi iki rengin nasıl ilişkilendiğini söyler, hangisini seçmeniz gerektiğini değil.

Kendi işimizden

Bu sitedeki her şekildeki her renk tek bir yerden gelir ve o yer dört duraklı bir geçiştir: #ff4d6a, sonra yüzde otuz beşte #b06bff, sonra yüzde altmış sekizde #4d9fff ve sonda #2ee6a8. Temanın diyagram motorundaki rgb_dg_hue() işlevi, n düğümden i numaralının rengini aynı geçişten i bölü n eksi bir noktasında örnekleyerek alır. Böylece şekildeki renk süs değil, sıranın gösterimidir ve bütün bölüm düzinelerce elle seçim yerine tek bir renk tanımıyla döner.
Ve o grafikleri kurarken bedelini ödediğimiz ders, aynı kodda görünür: şekil bir hüküm olduğunda bu yöntem yalan söyler. Satırlar iyiden kötüye sıralıysa, konumsal ton o ölçeğin dışında duran bir kategoriyi de sanki tayfa aitmiş gibi renklendirir. Bu yüzden grafiklere, rengi kategoriye sabitleyen ve listedeki konumdan gelmesini engelleyen bir hue anahtarı eklendi. Renk, satır numarasına değil anlama bağlandığında bir şey ifade eder.

Gerçek devam soruları

Başlangıç için hex mi HSL mi öğrenmeliyim?

Hex'i okur, HSL'yi yazarsınız. Bir logodan ya da tasarımcıdan gelen renk kodu neredeyse her zaman hex'tir, dolayısıyla onu tanımanız gerekir; ama paleti kendiniz kurarken HSL işi kolaylaştırır, çünkü tek bir ekseni ayrı oynatabilirsiniz. Aralarındaki dönüşüm tek satır CSS'tir ve araç gerektirmez.

Müşterinin marka renginin kontrastı yetmiyor. Ne yapmalı?

Marka rengini değiştirmeyin, rolünü değiştirin. Aynı tonu iki farklı açıklıkta tutun: rengin yalnızca görüldüğü yerler için özgün hâli, üstüne metin oturduğu yer için daha koyu ya da daha açık bir sürüm. Bu sitenin paletinde tam olarak bunu yaptık ve erişilebilirlik dersinde sayılarla gösterdik.

Koyu mod, aynı paletin tersi midir?

Hayır ve düz bir tersine çevirme genelde kötü sonuç verir. Yüksek doygunluklu renkler koyu zeminde daha parlak ve daha sert okunur, dolayısıyla doygunlukları biraz inmelidir; saf siyah üstünde saf beyaz da uzun okumada yorucudur, bu yüzden koyu tasarımların çoğu hafif grileşmiş bir beyaz ve hafif maviye çalan bir siyah kullanır. Pratikte koyu mod, ilkinin tersi değil ikinci bir palettir.