WTK209U – GÖRSEL WEB TASARIMI
Ünite 6: Görsel Web Tasarımında Renklerle Çalışmak
Giriş
Bir grafik tasarım ürününü oluşturan temel yapı taşları, çizgi,
ton, renk, doku, biçim, ölçü ve yön olarak ifade edilmektedir.
Dolayısıyla, görsel web tasarımında tasarımın kalitesini
belirleyen temel unsurlardan birisini renk kullanımı
oluşturmaktadır. Sembolik bir iletişim aracı olarak renk
kavramı objeleri tanımlamamıza yardımcı olmaktadır. Her
rengin verdiği bir mesaj olduğu gibi, tasarım sürecinde uyum
oluşturan renklerin bir arada kullanımları oldukça önemlidir.
Renklerin sahip oldukları birtakım özellikler nedeniyle
uyarıcı olarak kullanılan renkler aracılığıyla, kullanıcılar
üzerinde farklı psikolojik ve fizyolojik etkiler
yaratılabilmektedir.
Renk Kavramı ve Renklerin Sınıflandırılması
Renk, verdiği mesajlarla objeleri tanımlayabilmemizi,
duygular ve ruh durumları ile iletişim kurabilmemizi
sağlayan ve günlük yaşamda önemli bir yere sahip olan
sembolik bir iletişim aracıdır. Renk temel olarak ışığın
meydana getirdiği fiziksel bir olgudur. Işığın cisimlere
çarpmasıyla yansıyan ışınlar sayesinde gözde meydana gelen
duyumların her birine renk denilmektedir. Işığın olmadığı
yerde renk olmayacağı için gözün rengi algılaması için belli
bir düzeyde ışık olması gerekmektedir. Rengin algılanması ve
ortaya çıkardığı etki bağlamsal olup kişiden kişiye farklılık
gösterebilmektedir. Kaynağın özelliği, ışığın düştüğü yüzeyin
özelliği ve gözün tepkisi rengin algılanmasını etkileyen temel
etkenler arasında sayılabilir.
Renk, ışık, göz ve beyin eş güdümü ile oluşurken, bir görme
olayı olarak aşağıdaki üç temel prensiple algılanır:
• Fiziksel Etki: Işınların cisim üzerinde bıraktığı etki
• Fizyolojik Etki: Işınların gözde algılanması
• Psikolojik Etki: Beyinde uyandırdıkları duyum
Renk temel olarak uzunluk, genişlik ve derinlik olmak üzere
üç boyuttan oluşmaktadır. Uzunluk, rengin türü ile ilgili bir
kavram olup renkleri sarı, mor gibi betimlemede kullanılan
terimleri; genişlik, en önemli boyut olup bir rengin açıklık ya
da koyuluk derecesini yani rengin tonunu; derinlik ise rengin
yoğunluğu ile ilgili bir kavram olup bir rengin parlaklığını
ifade etmektedir.
Fiziksel anlamda renk kavramı, insan gözü tarafından
algılanan “görülebilir ışık” ile ilgilidir. Görülebilir ışık, en
küçük dalga boyu olan 380 nm ile mor renkten, en büyük
dalga boyu olan 780 nm ile kırmızı arasında kalan bölümdür.
Başka bir ifadeyle; görülebilir ışık mor ötesi (ultraviyole) ile
kızıl ötesi (infrared) arasında kalan kısımdır. Fizyolojik renk
temelde görme olayı ile ilgili bir kavramdır. Retinada oluşan
görüntü, sinir sistemi ile beynin görme merkezine
ulaştırılmakta ve psikolojik görme algılaması sağlanmaktadır.
Temelde her rengin verdiği bir mesaj olup renkler objeleri
tanımlamamıza yardımcı olmaktadır. Renk ögesi görsel web
tasarımında tasarıma belirli bir kimlik, süreklilik, algılanırlık
ve bütünlük kazandırmaktadır.
Newton karanlık bir odada güneş ışığını prizmadan geçirerek
gökkuşağının bütün renklerini ayrı ayrı beyaz perde üzerinde
ayrıştırmayı başarmış; sırasıyla mor, mavi, yeşil, sarı, turuncu
ve kırmızı renkler ortaya çıkmıştır. Fizikçi Young ise
Newton’un gerçekleştirdiği deneyin tam tersini yaparak tüm
renkleri bir perdede birbiri üzerine düşürerek ışığı yeniden
oluşturmayı başarmıştır. Young bu renkleri ikişerli
karıştırarak şu renkleri elde etmiştir:
• Yeşil ve kırmızı karışımıyla sarı
• Koyu mavi ve yeşil karışımıyla cyan
• Kırmızı ve koyu mavi karışımıyla magenta
Renkler birçok farklı özelliklerine göre sınıflandırılmaktadır.
Bu sınıflamalardan en yaygın olanı renkleri ana renkler, ara
renkler ve üçüncül renkler olmak üzere sınıflandırmaktır.
Renklerin ikili karışımları sonucunda ara ve üçüncül renkler
elde edilmektedir.
Ana Renkler: Kırmızı, sarı ve mavi renkler ana renkler olarak
ifade edilmektedir. Bu renkler doğada saf halde bulunmakta
ve herhangi renk kombinasyonlarının karışımı sonucunda
elde edilmemektedir.
Ara Renkler: Ana renklerin (kırmızı, sarı, mavi) eşit
oranlarda ikişerli karışımı ile elde edilen renklerdir. Ara
renkler aşağıdaki gibidir:
• Kırmızı ve sarının karışımı ile turuncu
• Mavi ve sarının karışımı ile yeşil
• Kırmızı ve mavinin karışımı ile mor
Üçüncül Renkler: Ana renkler ile ara renklerin değişik
oranlarda karışımı ile elde edilen renkler üçüncül renkler
olarak ifade edilmektedir. Örneğin, ana renklerden kırmızı ile
ara renklerden turuncunun karışımı ile turuncu ve kırmızı
arası üçüncül bir renk elde edilmektedir.
Renklere ilişkin bir diğer sınıflandırma ise şiddet, frekans ve
dalga boyuna göre ana ve ara renklerin sıcak, soğuk ve nötr
etkilerine yönelik sınıflamadır.
Sıcak Renkler: Dalga boyu yüksek, canlı, enerji verici ve
güçlü renklerdir. Sıcak renkler bu özellikleri nedeniyle görsel
web tasarımında genellikle dikkat çekmek amacıyla banner
ve menülerde yaygın olarak kullanılırlar. Isı ve ışık etkisi
veren kırmızı, sarı ve turuncu, sıcak renkler olarak ifade
edilmektedir.
Soğuk Renkler: Dalga boyu düşük, sakinleştirici ve serinlik
etkisi veren renkler olup genellikle tasarımların sembolik
güçlerini zayıflatmak amacıyla kullanılmaktadırlar. Mavi,
mor ve yeşil, soğuk renkler olarak ifade edilmektedir. Bu
renkler sıcak renklerle birlikte uyumlu bir ilişki içerisindedir.
Bir başka ifade ile sıcak ve soğuk renklerin birlikte
kullanımının yarattığı zıtlık, tasarımın etkililiğini arttırıcı bir
etki ortaya çıkarabilmektedir.
Nötr Renkler: Siyah, beyaz ve gri, nötr renkler olarak ifade
edilmekte ve renk sayılmamaktadırlar. Herhangi bir cisim
güneş ışığından aldığı renkleri yansıtmadan yutuyorsa o cisim
siyah olarak görülmektedir. Siyah ve beyaz renk karıştığında
1
 WTK209U – GÖRSEL WEB TASARIMI
