Web tasarım renk sistemi, beş hoş rengi moodboard’da toplamak değildir. Yüzey, metin, vurgu ve durum katmanlarını ayrı token’lar olarak tanımladığınızda arayüz tutarlı kalır. Bu rehber paleti role çevirmenin uygulanabilir yolunu anlatır.
Bir arayüzü boyamak ile bir web tasarım renk sistemi kurmak aynı iş değildir. Beş renkli moodboard ekibe ilham verir; kart, form, menü ve uyarı aynı paletten rastgele beslendiğinde kontrast da bakış sırası da dağılır. Sistem rengi işe göre ayırır: yüzey zemin tutar, metin okunur kalır, vurgu eylemi gösterir, durum renkleri başarıyı hatadan ayırır.
Bu rehber paleti çöpe atmanızı söylemez. Hex kodu durur. Değişen şey, her kodun bir rolü, bir kullanılabilir zemini ve bir yasağı olmasıdır. Tasarım değişkeni ile CSS değişkeni aynı katmanları konuştuğunda sayfa çoğalsa da renk kararı dağılmaz.
Web tasarım renk sistemi palet midir?
Moodboard çoğu ekibe beş “güzel” renk seçtirir: koyu lacivert, açık gri, marka kırmızısı, altın vurgu, yumuşak yeşil. İlk bakışta düzenli durur. Ürün kartı, fiyat, stok notu, menü hover’ı ve form hatası aynı beşliğe bindirilince kırmızı hem indirim hem hata hem de asıl düğme olur. Kullanıcı hangisinin eylem, hangisinin uyarı olduğunu çözmek zorunda kalır.
Palet ilhamdır. Web tasarım renk sistemi ise rollerin sözlüğüdür. Rol net değilse yeni ekran her seferinde “şu hex’i bir deneyelim” ile açılır. Deneme bir kez olur; üçüncü sayfada tutarsızlık birikir.
İyi bir sistem önce şu soruyu sorar: Bu renk zemin mi, yazı mı, eylem mi, yoksa bir işlemin sonucu mu? Cevap hex’ten önce gelir. Hex, o cevabın o temadaki görünür halidir.
Renk seçilmez, role bağlanır. Hex yalnızca o rolün o temadaki görünür halidir.
Yüzey katmanı: sayfayı tek zemine hapsetmeyin
Yüzey, içeriğin oturduğu zemindir. Tek bir “arka plan rengi” çoğu sitede yetmez. Sayfa zemini, yükseltilmiş kart, gömülü kuyu ve üst üste binen katman ayrı işler görür. Aynı gri her yerde kullanılırsa kart sayfadan kopmaz, modal da sayfadan ayrılmaz.
Yüzey katmanında amaç süs değil gruplama ve derinliktir. Açık temada sayfa biraz daha soluk, kart biraz daha açık, ayırıcı çizgi çok hafif bir ton farkıyla durur. Koyu temada ilişki aynı kalır; yalnızca değerler değişir. Markayı karta yaymak kartı kampanya bayrağına çevirir ve asıl vurguyu öldürür.
Somut bir ürün kartı düşünün. Kartın zemini raised, sayfa page, fiyatın oturduğu küçük etiket subtle olabilir. Üçü de nötrdür; hiçbiri marka rengi taşımak zorunda değildir. Kurumsal bir kahraman alanda da aynı kural işler: koyu bant bir yüzeydir, marka rengi ise o bandın tamamını boyamak zorunda değildir.
Yüzey token’larında sade bir set çoğu siteyi taşır:
- page: tarayıcıda kayan ana zemin
- raised: kart, üst bar, panel
- sunken: arama, tablo satırı, içeride çukur duran alan
- overlay: modal, çekmece, açılır menü
- inverse: koyu bant, footer, koyu kahraman alan
Kenarlık ve gölge rengi de yüzeye bağlıdır. Rastgele açık gri yazmak yerine subtle bir ayırıcı rolü, kart ile tabloda aynı işi görür. Gölgeyi “daha premium dursun” diye her karta eklemek yüzey katmanını gürültüye çevirir; yükseklik farkı yetiyorsa gölgeye gerek kalmaz.
Metin katmanı: okumayı süslemeden ayırın
Metin rengi hiyerarşi aracıdır; paletin dekoratif parçası değildir. Birincil metin başlık ve gövde için okunur kalır. İkincil metin tarih, yardım cümlesi, kargo notu gibi destek bilgisi içindir. Devre dışı metin tıklanamayan durumu anlatır. Ters metin, koyu yüzeyin üstünde durur.
Asıl hata, ikincil metni “açık gri şık duruyor” diye seçip açık zeminde bırakmaktır. Gri palette hoş durur; cümle olarak kaybolur. Her metin token’ını gerçek yüzeylerin üstünde okuyun. Başlık güzel duruyor diye gövdeyi de aynı tona çekmeyin. Gövde daha uzun okunur, daha net bir ayrım ister.
Renk, bakış sırasının tek aracı değildir. Punto, ağırlık ve konum olmadan renk bağırarak hiyerarşi kurmaya çalışır. Ölçü ve konumla sırayı nasıl kuracağınızı görsel hiyerarşi yazısında ayrı ele aldık; renk sisteminde işiniz o sırayı bozmamaktır.
Metin ailesini şişirmeden tutun:
- birincil metin: başlık ve gövde
- ikincil metin: destek cümlesi, meta bilgi
- devre dışı metin: tıklanamayan hal
- ters metin: inverse yüzeyin üstü
- bağlantı metni: gövde içi link; kural tek olsun
Link rengini vurguyla birleştirmek mümkündür. Ayırırsanız da karar tek durmalıdır: gövde içi link her yerde aynı, düğme yazısı her yerde aynı. Üç farklı mavi link, üç farklı site izlenimi üretir.
Vurgu katmanı: markayı her yüzeye sürmeyin
Vurgu, kullanıcının “şimdi bunu yap” dediği yerdir. Birincil düğme, seçili sekme, kaydırıcı, kritik çağrı. Marka rengi çoğu üründe bu kata girer. Girmezse marka rengi logo ve görselde kalır; o da bilinçli bir karardır, eksiklik değildir.
Vurguyu her karta, her ikona, her çizgiye sürmek markayı güçlendirmez. Asıl düğme kalabalığa karışır. Vurgu katmanında az token yeter: varsayılan dolgu, hover ve aktif hali, hafif vurgu zemini, dolgunun üstündeki yazı ve ikon. Üst yazı unutulursa koyu kırmızı düğmenin üstüne koyu yazı konur; düğme “marka gibi” durur ama okunmaz.
Odak halkası da çoğu arayüzde vurgu ailesine yakındır. Klavye ile dolaşan biri için bu halka süs değil yol tarifidir. Odak ve klavye düzenini erişilebilir web tasarımı rehberinde ayrı kuruyoruz; renk sisteminde halkayı “sonra bakarız” diye bırakmayın.
Birincil düğme sayısı da vurgu disiplinidir. Ekranda üç dolgulu vurgu düğmesi varsa katman fiilen yok demektir. İkincil eylem çizgili veya nötr yüzeyli kalır. Grafik, ikon seti ve dekoratif çizgi vurgu token’ından beslenmek zorunda değildir; oraya marka rengi yığmak veri okumayı da bozar.
Durum renkleri ayrı bir sözleşme olsun
Durum renkleri markanın ruh hali değildir. Yeşil “doğal ve taze” diye seçildiyse stok notu ile marka hikâyesi çakışır. Durum katmanı işlemin sonucunu anlatır: kayıt oldu, ödeme reddedildi, stok azaldı, bilgi notu var.
Bu katmanı vurguyla birleştirmek pahalıya patlar. Marka kırmızısı hem “satın al” hem “kart reddedildi” olursa eylem ile tehlike aynı boyaya girer. Durum için ayrı ve küçük bir aile kurun: başarı, uyarı, hata, bilgi. Her birinin zemin, metin ve kenarlık hali olsun. Yalnızca ikon boyamak yetmez; açık kırmızı yazı açık pembe zeminde kaybolabilir.
Toast, satır içi form hatası, rozet ve banner aynı token’lardan beslensin. Aksi halde form bir kırmızı, sepet başka kırmızı üretir. “Az kaldı”, “tükendi”, “bilgi amaçlı kargo notu” gibi cümleler duruma açtır. Her etiket kırmızıysa kırmızı anlamını yitirir. Tehlike, işlemi durduran yere saklanır; bilgi notu ikincil metin veya bilgi durumuyla çözülür.
Token’ı adlandırın ve bileşene bağlayın
Katmanlar kâğıtta kalırsa ekip yine hex yapıştırır. Adlandırma, rengi bileşene bağlayan sözleşmedir. İsimde “açık mavi iki” yerine işi yazın. Palet basamağı içeride durabilir; düğme ve kart o basamağa değil role bakar.
Uygulanabilir sıra şudur:
- Ekran envanteri çıkarın: ana sayfa, liste, detay, form, sepet, boş durum, hata.
- Her ekranda zemin, yazı, eylem ve sonuç lekelerini işaretleyin; henüz hex seçmeyin.
- Yüzey, metin, vurgu ve durum için en sade token listesini yazın.
- Hex’i role atayın. Her metin token’ını her yüzeyin üstünde okuyun.
- Bileşene bağlayın: birincil düğme vurgu artı üst yazı, kart raised yüzey artı birincil metin, hata uyarısı durum ailesi.
- Ön yüzde aynı isimleri değişken yapın. Tema değişimi hex avı değil, rol haritasını değiştirmek olsun.
- Yasakları yazın: vurgu gövde rengi olmaz, durum rengi birincil düğme olmaz, ikincil metin kaybolan gri olmaz.
KepezWeb işinde bu sözlük tasarım dosyası ile ön yüz arasında tek kaynak olarak durur. Aksi halde tasarımcı “şu mavi”, geliştirici “şu hex” der; üçüncü bir mavi canlıya kaçar.
Küçük ekipte yirmi civarı rol çoğu ürünü taşır. İhtiyaç doğmadan on basamaklı gri skalası ve onlarca vurgu türevi palete geri dönüştür. Önce dört katman; hover, disabled ve muted ancak gerçek bir bileşen istediğinde eklenir. Hover yeni bir renk değil, mevcut rolün hali olmalıdır.
| Yaklaşım | Ne üretir | Nerede kırılır |
|---|---|---|
| Beş renkli moodboard | İlham ve ilk marka hissi | Aynı hex düğme, hata ve etiket üzerinde çakışır |
| İsimsiz hex yığını | Hızlı görsel deneme | Tasarımcı ile geliştirici farklı maviler kullanır |
| Katmanlı token | Yüzey, metin, vurgu, durum rolleri | Yeni ekran mevcut role bağlanır; sapma azalır |
Canlı sitede sistemi nasıl kontrol edersiniz
Yeni arayüze sistem kurmak, eski siteye yama yapmaktan kolay durur. Yine de mevcut bir sitede kısa bir tur yeter: birincil düğme, gövde metni, kart zemini, form hatası, başarı mesajı. Beşi de ayrı rol mü, yoksa iki hex her işe mi koşuyor?
Kontrol listesini ekran başında işaretleyin:
- Sayfada birincil dolgulu düğme sayısı bilinçli mi?
- İkincil metin gerçek yüzeyde okunuyor mu?
- Hata rengi marka renginden ayrı mı?
- Modal, karttan ve sayfadan ayrı bir yüzey mi?
- Hover ve disabled yeni hex değil, mevcut rollerin hali mi?
- Koyu bant üstünde ters metin unutulmamış mı?
Açık ve koyu tema ikinci bir moodboard değildir. Aynı roller, farklı değerler. Arka planı karartmak metin ve vurgu ilişkisini bozar. Katman isimleri değişmez; değişen yalnızca o isimlerin değeridir.
Kurumsal sitede bu sözleşmeyi baştan yazmak, her açılış sayfasında rengi yeniden tartışmamayı sağlar. KepezWeb web tasarım işinde rengi slayt paleti değil arayüz kararı olarak ele alır.
Sıkça Sorulan Sorular
Hex kodlarını silmek mi gerekir?
Hayır. Hex durur; fakat bileşen hex’e değil role bakar. Palet basamağı içeride kalır, düğme ve kart dışarıda rol ismini kullanır.
Marka rengi hem vurgu hem hata olabilir mi?
Olabilir ama okuma maliyeti yüksektir. Aynı kırmızı hem satın al hem kart reddedildi olursa eylem ile tehlike karışır. Durumu ayrı tutmak daha net bir cümle kurar.
Gri skala yüzey midir, metin midir?
Gri bir boya kutusudur, rol değildir. Aynı gri hem kart zemini hem ikincil yazı olamaz. Önce işi seçin; gri o işin değeri olsun.
Dark mode için ikinci bir palet şart mı?
İkinci bir moodboard şart değildir. Gerekli olan, aynı yüzey-metin-vurgu-durum rollerinin koyu değerlerle yeniden eşlenmesidir. İsimler sabit kalır.
Kaç token yeter?
Dört katmanın sade hali çoğu sitede yeter. Token’ı ihtiyaç doğmadan çoğaltmak, palete isim yapıştırmaktan farksızdır. Yeni bir bileşen gerçekten yeni bir rol istiyorsa ekleyin.
Sonuç ve Sonraki Adım
Renk katmanlarını mevcut sitenize oturtmak veya yeni bir arayüzü baştan bu sözleşmeyle kurmak istiyorsanız KepezWeb ile konuşabilirsiniz. Ekranları ve önceliği netleştirip teklif alabilirsiniz.
