HTML DERSLERİ 6

Renk Tanımlamaları

İkinci bölüm sonunda sayfamızı renklendirmek için;

<body bgcolor="blue" text="white">

kodunu kullanmıştık. Tarayıcıların önemli bir kısmı İngilizce adları ile tanımlanmış renkleri algılayabilirler. Yukarıdaki kodumuzda <body> etiketimize bgcolor özelliğini eklemiş ve değer olarak da blue (mavi) rengi tanımlamıştık. Böylece web sayfamızın arka plan rengini mavi yapmış ve text özelliğinde white (beyaz) rengi kullanarak yazılarımızın beyaz renkte görünmesini sağlamıştık.

Web sayfalarımızı tasarlarken aşağıdaki renklerin İngilizce adlarını kullanabiliriz.

siyah gümüş gri beyaz kırmızı bordo
           
black silver gray white red maroon
 
mor galibarda yeşil çim zeytin sarı
           
purple fuchisa green lime olive yellow
 
altuni turuncu mavi lacivert teal turkuvaz
           
gold orange blue navy teal aqua

Kaynak: https://tr.wikipedia.org/wiki/Web_renkleri

Pekiyi bu renklerin dışındaki renk tonlarını nasıl oluşturabiliriz?

Bunu yapabilmek için bilmeliyiz ki; renkler hexadecimal veya RGB kod denilen iki farklı kodlama yöntemi ile kodlanmıştır. Öncelikle RGB kod nedir onu öğrenelim.

RGB ana renkler olan Red (Kırmızı) - Green (Yeşil) - Blue(Mavi) renklerinin baş harflerinden oluşur.

Bir renk, 0 ile 255 arasında bir değer alabilir. Saf kırmızı renk elde etmek için R alabileceği en üst renk seviyesini alıp, G ve B’nin alacağı renk kodunu sıfırlarız. Bunu kodlarken rgb(255,0,0) şeklinde belirtiriz. Mavi renk elde edebilmek içinse, maviyi en üst değer ile, diğer renkleri de sıfır değeri ile kullanmalıyız. Saf mavi için kodumuz rgb(0,0,255) olmalıdır.

				
rgb(255,0,0) rgb(0,0,255)

Soru: Saf yeşil için kodumuz ne olmalıdır?

RGB renk tanımlamalarını HTML içinde kullanmak yerine, CSS ile yapılan tanımlamalarda kullanmalıyız. CSS konusuna bir sonraki bölümlerde yer verilmiştir.

Tamam, ama hala ara renkleri elde edemedik değil mi? Örneğin açık yeşil için nasıl bir RGB kodu yazılmalı?
Örneğin rgb(0,255,127)

				
rgb(0,255,0) rgb(0,255,127)

Gördüğünüz gibi tam yeşil için sadece G değerini en üst değerde tutup diğer renkleri 0 değerine indiriyorduk fakat B değerini 0 yerine 127 değerine yükselttiğimizde açık yeşil elde etmiş olduk. Yani yeşil renk (G) tamamen en üst değerde ve mavi renk (B) alabileceği en üst değerin yarısında değer aldı. (255 üzerinden 127)
Böylece üç ana rengi farklı değerler ile kullanarak çok büyük bir ölçekte farklı renk tonları elde edebiliyoruz.

Renk elde edebilmenin ikinci yöntemi hexadecimal kodlamadır. Hexadecimal kodlama 16’lı sayı sistemi ile kodlama demektir. Onlu sayı sistemini okula başladığımız günden beri öğreniyoruz. Bu sisteme göre kullanılabilecek en küçük rakam 0, en büyük rakam 9’dur ve kullanılabilecek tüm rakamlar 10 adettir.

Benzer şekilde 16’lı sayı sisteminde de en küçük rakam sembolü 0 ve en büyük rakam sembolü F’dir. Bu sayı sisteminde kullanılabilecek rakam sembolleri de 16 adettir.

Bu semboller;
En küçük değer 0 olmak üzere,
1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D ve
En büyük değer F’dir. (Toplam 16 sembol bulunduğunu görebilirsiniz.)

RGB kod sisteminde alınabilecek değerler 0 ve 255 kapalı aralığındayken, Hexadecimal sistemde bu değerler 00 ile FF kapalı aralığındadır.
Örneğin rgb(255,0,0) saf kırmızı rengi hexadecimal kodla #FF0000 olarak belirtilir.
Aynı şekilde rgb(0,0,255) saf mavi renk hexadecimal kodla #0000FF olarak belirtilir.

Bu sistemlerle oluşturulabilecek renk tonu 256 x 256 x 256 = 16.777.216 adettir.

Şimdi;
				<body bgcolor="blue" text="white">
				

kodumuzdaki renk değerlerini blue için rgb(0,0,255) ve white için de #FFFFFF olarak değiştirelim.

				<body bgcolor="RGB(0,0,255)" text="# FFFFFF">
				
Not: Tüm renkleri son değerde kullanırsak beyaz elde ederiz.
Tüm renk değerlerini sıfırlarsak siyah elde ederiz.
bgcolor özelliğini <td> etiketi içinde de kullanabiliriz.
HTML içinde rgb yerine, hexadecimal renk kodlaması kullanılır.
CSS ile rgb kodlama da kullanılabilir.