Ünite 6: Görsel Web Tasarımında Renklerle Çalışmak
ise gri renk ortaya çıkmaktadır. Nötr renklerden siyah ve
beyaz herhangi bir rengi açmak veya koyulaştırmak amacıyla
kullanılmaktadır. Nötr renklerin tüm renklerle uyumlu
olması, tasarım ortamında arka plan ögesi olarak nötr renk
kullanımının kullanışlılığını arttırmaktadır. Dolayısıyla görsel
web tasarımında geniş arka planlarda gözü yormayan yapısı
ile nötr renk kullanımı önerilmektedir.
Sıcak renklerin dalga boyları yüksek frekansları düşük; soğuk
renklerin ise dalga boyları düşük ancak frekansları yüksektir.
Rengin Özellikleri
Renklerin özellikleri, tasarımların algılanabilirliğini
belirleyen önemli faktörlerdir. Özellikler arasında rengin
derinliği, renk değeri, renk doygunluğu, renk parlaklığı ve
aydınlığı ve renk tonu sayılabilir.
Derinlik: Grafiğin görüntüleneceği renk kapasitesini ifade
eden ve görüntünün kalitesini etkileyen, rengin parlaklığı ile
ilgili bir kavramdır. Parlaklık ve derinlik doğru orantılı
kavramlar olup parlaklık arttıkça derinlik de artmaktadır.
Renk derinliği bit cinsinden ifade edilmektedir. Bit, ikili sayı
sistemi olarak kullanılan ve bilgisayar terminolojisindeki en
küçük veridir. Web ortamında ifade edilen görüntüdeki nokta
sayısı ne kadar fazla ise o kadar gerçeğe yakın bir görüntü
elde edilmektedir. Ancak, gerçeğe yakın görüntü demek
görüntü kalitesinin de artması anlamına gelmektedir. Kaliteli
görüntü, görüntü işleyen bilgisayar birimlerini de
etkilemektedir. Özellikle işlemci, ekran kartı ve RAM,
görüntü kalitesinden doğrudan etkilenen önemli bileşenlerdir.
Dolayısıyla görüntü kalitesinin artması bu bileşenlerde yük
anlamına gelmektedir.
Renk Değeri: Her rengin renk spektrumundaki konumuna
göre belirlenen sayısal değerini ifade eden, rengin açıklık ve
koyuluğu ile ilgili bir kavramdır. Renk değeri, grafik tasarım
uygulamalarında görsel hiyerarşiyi organize edebilmeyi
olanaklı hale getirmektedir. Görsel hiyerarşi ise odak
noktalarını doğru yapılandırmaya yardımcı olmaktadır.
Değişik değerlerde kullanılan renk, ortaya çıkan etkinin
artmasını sağlamaktadır.
Doygunluk (Saturation): Rengin saflığını ve sadeliğini ifade
eden bir kavram olup bir rengin aynı ışık ortamında griye
oranıyla ölçülmektedir. Rengin doygunluğu arttırıldığında
ana rengin dışındaki tonlar azalmakta, rengin doygunluğu
azaltıldığında ise renk griye yaklaşmaktadır. Doygunluk sıfır
olduğunda renk gridir.
Parlaklık (Lightness): Bir piksel tarafından emilen ya da
yayılan yani bir cisimden geri dönen ışık miktarını ifade eden
bir kavramdır. Parlaklık azaltıldığında cisim daha fazla ışığı
soğurmakta ve aydınlatılan cisimden geri dönen ışık
azalmaktadır. Aydınlık ise bir rengin açıklık koyuluk değerini
ifade eden bir kavramdır.
Ton (Hue): Rengin parlaklık derecesini ifade eden bir kavram
olup ışık derecesi ile yakından ilişkilidir. Bir yüzeyden
yansıyan ışık miktarı, ton değerini belirlemektedir. Ton
farklılıkları, algılanan ışığın dalga boyundaki değişimlere
bağlıdır. Örneğin ışığı az olan mavi koyu, ışığı fazla olan
mavi açık olarak ifade edilmektedir.
Renk Modelleri
Renk modelleri temel olarak RGB ve CMYK olarak
bilinmektedir. Bu modellere ek olarak Lab model ve Gri
tonlamalı model de renk modelleri kapsamında ele
alınmaktadır.
RGB Renk Modeli: RGB, toplamsal renk modeliyle
üretilmektedir. RGB, cihaz bağımlı renk modelleri
kapsamında yer alan, ana renkler (R: Red/Kırmızı, G:
Green/Yeşil, B: Blue/Mavi) üzerine kurulu, bilgisayar
ekranında kullanılan standart renk modelidir. Bu renk
modelinde tüm renkler farklı yoğunluklarda kırmızı, yeşil ve
mavi rengin kullanılmasıyla elde edilmekte ve 0-255 arası
değer almaktadır. Üç rengin değeri de eşit olduğunda sonuç
nötr bir gri tona dönüşmektedir. Tüm renk değerleri 255
olduğunda sonuç saf beyaz, tüm değerler 0 olduğunda ise
sonuç saf siyahtır. RGB, her türlü dijital tasarımlarda ve web
ortamında yaygın olarak kullanılan renk modeli olmakla
birlikte kullanılan aygıtın özelliklerine göre değişkenlik
göstermektedir.
CMYK Renk Modeli: CMYK, cihaz bağımlı renk modelleri
kapsamında yer alan çıkarımsal ana renkler (C: Cyan/Mavi,
M: Magenta/Kırmızı, Y: Yellow/Sarı ve K: Key Black/Siyah/
Anahtar Öge) üzerine kurulu bir renk modelidir. CMYK renk
modelinde temelde RGB renk modelinden çıkarımsal yolla
türetilen üç renk vardır ve siyah bu renklere zorunlu olarak
eklenmiştir. Tüm renkler bu renklerin karışımı ile elde
edilmektedir. CMYK renk modelinde üç renk değeri de sıfır
olduğunda saf siyah üretilmektedir. CMYK renk modeli,
masaüstü yayıncılıkta ve profesyonel baskı gerektiren işlerde
yaygın kullanılan bir renk modelidir. RGB renk modeli
toplamsal, CMYK renk modeli çıkarımsal bir yönteme
dayanır.
CMYK renk modelinde;
• Sarı ve cyan karışımıyla yeşil
• Magenta ve sarı karışımıyla kırmızı
• Cyan ve Magenta karışımıyla mavi elde
edilmektedir.
Lab Renk Modeli: Rengin nasıl oluştuğunu değil insan
tarafından nasıl algılandığını temel alan bir modeldir. Lab
modeldeki sayısal değerler görme kusuru olmayan bir insanın
görebildiği tüm renkleri tanımlamaktadır. Dolayısıyla
aygıttan bağımsız bir renk modeli olarak doğadaki renklere
odaklanmaktadır. Bunun yanında, Lab renk modeli doğala
yakın daha gerçekçi görüntülerin oluşmasına olanak
tanımaktadır. Lab renk modelindeki “L” (Lightness) rengin
açıklık koyuluk değerini 0 ile 100 arasında belirtmektedir.
“a” bileşeni yeşil-kırmızı; “b” bileşeni ise mavi-sarı ekseni
vurgulamaktadır.
Gri Tonlamalı Renk Modeli: Beyaz ve siyah arasındaki gri
tonların eşitliği üzerine kurulu, grinin 256 tonunu
kullanabilen bir renk modelidir. Bu renk modeli sadece grinin
tonlarından oluşur ve tek renk kanalı geçerlidir. Rengin
2
 WTK209U – GÖRSEL WEB TASARIMI
