myNotlar Logo

Renk Tanımlamaları ve Gösterimleri


JavaScript kodlarında ve HTML sayfalarda renkler, isimlendirilmiş renkler ve RGB renkleri kullanılarak belirlenmektedir. İsimlendirilmiş Renkler, "red" ve "green" gibi belli bir isme sahip olan renklerdir. RGB renkleri ise Kırmızı (Red), Yeşil (Green) ve Mavi (Blue) renklerin ayrı ayrı aldığı sayısal değerlere göre belirlenen renklerdir. Ayrıca ilgili renk özelliğine transparent değeri atanarak saydam olması sağlanabilir. Bu durumda kenarlık veya yazı gibi renk değeri atanan nesne bileşeni doküman üzerinde bir alan kaplayacak fakat, görünmeyecektir.

Renklerin Tanımlanması

HTML sayfalarda renkler belirlenirken, tarayıcıların yeni özellikleriyle birlikte renklere saydamlık özelliği eklenebilmekte ve RGB harici, HSL gibi farklı renk sistemleri kullanabilmektedir. Fakat, bu özellikler veya kullanım şekilleri tüm tarayıcılarda ortak değildir. Bu yüzden burada sadece tüm tarayıcılarda ortak olan renk ismi ile tanımlama ile dört farklı RGB renk değeri tanımlaması gösterilmektedir.

Toplamda beş çeşit olan renk belirleme yöntemlerinin ilki olan renk ismi atama yöntemi, ilgili renk özelliğine HTML Renk Tablosunda gösterilen renk isimlerinden biri direk atanarak uygulanmaktadır. Diğer dört çeşit renk belirleme yöntemi, RGB renklerine ayrı ayrı sayısal değer atanmasıyla uygulanmaktadır. Bunlar aşağıda gösterilmektedir.

1. Kısa RGB Kodu ile Renk Belirleme

color: #39B;

Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0..F arası heksadesimal değer alabilirler.

En fazla renk değeri : #FFF = 4096

2. RGB Kodu ile Renk Belirleme

background-color: #3090B0;

Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0..FF arası heksadesimal değer alabilirler.

En fazla renk değeri : #FFFFFF = 16.777.216

3. Tam Sayı Değer ile Renk Belirleme

border-color: rgb(255, 255, 255);

Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0..255 arası tam sayı değer alarak üstteki örnekteki gibi gösterilir.

En fazla renk değeri : rgb(255, 255, 255) = 16.777.216

4. Yüzde Değer ile Renk Belirleme

border-bottom-color: rgb(90%, 80%, 35%);
border-bottom-color: rgb(90.0%, 80.0%, 35.0%);

Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0..100 arası kayar noktalı sayı değeri alarak üstteki örnekteki gibi gösterilir.

En fazla renk değeri : rgb(100%, 100%, 100%) = 1,000,000

Teorik olarak yüzde değerleri kayar noktalı değer oldukları için her üç renk için noktadan sonra .0 ile .9 arası değer alabildikleri düşünüldüğünde en fazla renk değeri miktarına üç farklı renk için 3 sıfır daha eklenerek 1.000.000.000 elde edilebilir. Fakat böyle bir değerin veya hassasiyetin elle kontrolü mümkün olamayacağı için pek pratik olmayacaktır.

Kayar noktalı yüzde değerlerinin renklerde farklılık oluşturduğunu test etmek için aşağıdaki iki kutucuk görünecek şekilde bu sayfanın ekran görüntüsünü* alarak Paint programındaki Pick aracını kullanarak aralarındaki değer farkını görebilirsiniz.

  • * Ekran görüntüsü almak için PrtScr (Print Screen) tuşlarını kullanabilirsiniz.
  • * Ekran renk derinliğinin 24 bit veya 32 bit olması, aradaki renk farkının daha net görünmesi için faydalı olacaktır. 16 bit olması durumunda renkler büyük ihtimalle fark etmeyecektir.

background-color:rgb(35.0%, 80.0%, 90.0%)

background-color:rgb(35.9%, 80.9%, 90.9%)

Renk Gösterimleri

color: green;                 // Renk adı ile belirlenmesi

color: #fff;                  // Kısa RGB Kodu ile
color: #ffffff;               // RGB Kodu ile
color: rgb(255, 255, 255);    // Tam Sayı Değer ile
color: rgb(100%, 100%, 100%); // Yüzde Değer ile

HTML Temel Renk Değerleri

HTML 4.01 sürümü ile toplam 16 tane renk tanımlanmıştır. CSS 2.1 ile orange isimli #FFA500 kodlu yeni bir renk eklenerek standart toplam 17 renk olmuştur.


Renk Adı
Kısa Heksadesimal Kodu
Heksadesimal Kodu
Yüzde Değeri
Tamsayı Değeri
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |