Kısaca özet
- Renk kodları, bir rengi tarayıcının, tasarım programının ve baskı makinesinin aynı biçimde anlayacağı sayısal gösterimlerdir.
- Ekranda RGB tabanlı gösterimler kullanılır: HEX, RGB, RGBA, HSL ve HSLA. Baskıda ise mürekkep karışımını anlatan CMYK kullanılır.
- HEX ve RGB aynı rengi farklı yazar; HSL rengi ton, doygunluk ve açıklık olarak ayırdığı için açık ve koyu varyant üretmeyi kolaylaştırır.
- Sağlıklı bir marka paleti beş gruptan oluşur: ana renk, ikincil renk, nötrler, durum renkleri ve metin renkleri. Sekiz on koddan fazlası yönetilemez hâle gelir.
- Normal metinde kontrast oranı en az 4,5:1, büyük metinde 3:1 olmalıdır; bu değerler WCAG’in AA seviyesidir.
- Paleti CSS değişkenleriyle tek yerden yönetirseniz renk değişikliği tek dosyada biter, koyu tema eşlemesi de aynı yerden kurulur.
Tasarımcıdan gelen dosyada bir mavi, kurumsal kimlik belgesinde başka bir mavi, sitede üçüncü bir mavi. Çoğu markada aynı rengin birkaç karşılığı dolaşır ve kimse hangisinin doğru olduğunu söyleyemez. Sebep basittir: renk kodları ekran ve baskı için farklı sistemlerle yazılır, aradaki dönüşüm de kimsenin görevi değildir. Bu rehberde hangi gösterimin nerede kullanıldığını, marka paletinin nasıl kurulduğunu ve kontrast oranının neden pazarlık konusu olmadığını anlatıyoruz.
Renk kodları nedir ve neden birden fazla gösterim var?
Renk kodları, bir rengi tarif etmek yerine ölçen sayısal gösterimlerdir. “Koyu mavi” herkesin kafasında başka bir tona karşılık gelir; #1B3A6B ise her cihazda aynı talimattır. Kodun görevi, insanın belirsiz tarifini makinenin kesin talimatına çevirmektir.
Birden fazla gösterimin olması bir eksiklik değil, farklı üretim ortamlarının sonucudur. Ekran ışık yayar ve kırmızı, yeşil, mavi kanallarını toplayarak renk üretir. Baskı ise ışığı yansıtır; kâğıdın üstüne mürekkep koyar ve gelen ışığın bir kısmını soğurur. İki süreç fiziksel olarak zıt çalıştığı için tek bir gösterim ikisine birden yetmez.
Bilgi
Ekran gösterimleri toplamalı (additive) çalışır: üç kanalı da sonuna kadar açarsanız beyaz elde edersiniz. Baskı gösterimi çıkarmalı (subtractive) çalışır: tüm mürekkepleri üst üste koyarsanız koyu bir gri kalır, bu yüzden ayrı bir siyah kanal eklenmiştir.
HEX, RGB, HSL ve CMYK arasındaki fark
| Gösterim | Kullanım alanı | Avantajı |
|---|---|---|
HEX (#2E86DE) |
Web, tasarım dosyaları, marka kılavuzu | Kısa ve kopyalaması kolay; her araç tanır |
RGB / RGBA (rgb(46 134 222)) |
Ekran arayüzleri, CSS, uygulama kodu | Kanalları tek tek ayarlanır; RGBA saydamlık ekler |
HSL / HSLA (hsl(209 73% 53%)) |
Tema üretimi, açık ve koyu varyantlar | Tonu sabit tutup açıklığı değiştirmek tek sayıyla olur |
CMYK (75 40 0 13) |
Matbaa, katalog, ambalaj, kartvizit | Mürekkep yüzdesini doğrudan anlatır, baskıda öngörülebilir |
Adlandırılmış renk (tomato) |
Hızlı deneme, prototip | Hatırlaması kolay; üretimde marka rengi yerine geçmez |
HEX ve RGB aynı bilgiyi taşır, yalnızca yazımları farklıdır: biri onaltılık, diğeri ondalık. HEX biçiminin hangi hanesinin hangi kanala karşılık geldiğini, üç haneli kısa yazımı ve sekiz haneli saydam biçimi HEX kodu yazımızda ayrıntılı ele aldık. Burada asıl mesele hangi gösterimin hangi işte kullanıldığı.
HSL’nin ayrı bir değeri var. Ton (hue) 0 ile 360 arasında bir açı, doygunluk ve açıklık ise yüzdedir. Bir markanın ana rengini HSL ile yazarsanız, aynı tonu koruyup açıklığı yüzde 15 aşağı çekerek üzerine gelme (hover) rengini, yüzde 40 yukarı çekerek arka plan tonunu üretebilirsiniz. HEX ile aynı işi yapmak için üç haneyi birden elle oynatmanız gerekir.
Renk uzayı ne demek?
Renk uzayı, bir gösterimin hangi renk aralığını kapsadığını tanımlayan çerçevedir. Aynı RGB üçlüsü, farklı renk uzaylarında gözle görülür biçimde farklı bir renge karşılık gelebilir. Web’in varsayılan uzayı sRGB’dir; bu yüzden sitede kullandığınız kod her tarayıcıda benzer görünür.
Fotoğrafçılık ve baskı tarafında daha geniş uzaylar kullanılır. Geniş uzayda hazırlanmış bir görseli dönüştürmeden siteye koyarsanız renkler soluk çıkar. CSS’in desteklediği renk biçimlerinin ve uzayların güncel listesini MDN renk uzayı sözlüğünde bulabilirsiniz.
Dikkat
Ekranda gördüğünüz parlak turuncuyu CMYK’ya çevirdiğinizde matbaadan daha mat bir ton çıkar. Bu bir hata değil, mürekkebin fiziksel sınırıdır. Marka rengini seçerken kararı ekran üzerinden verip baskıyı sonra düşünmek, kataloğun ikinci baskısında sürpriz yaratır.
Marka renk paleti nasıl kurulur?
Palet, sevdiğiniz renklerin listesi değil, bir karar tablosudur. Her rengin bir görevi olmalı. Beş grup çoğu proje için yeterlidir.
- Ana renk: logo, birincil buton, önemli bağlantılar. Tek bir kod.
- İkincil renk: vurgular, ikincil butonlar, grafik öğeler. Ana renkle çakışmayan, bir veya iki kod.
- Nötrler: arka plan, kenarlık, ayraç. Üç dört tonluk bir gri merdiveni.
- Durum renkleri: başarı (yeşil), uyarı (sarı), hata (kırmızı), bilgi (mavi). Anlamları kültürel olarak yerleşiktir, değiştirmeyin.
- Metin renkleri: ana metin, ikincil metin, pasif metin. Saf siyah yerine koyu gri daha yumuşak okunur.
Bu listeye baktığınızda toplam sekiz on kod çıkar. Yeterlidir. Palet büyüdükçe tutarlılık düşer; otuz renk kodu barındıran bir sistemde hiç kimse hangi kırmızının doğru kırmızı olduğunu bilemez.
Örnek senaryo
Bir mobilya üreticisi, üç yıl içinde dört farklı ajansla çalışmıştı. Sitede yedi ayrı yeşil, katalogda üç farklı CMYK karşılığı vardı. Paleti sıfırdan kurdular: bir ana yeşil, bir açık yeşil, dört nötr gri, dört durum rengi. Her koda bir görev adı verildi ve kimlik belgesine HEX ile CMYK karşılığı yan yana yazıldı. Sonraki baskıda matbaa dönüşüm sormadı, sitede de renk tartışması bitti.
Kontrast oranı ve erişilebilirlik
Renk seçimi estetik bir tercih gibi görünür ama okunabilirliği doğrudan belirler. Kontrast oranı, metin rengi ile arka plan rengi arasındaki aydınlık farkını 1:1 ile 21:1 arasında bir sayıya çevirir. Beyaz üstünde siyah 21:1, beyaz üstünde açık gri 1,5:1 civarındadır.
WCAG 2.2’nin AA seviyesi normal metinde en az 4,5:1, büyük metinde (yaklaşık 24 piksel ve üzeri, ya da 19 piksel kalın) en az 3:1 ister. AAA seviyesi bu değerleri 7:1 ve 4,5:1’e çıkarır. Buton ve form kenarlıkları gibi arayüz öğeleri için de 3:1 sınırı geçerlidir. Ölçütlerin tamamı W3C’nin kontrast kılavuzunda açıklanmıştır.
Pratikte en sık düşülen yer açık gri metindir. Tasarımda zarif duran ikincil metin rengi, gün ışığında telefon ekranında okunmaz hâle gelir. Paleti kurarken her metin ve arka plan ikilisinin oranını bir kez ölçün, sonuçları kimlik belgesine yazın.
Koyu tema için renk eşleme
Koyu temayı açık temanın renklerini ters çevirerek kurmak işe yaramaz. Koyu zeminde aynı doygunlukta bir renk fazla parlak görünür ve gözü yorar. Doğru yaklaşım, her renk için bir koyu tema karşılığı tanımlamaktır.
Üç kural yeterli. Birincisi, arka plan saf siyah değil koyu gri olsun; saf siyah üzerinde beyaz metin titreşim yaratır. İkincisi, ana rengin doygunluğunu bir miktar düşürüp açıklığını artırın; HSL ile yazdığınız renk kodları bu işi kolaylaştırır. Üçüncüsü, kontrast oranını koyu temada yeniden ölçün, açık temada geçen bir ikili koyu temada sınıfta kalabilir.
CSS değişkenleriyle renk kodlarını tek yerden yönetmek
Renk kodlarını stil dosyasının içine dağıtırsanız, markanın mavisini değiştirmek yüzlerce satırı tek tek bulmak demektir. CSS özel değişkenleri bu işi bir tanım bloğuna indirir: paleti bir kez yazarsınız, kalan her yer o adı çağırır.
Kurulum şöyle işler. Kök seçicide her renge bir görev adı verirsiniz (--renk-ana, --renk-metin, --renk-uyari), sonra kuralların içinde doğrudan kodu değil bu adı kullanırsınız. Koyu tema için aynı adları farklı değerlerle yeniden tanımlamanız yeterlidir; geri kalan kod değişmez. Söz diziminin ayrıntısı ve tarayıcı desteği MDN özel değişkenler dokümanında anlatılıyor.
WordPress kullanıyorsanız bu tanımları alt tema ya da özelleştirici üzerinden eklemek en temiz yol; eklenti ayar panellerine dağıtılmış renkler tema değiştiğinde kaybolur. Tema ve eklenti yükünün site hızıyla ilişkisini WordPress hosting tercihi yazımızda ele aldık.
Renk kodunu nereden alırsınız ve sık yapılan hatalar
Kodu almanın en güvenilir yolu kaynağın kendisidir. Marka kılavuzu varsa tek doğru oradadır. Yoksa tasarım dosyasındaki renk seçicisi, tarayıcı geliştirici araçlarının renk damlalığı ya da işletim sisteminin renk seçici penceresi kodu verir. Ekran görüntüsünden damlalıkla renk almak riskli bir yöntemdir; sıkıştırma ve ekran profili değeri kaydırır.
Aldığınız kodu bir yere yazmadan bırakmayın. Marka kılavuzunu, teknik dokümanı ya da bir iç makale biçiminde kayda geçirmek, altı ay sonra “bu mavi hangisiydi” tartışmasını bitirir.
- Paleti sekiz on kodla sınırlayın, her koda bir görev adı verin.
- Her rengin HEX ve CMYK karşılığını kimlik belgesine yan yana yazın.
- Metin ve arka plan ikililerinin kontrast oranını ölçün, 4,5:1 sınırının altına inmeyin.
- Ana rengi HSL ile de kaydedin; varyant üretmek kolaylaşır.
- Koyu tema için ayrı bir eşleme tanımlayın, ters çevirmeyle yetinmeyin.
- Kodları CSS değişkenlerinde toplayın, stil dosyasına dağıtmayın.
- Baskıya gidecek görselleri sRGB dışında bir uzayda bırakmayın.
- Yeni bir renk eklemeden önce mevcut paletle çözülüp çözülmediğini sorun.
Sonuç
Ekran işi RGB tabanlı gösterimlerle, baskı işi CMYK ile yürür. Paleti dar tutun, her renge bir görev verin, kontrast oranını ölçün ve kodları CSS değişkenlerinde toplayın. Bu dört adım uygulandığında renk tartışması teknik bir konu olmaktan çıkar.
Sıkça sorulan sorular
Renk kodları arasında dönüşüm yaparken kayıp olur mu?
HEX ile RGB arasında kayıp olmaz, ikisi aynı bilgiyi taşır. HSL dönüşümünde ondalık yuvarlama nedeniyle çok küçük sapmalar çıkabilir. Asıl kayıp RGB’den CMYK’ya geçerken olur; ekranda görünen bazı parlak tonların mürekkep karşılığı yoktur, en yakın ton kullanılır.
Sitede HEX mi RGB mi kullanmalıyım?
İkisi de geçerlidir. Sabit renkler için HEX kısa ve okunaklıdır. Saydamlık gerekiyorsa RGBA veya HSLA kullanırsınız. Tema varyantı üretiyorsanız HSL en pratik olanıdır. Karar teknik değil, ekibin okuma alışkanlığıyla ilgilidir.
Kontrast oranını nasıl ölçerim?
Tarayıcı geliştirici araçlarında bir metin öğesi seçtiğinizde renk kutusu oranı gösterir ve AA ile AAA sınırlarını işaretler. Tasarım programlarının erişilebilirlik eklentileri de aynı hesabı yapar. Ölçümü tasarım aşamasında yapmak, yayına çıktıktan sonra düzeltmekten çok daha ucuzdur.
Kaç renk kullanmak doğru?
Bir ana renk, bir iki ikincil renk, üç dört nötr ve dört durum rengi çoğu site için yeterlidir. Renk sayısı arttıkça hangi rengin ne anlama geldiği bulanıklaşır ve arayüz tutarsız görünmeye başlar.
Matbaaya HEX kodu göndersem olur mu?
Matbaa dönüşümü kendi yapar ama sonucu siz görmeden onaylamış olursunuz. Doğrusu, dönüşümü baştan yapıp CMYK karşılığını kimlik belgesine yazmak ve mümkünse ilk baskıda örnek çıktı istemektir.
Narhost’ta
WordPress hosting paketleri NVMe SSD disk, ücretsiz SSL ve tek tıkla kurulum ile geliyor; tema ve palet düzenlemelerinizi Türkçe cPanel üzerinden yönetebilirsiniz.