CSS “Renk” Özelliği Kullanımı

Bu yazımızda, web sitelerinin rengini belirleyen, sayfalarınıza tabiri caizse renk katan ve kullanıcı deneyimini önemli derecede etkileyen CSS “renk” özelliği hakkında detaylara değineceğiz.

CSS “Renk” Özelliği

Renk konusuna daha derinlemesine dalış yapmadan önce, temelde iki önemli ayrıma odaklanmamız gerektiğini belirtmeliyim. Tasarım bağlamında, renkler özellikle “ön plan” ve “arka plan” olarak iki farklı şekilde ele alınmaktadır:

• Ön plan rengi (Foreground color)
  • color özelliği ile stilize edili
• Arka plan rengi (Background color)
  • background-color özelliği ile stilize edilir.

Peki, nedir bu ikisinin birbirinden farkı hemen onu cevaplayalım. “Ön plan rengi” (Foreground color) ile renk verilecek elementin bizzat kendisi kast edilirken, “arka plan rengi” (Background color) ile ilgili elementin sahip olduğu “kutunun” (Zira, CSS’de her bir element “kutu modeline” sahiptir) rengi kast edilir.

See the Pen CSS Renk by 1kodum (@1kodum) on CodePen.

Yukarıdaki örnekte, “Merhaba, ben renkli bir metinim!” yazısı (elementin içeriği) “açık pembe” (lightpink) bir arka plan üzerinde (ilgili elementin kutu modeli) “kırmızı” (red) olarak görünmektedir.

Fark edileceği üzere, color ve background-color özellikleri, “değer” (value) olarak “renk adları” almışlardır. CSS’de 140’tan fazla “adlandırılmış renk” bulunmaktadır. Ancak rafine zevkleri olan biriyseniz, tasarımlarınızda bu derece az renk olması size tatmin etmeyecektir. Neyse ki, CSS bize renk tanımlamak için başka yöntemlerde sunar. Bakınız:

1. Adlandırılmış Renkler: 140’tan fazla adlandırılmış renk bulunmaktadır.
2. Hexadecimal (Onaltılık) veya Hex Renkler: Onaltılık, 0’dan 9’a kadar olan sayıları ve ardından “A” dan “F” ye kadar olan harfleri içeren bir sayı sistemidir.
3. RGB: Red Green Blue kelimelerinin baş harflerinden oluşturulan bu sistem, kırmızı, mavi ve yeşil için birer değer belirten rgb() söz dizimini kullanır.
4. HSL: HSL, renk tonu (hue), doygunluk (saturation) ve parlaklık (lightness) kelimelerinin baş harflerinden oluşturulur.

Adlandırılmış renklerin özellik değerinin nasıl kullanılacağını yukarıda gösterdiğimiz için geri kalan maddeleri inceleyeceğiz.

“Hexadecimal” (Onaltılık) veya Kısaca “Hex” Renkler

Web tasarımında ve grafik tasarımda renkleri belirtmenin birçok yolu vardır ve bu yöntemlerden biri de “hexadecimal” (onaltılık) kodları kullanmaktır. Genellikle “hex” olarak adlandırılan bu kodlar, RGB Red-Green-Blue (Kırmızı-Yeşil-Mavi) renk değerlerini onaltılık tabanda temsil ederler.

“Hex” kodları genellikle diyez “#” işaretiyle başlar ve ardından renk değerleri gelir. Bu değerler 6 karakter uzunluğundadır: İlk iki karakter kırmızıyı, ortadaki iki karakter yeşili ve son iki karakter de maviyi temsil eder. Örneğin:

Renk Adı	Hex Kodu
darkseagreen	#8FBC8F
sienna	#A0522D
saddlebrown	#8B4513
brown	#A52A2A
black	#000000 #000
white	#FFFFFF #FFF
aqua	#00FFFF #0FF
red	#FF0000 #F00

Yukarıdaki tabloda verilen renk değerlerinde hem sayısal hem de alfabetik karakterlerin bir arada olduğunu gözlemleyebilirsiniz. Bunun sebebi, onaltılık (hexadecimal) sayı sisteminin toplamda 16 basamağa sahip olmasıdır. Bu sistemde, 0’dan 9’a kadar olan değerler standart rakamlarla ifade edilirken, 10’dan 15’e kadar olan değerler için ise A’dan F’ye kadar olan harfler kullanılır. Burada A, 10’u; B, 11’i; C, 12’yi; D, 13’ü; E, 14’ü ve F de 15’i temsil eder.

Bir diğer dikkatinizi çekecek husus da, “black”, “white”, “aqua” ve “red” renklerinin sahip olduğu hex kodlarının hem 6 karakter hem de 3 karakterde yazılmış olmasıdır. Eğer renkler birbirini tekrarlıyorsa bunları 3 karakterde yazabiliriz. Bu durumda şunu diyebiliriz; her üç karakterli hex renk kodu, karakterleri ikişer kez yineleyerek altı karakterli bir forma dönüştürülebilir, ancak aynı şey tersi için geçerli değildir.

Ayrıca belirtmek isterim ki, hex kodlarında bulunan harfler büyük ya da küçük olabilirler. Örneğin, #9932CC rengini #9932cc şeklinde yazabiliriz.