Ünite 6: Görsel Web Tasarımında Renklerle Çalışmak
canlılığının bir göstergesi olan doygunluk düzeyi ile parlaklık
değeri doğru orantılı kavramlardır. Yüksek doygunluk düzeyi
parlak renklerin ortaya çıkmasına neden olurken, düşük
doygunluk düzeyi ise rengin gri tonlarına yaklaşmasına
neden olmaktadır. Dolayısıyla, 8 bitlik yapısı ile gri tonlamalı
renk modeli temel renklerin parlaklık düzeyleri ile doğrudan
ilişkilidir. Gri seviye resimlerde her piksel 0 (siyah) ile 255
(beyaz) arasında tam sayı değer alabilen 1 byte ile ifade
edilmektedir. Parlaklık değeri 0 olduğunda ışığı yansıtmayan
en koyu ton olan mat siyah, 255 olduğunda ise ışığı tüm
gölge boylarında yansıtan beyaz renk elde edilmektedir.
Aradaki renkler ise grinin tonlarından oluşmaktadır. Ara
tonlar her biri 0 ile 255 arası değer alan üç ana rengin (R:
Kırmızı, G: Yeşil, B: Mavi) eşit parlaklık düzeyinde birleşimi
ya da her bir pikseli yüzde olarak 0 ile 100 arası değer alan üç
temel pigmentin (C: Cyan/Mavi, M: Magenta/Kırmızı, Y:
Sarı) eşit miktarda karışımı ile elde edilmektedir. Web
tasarımında geniş içerik alanlarının gri tonlamalı dingin renk
tonlarıyla doldurulmasıyla gerek metinlerin gerekse
görsellerin ön plana çıkarılması sağlanabilmektedir.
Renk modelleri ile ilgili karşılaştırmalar:
• Cihaz bağımlı renk modelleri kapsamında yer alan
RGB modeli web ortamında, CMYK modeli ise
baskı alanında en fazla tercih edilen renk
modelleridir.
• Lab renk modeli, rengin insan tarafından algılanış
şeklini temel aldığı için cihaz bağımsız bir
modeldir.
• Gri tonlamalı renk modeli ise her ne kadar RGB,
CMYK ve Lab renk modelleri gibi ayrıştırıcı bir
yaklaşım sunmasa da nötr renkler olan siyah, beyaz
ve gri üzerine temellenen bir modeldir ve
tasarımlarda sıklıkla kullanılmaktadır.
• Bilgisayar ortamında gerçekleştirilen tasarımlarda
RGB modelinde çalışılmalı, yazıcından çıkarıp
gerçek hayatta kullanılacak tasarımlarda ise CMYK
renk modelinde çalışılması gerekmektedir.
• Web tasarımı söz konusu olduğunda tasarım doğal
olarak dijital bir ortamda görüntüleneceği için RGB
renk modeli kullanılmaktadır.
Web site tasarımında tasarımı oluşturan renklerin bire bir
aynılarının kullanılacağı basılı işlerde ise renk modelleri
arasında bir dönüştürme yapılması gerekmektedir. Bu
dönüştürmelerden en yaygın olanı RGB renk modelinde
tasarlanan bir görüntünün baskı ortamları için CMYK renk
modeline dönüştürülmesi işlemidir. Her ne kadar web site
tasarımları dijital ortamlarda görüntüleniyor olsa da zaman
zaman kurumsal kimlik çalışmalarında tasarımlar arası
paralelliğin sağlanması adına bir site tasarımının görsel
algısının basılı bir tasarımda (afiş, davetiye, kartvizit vb.)
tekrarlanması gerekebilmektedir. Bu gibi durumlarda renk
modelleri arasında yapılacak söz konusu dönüştürme oldukça
önemlidir.
Renk modelleri arasındaki dönüşümde kullanılabilecek çeşitli
web tabanlı dönüştürme araçları bulunmaktadır. Benzer bir
dönüştürme işlemi de RGB-HSL renk dönüşümüdür, yani
RGB renk modelinde yapılan tasarımların HSL (Hue,
Saturation, Lightness) modeline dönüşüm işlemidir. Burada,
Hue, renk tonunu, Saturation, renk doygunluğunu, Lightness
ise rengin parlaklıkla oluşacak açıklık ve koyuluğunu
belirlemektedir. Aslında HSL renk dünyasının hem RGB
hem de CMYK renk modellerini de içine alan bir yapısı
bulunmaktadır.
Web tasarımında RGB renk modelinde oluşturulan renkler
kullanılmaktadır. Bir başka ifade ile söz konusu rengin diğer
işaretleme dillerince (HTML, CSS, SVG) doğru olarak
tanımlanabilmesi amacıyla Hex adı verilen kırmızı, yeşil ve
mavi renklerinin her biri için birer bayt toplamda ise üç
baytlık 16’lı sayı sistemince üretilen bir kodlama yapısı
kullanılmaktadır. Hex dönüşümünde birden dokuza kadar
olan rakamlarla birlikte A, B, C, D, E, F harflerinin
birleşimiyle renk kodları türetilmektedir.
Renk Kullanım İlkeleri
Renklerin çeşitli platformlarda kullanımlarına ilişkin birtakım
standartlar bulunmaktadır. Bu standartlar renk armonisi, renk
kontrastı ve dijital ortamda renk kullanımı başlıkları altında
ele alınır.
Renk Armonisi: Armoni, renkler arasındaki uyumu ve
dengeyi ifade etmektedir. Genellikle benzer renklerin yan
yana gelmesi ile oluşan etki armonik olarak
nitelendirilmektedir. Armonik etkide iki veya daha çok
sayıda renk karıştırıldığında göz dengeyi bulabilmek için
grileştirme yoluna gitmektedir. Karşılıklı yani bütünleyici
renkler yan yana geldiklerinde birbirlerinin etkisini arttırırlar
ve net biçimde görünürler. Bitişik yani uyumlu renkler yan
yana geldiklerinde ise birbirlerinin gücünü kırarlar ve
birbirlerini olduklarından daha zayıf gösterirler. Armoni
temelde monokromatik armoni ve polokrom armoni olmak
üzere iki şekilde ortaya çıkmaktadır.
• Monokromatik Armoni: Bir rengin değişik
tonlarıyla meydana getirilen armonidir. Bir rengi
beyazla açarak veya siyahla koyulaştırarak elde
edilen aynı renge ait değişik tonlar arasındaki yavaş
geçişler yoluyla armoni oluşturulmaktadır.
• Polokrom Armoni: Monokromatik armoninin
aksine polokrom armoni iki veya daha fazla rengin
armonisini ifade etmektedir. Polokrom armoni iki
şekilde ortaya çıkmaktadır:
1. Analog Renk Armonisi: Tasarımda bitişik
renklerin tercih edilmesiyle ortaya çıkan renk
armonisidir. Bitişik yani uyumlu renkler yan
yana geldiklerinde birbirlerini gücünü kırarlar
ve daha yumuşak bir görünüm sağlarlar. Sarı,
yeşil; kırmızı, turuncu; mor, mavi renk
çemberinde yan yana yer almakta ve analog
renk armonisi oluşturan renkler olarak
adlandırılmaktadır.
2. Kontrast Renkler Armonisi: Tasarımda
karşılıklı renklerin tercih edilmesiyle ortaya
çıkan renk armonisidir. Karşılıklı yani
bütünleyici renkler yan yana geldiklerinde
3
 WTK209U – GÖRSEL WEB TASARIMI
