Merhabalar, bu haftaki yazımda CSS3’te renk tanımlamalarını ele alacağım.

CSS’te renkleri tanımlamak için çeşitli sistemler mevcut:

  • Anahtar Kelimeler (Color Keywords)
  • RGB
  • RGBA
  • HSL
  • HSLA
  • Hexadecimal

Anahtar Kelimeler (Color Keywords)

Belirli anahtar kelimelere sahip 140 renkten birini tanımlarken kullanabileceğimiz basit bir yöntemdir. Çeşitlilik az olduğundan pek tercih edilmez. color () parametresi ile tanımlanır.

Aşağıda temel renklerden bazılarını ve anahtar kelimelerini görebilirsiniz.

Örneğin:

p {
  color: red;
}

RGB (Red-Green-Blue) Renk Değerleri

Açılımı kırmızı, yeşil ve maviden oluşan RGB gösteriminde bu üç renkten ne kadar kullanacağımızı belirtmiş oluyoruz. Her bir renk 0 ile 255 arasında olmak üzere toplamda 256 değer alabilir. Ayrıca 0 ile 100 arasında yüzdelik bir değer de alabilir. Bu durumda bu üç rengin karışımıyla yaklaşık 16 milyon farklı renk elde edebiliriz. Gösteriminde ise rgb() parametresi kullanılır.

Bu sistemi kullanırken dikkat etmemiz gereken bazı noktalar şunlardır:

  • Üç değerin de 0 olması durumu siyaha eşittir.
  • Üç değerin de 255 veya %100 olması durumu beyaza eşittir.

Aşağıda siyah bir paragraf, beyaz bir h1 ve mor bir sırasız listenin stil kodlamasını görebilirsiniz.

p { 
   color: rgb(0, 0, 0); 
}              
h1 { 
   color: rgb(255, 255, 255); 
} 
ul { 
   color: rgb(128, 80, 200); 
}

Yüzdelik olarak;

p {
   color: rgb(0%, 0%, 0%); 
}              
h1 { 
   color: rgb(100%, 100%, 100%); 
} 
ul { 
   color: rgb(50%, 0%, 50%); 
}

RGBA Renk Değerleri

Basitçe RGB’nin aynısıdır, tek farkı RGB’ye ek olarak dördüncü bir değer olan A (Alfa) değeri ile saydamlığın ayarlanabilmesidir. Gösterimi rgba() şeklindedir.

Alfa değeri 0.0 (tam saydam) ile 1.0 (tam opak) aralığındadır.

rgba(255,0,0,0.5)
rgba(100%,0%,0%,0.5)

HSL (Hue-Saturation-Lightness)

Açılımından da anlaşılacağı üzere HSL; renk tonunu, doygunluğunu ve ışık bileşenini ayarlama imkanı sunan bir sistemdir. hsl(x, x%, x%) şeklinde ifade edilir. Pek sık kullanılmasa da RGB’den daha sezgisel olması sebebiyle son zamanlarda tercih edilmeye başlanmıştır.

Aşağıdaki şekil HSL sisteminin özeti sayılabilir:

İlk değer olan Hue yani ton, renk çemberinin bir açısının derecesini temsil eder. Renklerin derecelendirmesi aşağıdaki şekildeki gibidir.

İkinci değer olan Saturation ise doygunluk anlamına gelir. 0 doymamış ve 100 doymuş olmak üzere yüzde ile ifade edilir.

Üçüncü değer olan ışık miktarı da aynı şekilde 0 karanlık ve 100 beyaz olmak üzere yüzde ile ifade edilir.

Örneğin:

body {
     color: hsl(30, 100%, 50%);
     background-color: hsl(120, 100%, 50%);
}

HSLA

HSLA, RGB-RGBA’da olduğu gibi HSL’nin alfa değeri (saydamlık ayarı) bulunan versiyonudur.

h1 {
   background-color: hsla(240, 25%, 50%, .5);
}

Hexadecimal Renk değerleri

Bu sistemde de RGB’de olduğu gibi renkler kırmızı, yeşil ve mavi baz alınarak oluşturulur. Yalnız burada on altılık sayı sisteminden (0 , 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f) yararlanılır. #XXXXXX şeklinde ifade edilen Hex renklerin ilk iki basamağı kırmızı, sonraki ikisi yeşil, son ikisi de maviyi temsil eder. Aynı şekilde daha küçük değerler daha koyu renkleri verir. Dolayısıyla #000000 siyahı, #ffffff ise beyazı belirtir.

p { 
   color: #000000; 
}
h1 { 
   color: #ffffff; 
}
h1 { 
   color: #aaaaaa; 
}
ul { 
   color: #8050c8; 
}

Üç rengin her iki değeri de aynı ise değerler tekrarlamadan 3 haneli şekilde yazılabilir. Örn: #ff0000 yerine #f00)

Kaynakça

Görüntülenme Sayısı:
129 views