See the Pen CSS Hex by 1kodum (@1kodum) on CodePen.

“RGB” Renkler

RGB, “Red” (Kırmızı), “Green” (Yeşil) ve “Blue” (Mavi) kelimelerinin baş harflerinden oluşur ve bu üç temel rengin birleşimini temsil eder. Bilgisayar ekranları, televizyonlar ve diğer birçok dijital cihaz, renkleri göstermek için bu üç temel rengi kullanır.

RGB değerleri, bu üç rengin ne kadar yoğun olduğunu belirtir ve bu da milyonlarca farklı renk kombinasyonuna olanak tanır. Bu kombinasyonları yapabilmek için rgb(0-255, 0-255, 0-255) söz diziminden yararlanırız.

• RGB değerleri genellikle 0 ile 255 arasında değişen üç sayı ile ifade edilir. Örneğin:
  • Kırmızı ➡️ (255, 0, 0)
  • Yeşil ➡️ (0, 255, 0)
  • Mavi ➡️ (0, 0, 255)
  • Beyaz (tüm renkler maksimumda) ➡️ (255, 255, 255)
  • Siyah (hiç renk yok) ➡️ (0, 0, 0)

See the Pen CSS RGB by 1kodum (@1kodum) on CodePen.

Şimdiye kadar anlatılarımızı özetlersek; hem hex hem de RGB’de bulunan üç renk için üç değer bulunmaktadır. Her biri 256 değerden biri olacağı için hesapladığımızda; 256 * 256 * 256 = 16.777.216 renk sayısının olacağı görülmektedir. Bunun yaklaşık 140 adlandırılmış CSS rengiyle karşılaştırıldığında elit bir tasarım yapabilmek için oldukça ideal bir sayı olduğunu görebiliriz. Bu nedenle, tasarımlarımızda CSS renk özelliği olarak hex veya RGB değerlerini yaygın bir şekilde kullanırız.

“HSL” Renkler

HSL, “Hue” (Renk Tonu), “Saturation” (Doygunluk) ve “Lightness” (Aydınlık) kelimelerinin baş harflerinden oluşur. HSL, renkleri, ton (bir çember üzerindeki açı olarak), doygunluk ve parlaklık olarak üç bileşene ayırarak tanımlar. Bu, renklerle çalışmayı bazen daha sezgisel hale getirir.

• Hue (Renk Tonu): 0 ile 360 arasında bir değer alır ve temel renkleri temsil eder. 0 (veya 360) kırmızıyı, 120 yeşili ve 240 maviyi temsil eder.
• Saturation (Doygunluk): %0’dan %100’e kadar olan değerlerle belirtilir. %0, gri bir renk tonu (tamamen doygun olmayan) ve %100 tamamen doygun bir renk tonu anlamına gelir.
• Lightness (Aydınlık): %0’dan %100’e kadar olan değerlerle belirtilir. %0 tamamen siyah, %100 tamamen beyazdır ve %50 normal aydınlıkta renk tonunu verir.

HSL söz dizimi, RGB’ninki ile benzerlik gösterse de aralarında önemli farklar bulunmaktadır. Bakınız: hsl(0-360, 0-100%, 0-100%) İlk numara, tonun derecesini temsil eder ve 0 ile 360 arasında olabilir. İkinci ve üçüncü numaralar sırasıyla doyma ve parlaklığı temsil eden yüzdeliklerdir (haliyle 0 ile 100 arasında olur).

Kırmızı 0 derecedir, Yeşil 120 derecedir, Mavi 240 derecedir ve sonra 360’da Kırmızıya geri döner. Aşağıda bir renk tekerleği örneğini görebilirsiniz.

See the Pen CSS HSL by 1kodum (@1kodum) on CodePen.

“Opacity” ve “Alpha” Değerleri

CSS’de renklerle çalışırken renklerin şeffaflığını belirlemek için “opacity” ve “alpha” adında iki ana yöntem kullanılır.

CSS Opacity (Opaklık)

Bu özellik, bir HTML öğesinin şeffaflığını kontrol eder. 0 ile 1 arasında değerler alır. 0, tamamen şeffaflığı ifade ederken, 1.0 tamamen opaklığı anlatır. Ayrıca belirtmeliyim ki, “Opacity” değeri sadece renk değil, aynı zamanda öğenin içeriği, sınırı ve arka planı üzerinde de etkilidir. Örneğin, aşağıdaki kod parçası, öğeye %50 şeffaflık kazandırır:

CSS Alpha (Alfa)

RGB ve HSL ile oluşturulmuş renk kodlarına alfa (a) değeri ekleyerek renklerin şeffaflığını kontrol edebiliriz. Bu durumda söz dizimleri aşağıdaki gibi olur:

• rgba(Red, Green, Blue, Alpha)
• hsla(Hue, Saturation, Lightness, Alpha)

Alfa değeri (a) 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir değer alır. Alfa 0 ise, renk tamamen saydam olacaktır. Alfa 1 ise, renk opak olacaktır. Haliyle yarı saydam bir değer 0.5 olacaktır.

See the Pen CSS Renk Özelliği by 1kodum (@1kodum) on CodePen.