Ünite 6: Görsel Web Tasarımında Renklerle Çalışmak
birbirlerinin etkisini arttırırlar ve net bir
görünüm sağlarlar. Dolayısıyla, içinde renk
barındıran herhangi bir tasarımda dengeyi
oluşturmaya yönelik uygun oranlarda kontrast
renklerin kullanılması oldukça önemlidir.
Turuncu, mavi; kırmızı, yeşil; mor, sarı renk
çemberinde karşılıklı yer almakta ve kontrast
renkler olarak adlandırılmaktadır. Bunların
yanı sıra siyah, beyaz ve nötr çizgiler de
renklerin birbirinden ayrılmasını ve kontrast
renkler armonisinin ortaya çıkmasını
sağlamaktadır.
Renk Kontrastı: Kontrast, küçük-büyük, siyah-beyaz, sıcak-
soğuk gibi birbirine kıyasla belirgin olarak farklılaşma
durumunu ifade etmektedir. Renk etkileri de kontrastlık
durumuna göre güçlenir ya da zayıflar. Renk kontrastları
temel olarak aşağıdaki gibi sınıflandırılır:
• Yalın Renk Kontrastı: Renk değerleri
değiştirilmeksizin en az üç rengin kullanılması
temeline dayanan yalın renk kontrastına göre üç ana
rengi temsil eden sarı, kırmızı ve mavi en güçlü
Dijital Ortamda Renk Kullanımı: Görsel web tasarımında
renk kontrastı olup bu renklerden uzaklaştıkça yalın
kullanılacak renklerin seçiminde renklerin psikolojik etkileri,
renk etkisinin gücü azalmaktadır. Bu durum ana
hedef kitle beklentileri, görsel tasarımın niteliği ve sunum
renklerden uzaklaştıkça zıtlık ilişkisinin zayıflaması
biçimi gibi faktörler dikkate alınmalıdır. Başta web olmak
ile açıklanmaktadır.
üzere dijital ortamda gerçekleştirilecek tasarımlarda renk
• Açık-Koyu Kontrastı: Renklerin sahip olduğu açık
kullanım ilkeleri şu şekildedir:
ve koyu değerlerinin yan yana getirilmesi temeline
dayanır. Böyle bir durumda açık daha açık, koyu ise
daha koyu olarak görünmektedir.
• Sıcak-Soğuk Kontrastı: Sıcak (kırmızı, sarı,
turuncu) ve soğuk (mavi, yeşil, mor) renklerin
kullanımı temeline dayanır. Sıcak-soğuk kontrastına
uygun tasarımlarda bu renklerin kullanıcılar
üzerindeki etkileri de göz önünde
bulundurulmalıdır. Sıcak renkler kullanıcıya
yakınlık hissi verirken soğuk renkler uzaklaşma
hissi vermektedir.
• Tamamlayıcı Kontrast: Karşılıklı (bütünleyici)
renklerin kullanımı temeline dayanır. Tamamlayıcı
renk kontrastına göre bir rengin renk çemberindeki
karşılığı kendisini tamamlamaktadır. Bu renk
çiftlerinin (turuncu, mavi; kırmızı, yeşil; mor, sarı)
kullanılması ile kuvvetli zıtlıklar
yaratılabilmektedir. Dolayısıyla bir rengin yaptığı
etki tam karşıtı olan renkle birlikte
dengelenmektedir. Karşılıklı renkler birbirlerini
güçlendirici etkiye sahiptir ve bu renklerin eşit
oranda karışımından ise nötr gri elde edilmektedir.
Belirli renkler dışında (kırmızı ve yeşil hariç) bu
renk kombinasyonlarının kullanımı uyum
oluşturmaktadır.
• Yanıltıcı Kontrast: Gözde gözlenen renk üzerinde
beyin aracılığıyla bir tamamlayıcılığın oluşması
temeline dayanan yanıltıcı kontrast herhangi bir
rengin siyah, beyaz ve gri üzerindeki etkisi ile
ilgilenmektedir. Yanıltıcı kontrasta göre kullanılan
şiddeti yüksek renk gri, beyaz ve siyah üzerinde
farklı etki yapmaktadır. Yanıltıcı kontrasta göre gri;
o Kırmızı fon üzerinde yeşilimtırak
o Turuncu fon üzerinde mavi
o Sarı fon üzerinde kırmızı-mor (magenta)
o Mavi fon üzerinde turuncu
o Mor fon üzerinde sarımtırak görünür.
• Nitelik Kontrastı: Işık şiddeti yüksek yani parlak
renklerle aynı rengin nötrleştirilmiş tonlarının bir
arada kullanılması temeline dayanan nitelik
kontrastında kullanılan renkler birbirleri üzerinde
yumuşatıcı bir etki oluşturmaktadır. Bilgisayar
ekranında rengin niteliğini, renk tonu, renk
doygunluğu ve renk yoğunluğu olmak üzere üç
değişken temelinde tanımlamaktadır.
• Nicelik Kontrastı: İki ya da daha çok rengin
kapladıkları alanlar arasındaki orantı temeline
dayanan nicelik kontrastı, orantıların dengesi olarak
da ifade edilmektedir. Armoniyi bozmamaya
yönelik olarak kullanılan renk değerleri birbirleriyle
orantılı olmalıdır.
• Güçlü ve Parlak Renk Kullanımı: Görsel web
tasarımında hedef kitlenin dikkatinin asıl içeriğe
toplanmasına yönelik olarak çok güçlü ve parlak
renklerin olabildiğince az kullanılması
önerilmektedir. Güçlü ve parlak renkler çok dikkat
çektikleri için, sadece belirli bir içeriği vurgulamak,
diğerlerine oranla öne çıkarmak amacıyla
kullanılmalıdır. Bu sayede sitede gezinen
kullanıcının istenen içeriğe kolaylıkla erişmesi
sağlanmaktadır. Bu unsurun ne kadar az kullanılırsa
etkisinin o kadar fazla olacağı unutulmamalıdır.
• Parlak Renk ile Koyu Tonların Kullanımı: Parlak
renkleri kendilerine yakın koyu bir renkle
karıştırmak, belirli bir ögeyi vurgulamayı ve hedef
kitlenin dikkatini çekmeyi kolaylaştırmaktadır.
Böyle bir karışım zıtlık sağlamakla birlikte
kullanılan renk şiddetlerinin aynı olmamasına
dikkat edilmelidir. Zıt renkler birbirlerini daha etkili
gösterdikleri için aynı şiddete sahip renk kullanımı
gözü yoran bir etkinin ortaya çıkmasına neden
olmaktadır.
• Arka Plan Renk Kullanımı: Görsel web tasarımında
okunabilirliği kolaylaştırmaya yönelik olarak arka
plan rengi kullanılan yazı rengine uygun zıt
renklerden seçilmelidir. Hedef kitlenin dikkatinin
asıl ögeye odaklanmasına yönelik olarak arka
planda kalan ögelerin renklendirilmesinde tasarımın
bütünlük etkisini azaltacağı ve görsel bir karmaşa
yaratacağı için bir ekranda dörtten fazla renk
kullanmama koşuluyla sönük, temel, yumuşak,
4
 WTK209U – GÖRSEL WEB TASARIMI
Ünite 6: Görsel Web Tasarımında Renklerle Çalışmak
donuk ve doğal renkler tercih edilmelidir. Web
tasarımında arka plan renkleri olarak çoğunlukla
nötr renkler tercih edilmektedir.
• Uyumlu Renk Kullanımı: Görsel web tasarımında
birbirleriyle uyumlu renkler, renk geçişlerinde ise
uyumlu tonlar ya da zıt renk tonları kullanılmalıdır.
Renk bilgisine sahip uzman tasarımcılar bu uyumu
kolaylıkla sağlarken, renk bilgisi yeterli olmayan
amatör tasarımcılar bu uyumu sağlamak amacıyla
hazır renk paletlerinden yararlanabilirler.
• Görünüm Standartları ve Okunabilirlik: Görsel web
tasarımında görünüm ve okunabilirliğin
sağlanabilmesi için bilgi aktarımında yararlanılan
tipografik ögelerin tasarımı konusuna dikkat
edilmelidir.
Okunabilirliğe ek olarak görsel web tasarımında ele alınması
gereken başlıklardan bir diğeri de görünüm standartlarıdır ve
aşağıdaki gibi ifade edilmektedir:
• Web ortamında kullanıcı kontrolü ve gezinme
yardımcılarının kolaylıkla görülebilecek nitelikte
olması gerekir.
• Ekrandaki elemanların hareketi, göz hareketlerine
uygun olmalı, gözü yormamalıdır.
• Kullanılan yazı tipi kullanıcı düzeyine uygun
olmalıdır. Büyük harfler yerine küçük harfler, çok
süslü fontlar yerine de uygun nitelikte fontlar tercih
edilmelidir.
• Ekran tasarımında okunabilirliği sağlamak için
uygun bir renk kompozisyonu oluşturulmalıdır.
Dikkat çekilmek istenen ögelerde parlak ve ışıklı
renkler kullanılmalı, kullanılan yazının
okunabilirliğini sağlamak için zemin rengi için
uygun zıtlığı oluşturacak renkler tercih edilmelidir.
Okunabilirliği en fazla olan renk kombinasyonunu
beyaz zemin üzerine siyah metin rengi,
okunabilirliği en az olan renk kombinasyonunu ise
yeşil zemin üzerine kırmızı, mavi zemin üzerine ise
pembe renklerinin kullanıldığı kombinasyonlardır.
Açık zemin üzerine koyu metin rengi
kombinasyonları, koyu zemin üzerine açık metin
rengi kombinasyonlarına oranla daha fazla
önerilmektedir.
• Web ortamında metinlerin yer aldığı paragraflarda
dikkat çekilmek istenen kavramlar, farklı yazı çeşidi
veya farklı renk kullanılarak vurgulanmalıdır.
• Gerek metin kullanımında gerekse metin dışındaki
objelerde kullanıcı ilgisinin devamlılığını
sağlamaya yönelik olarak tasarımda bir ekranda
dörtten fazla renk kullanımı kullanıcının
odaklanmasını güçleştirdiğinden önerilmemektedir.
Psikolojik Etkilerine Göre Renk Kullanımı: Görsel web
tasarımında uyarıcı olarak kullanılan renkler, hedef kitle
üzerinde farklı psikolojik ve fizyolojik etkiler yaratmaktadır.
Rengin algılanması ve ortaya çıkardığı etki bağlamsal olup
kişiden kişiye farklılık gösterebilmektedir. Renklerin insanlar
üzerindeki temel psikolojik etkileri şu şekilde ifade edilebilir:
Kırmızı: Canlılığı, hareketi, heyecanı ve gücü temsil
etmektedir. Kırmızı diğer nötr renklerle birlikte
kullanıldığında vurguya katkı sağlamakla birlikte yeşil, mavi
ve mor ile uyumlu değildir. Kırmızı renk ayrıca uyarıcı bir
etkiye sahiptir.
Sarı: İyimserlik, mutluluk, idealizm, hayal gücü, olgunluk,
bereket ve ışığı temsil etmektedir. Sinir sistemini uyarıcı ve
rahatlatıcı bir etkiye sahiptir. Zıt renkler ile birlikte
kullanıldığında okunabilirliği kolay bir renktir. Özellikle gri
tonları, siyah ve mor ile uyumlu kombinasyonlar oluşturan
sarı rengi web ortamında metin ve arka plan yerine banner
tasarımında daha çok tercih edilmektedir.
Mor: Hüzün, korku ve pişmanlığı temsil etmektedir.
Yalnızlıktan hoşlanan, topluma küs insanların rengi olarak
ifade edilmektedir. Kadın dayanışmasını temel alan sivil
toplum kuruluşları tarafından gerçekleştirilen tasarımlarda
mor renk yoğun olarak kullanılmaktadır.
Mavi: Barışı, dinginliği, ahengi, umut ve güven duygusunu,
sessizliği ve rahatlığı temsil etmektedir. Dinlendirici ve
sakinleştirici bir etkiye sahiptir. Pastel renkler, soğuk renkler,
toprak tonları ve nötr renklerle uyumlu bir renktir. Web
ortamında sıklıkla kullanılan mavinin çeşitli tonlarına menü
ve banner tasarımlarında sıklıkla rastlanmaktadır.
Yeşil: Sadakati, zekâyı ve huzuru temsil etmektedir. Yeniden
doğuşun ve büyümenin sembolü olarak ifade edilmektedir.
Kırmızı gibi yeşil ile zıt renklerin bir arada kullanımına
dikkat edilmelidir. Bu şekilde bir kullanım özellikle renk
körleri için okunabilirliği güçleştirici bir etkiye sahiptir. Web
tasarımında renk uyumu bağlamında sarı turuncu ve okuma
söz konusu olmadığında kırmızıyla birlikte uygun
kombinasyonları oluşturulabilmektedir. Özellikle web
ortamında doğallık hissinin verilmesi için doğal üretim yapan
firmalar tarafından, çevre bilinci taşıdıkları hissi uyandırmak
isteyen enerji firmaları tarafından tercih edilebilmektedir.
Turuncu: Canlılığı, samimiyeti, yaşama sevincini ve
eğlenceyi temsil etmektedir. Turuncu, tasarımın dikkat
çekiciliğini sağlamak için kullanılabilecek bir renk olmakla
birlikte mavi gibi zıt renklerle birlikte kullanımına dikkat
edilmelidir.
Beyaz: Temizliği, saflığı, masumiyeti, gençliği ve ferahlığı
temsil etmektedir. Okunabilirliği en iyi düzeyde sağlaması
nedeniyle web ortamında en çok tercih edilen arka plan rengi
olarak ifade edilmektedir.
Siyah: Ağırlığı, ciddiyeti ve tehlikeyi temsil etmektedir.
Keder ve depresyonun rengi olarak da ifade edilmektedir.
Web ortamında ise arka plan yerine metin rengi olarak
kullanılabilecek renklerden biridir.
Gri: Olgunluğu, temkinliliği, üzüntüyü, gizliliği ve
güvenirliliği temsil etmektedir. Gri özellikle canlı ve parlak
renklerle birlikte uygun bir kombinasyon oluşturmaktadır.
Çeşitli zıtlık yöntemleriyle birlikte siyah ile de kullanılabilen
gri renk için web ortamında arka planda kullanım daha fazla
önerilmektedir.