HTML DERS 7: HTML’de Renkler(HTML Colors)
Geldik dersin en ‘renkli’ konusuna :) İnternet sayfalarınızı renklendirmenin bir kaç yolu bulunmakta. Bunlar style attribute’ü üzerinde birçok HTML ve CSS etiketini manipüle etmeye yarar. Bu yollara tek tek göz atalım:
1. Yol: Renk İsmi Değeri
HTML’de renklendirme yapmanın en kolay yolu renk isimlerini kullanmaktır. Renk isimleri tabi ki İngilizce olacak!
1.1 Yazıyı rengini değiştirme
Bir paragraf öğesinin font rengini değiştirmek istersek bunu şu şekilde yapabiliriz.
Görüldüğü üzere h3 öğesi içinde paragraf öğesi içinde yöntem aynıdır.
1.2 Metin arka planını renklendirme
Yazıyı değil yazının arka planını değiştirmek istersek style attribute’ünün background-color özelliğini(property) kullanırız:
Tabi ki hem metni hem de metin arkaplanını aynı anda da değiştirebiliriz:
1.3 Kenarlık(border) renklendirme
Daha önce size border’lardan bahsetmemiştim. Çünkü bu konuya CSS’te gireceğiz ama kısaca ne olduğunu anlatayım. Border’lar yazı, resim gibi öğelerin kenar sınırlarının çizilmesini sağlar. Mesela:
Yukarıdaki görselden anlaşılacağı üzere kenarlıkların bu tarz bu görünüşü var. Pendik nasıl renklendirebiliriz. Bunun için solif-color özelliğini kullanacağız Aşağıdaki görseli çok iyi incelemenizi öneriyorum.
Gördüğünüz gibi hem kenarlıkların rengini hem kenarlıkların iç kısmını(backgorund) hemde kenarlıkların içindeki metnin rengini değiştirebiliyoruz. Daha ilginç olansa 1 pikselli kenarlıkta sadece metin rengini değiştirmeme rağmen kenarlık enginin de otomatikmen değişmesiydi.(Farketmediyseniz tekrar inceleyin) Yazılımcılar olarak biz bunun adına miras ya da kalıtım diyoruz. Kalıtım bir öğenin değerinin başka bir öğeninkine göre uyarlanmasıdır. HTML’de metin rengi varsayılan olarak siyahtır. Ancak görüyoruz ki kenarlıkalrın rengi varsayılan olarak siyah değildir. Kenarlık rengi metni içeren öğenin(üstteki görselde h1 öğesidir.) renginden kalıtım almıştır. CSS konusuna geçtiğimizde kalıtım almanın nasıl yapılacağını ve işlerimizi ne kadar kolaylaştırdığını beraber göreceğiz. Şimdilik konumuza devam edelim.
Öğelerin renklerinin nasıl değiştirildiğine dair bazı örnekler verdim. Eğer diğer standart renk isimlerini de öğrenmek isterseniz buraya tıklayabilirsiniz.
2. Yol: rgb() ve rgba() Renk Değeri Yapıları
2.1 rgb()
Renk isimleri iyi hoş ama sınırlılar. Mesela Adaçayı yeşili ile magenta arasında bir renk istersem ne yapacağım yazılımcıların bir gün böyle bir renk adı çıkarmasını mı bekleyeceğim? Ya da renk isimlerini kullanarak beyazdan turkuaza doğru giden ve sonra siyaha dönerek bu işlemi tekrar eden bir hareketli bir buton tasarlamak istediniz. Butonunuzun renk tonları şöyle olsun:
Eğer böyle bir ton geçişini renk isimleri kullanarak yapmak isterseniz ortaya iyi bir renk dağılımı çıkmaz. Çünkü görselde gördüğünüz her bir rengin HTML’de bir adı yok. Elinizde olanları kullanırsanız da butonun renk geçişleri bariz şekilde belli olacaktır. Ancak çok daha az hissedilir geçişler istiyorsak ne yapacağız? Bunlar için rgb renk değer yapıları kullanabiliriz rgb() renk değer yapılarının söz dizimi(syntax) çok basittir:
rgb(Kırmızı renk değeri, Yeşil renk değeri, Mavi renk değeri)
Işığı oluşturan 3 ana renk vardır. Bunlar Kırmızı Mavi ve Yeşil(Sarı diye düşünüyorsanız o ışığın değil boyaların renklerinde oluyor) Işığın her bir rengi aslında bu 3 ana rengin farklı oranlarında karışmasından ibaretse. Biz sadece bu oranları vererek bilgisayarda her türlü rengi oluşturabiliriz değil mi? İşte bunun için rgb’den yararlanıyoruz. rgb red(kırmızı), green(yeşil) ve blue(mavi) kelimelerinin ilk harfleri ile oluşturulmuştur. rgb’de 3 ana rengin her birine 0 ile 255 arasında bir değer verilir. Bu renklerin baskınlığını ifade eder. Mesela tüm renk değerlerine 0 verirsek bu siyah renktir. 255 değeri verirsek ise beyaz renge ulaşırız. Şimdi Bazı renklerin RGB değerlerine bakalım:
Veya grinin tonlarına:
Sanıyorum ne demek istediğimi anladınız. Peki her bir rengin renk ağırlıklarını nereden bileceğiz? Yani pembe dediğimde kırmızı x yeşil y mavi ise z kadar olacaktır diyemeyiz ya! Bunun için color picker dediğimiz renk değerlerini veren sitelerden destek alabiliriz. İnternette yığınla var. Ben şimdilik bir tanesini BURAYA bıraktım. Şimdi birkaç öğede bunu nasıl kullanacağımıza bakalım:
Görüldüğü gibi gayet basit. Dediğim gibi kenarlık konusuna takılmayın bu konu CSS’te işlenecek.
2.2 rgba()
rgba() renk değeri yapısına alfa kanalı parametresi eklenmiş halidir. Nedir bu Alfa kanalı parametresi rengin şeffaflık ayarlarını belirleyen parametredir. 0–255 arası değil 0.0–1.0 arası değer alır. Bu değer 1.0 ise renk tamamen görünür(rgb ile aynı olur) 0.0 ise renk görünmez bir nevi %100 şeffaf olur. hadi bir kaç örneğine bakalım:
3. Yol: hex Renk Değeri
Eğer Matematikteki Taban Aritmetiği(Radix) hakkında hiçbir bilginiz yoksa bu konuyu anlamakta zorlanabilirsiniz. Eğer sayı tabanlarının ne olduğunu hızlıca öğrenmek istiyorsanız burada tıklayın. Yine de anlamazsanız pes etmeyin, bu konuyu köşeye ayırın ve bilgi seviyeniz arttıkça tekrar gözden geçirin. Aslında çok kolay olduğunu kendi gözlerinizle göreceksiniz.hex renk değeri rgb’ye benzeyen, ancak 16'lık sayı sistemi kullanılarak belirtilen renk değeridir. rgb() renk değer yapısında parametrelerinin 0 ile 255 arasında olduğunu söylemiştim. Bu değer aralığı 10'luk sayı sisteminde yazılmıştır. hex ise hexadecimal yani 16'lık tabandaki sayı sisteminde yazılmıştır. 0 yerine 00 255 yerine ise FF sayılarını yazarız. hex renk değerinin sözdizimi şu şekildedir:
#kkyymm
Buradaki k harfi kırmızıyı y harfi şekili m harfi ise maviyi temsil etmektedir . # Sembolü ise yazılacak sayıların 16'lık tabanda yazılacağını ifade eder. Her harften 2 tane olması ise her sayının 2 basamaklı olacağını ifade eder.
mesela rgb(13, 255, 0) şeklinde yazılan bir renk değerini hex renk değeri olarak çevirmek istersek:
13 = d
255 = ff
0 = 0
olacaktır. Ancak hepsinin iki basamak olarak yazılması gerektiğinden dolayı
13 = 0d
255 = ff
0 = 00
olarak yazılır. O halde birleştirirsek:
rgb(13, 255, 0) sayı değeri hex renk değerinde #0DFF00 olarak yazılır. Bir kaç örnekle bakalım:
Şimdi kod üzerinde görelim:
Eğer rgb renk değerlerinin hex renk değeri karşılıklarını görmek isterseniz buraya tıklayabilirsiniz. Şimdi gelelim son renk değerimize:
3. Yol: hsl() ve hsla()
3.1 hsl()
İlk olarak söz dizinimizi inceleyelim:
hsl(hue, saturation, lightness)
hue: renk tonunu temsil eder. 0–360 arası bir değer alır. 0 derece tam kırmızı, 120 derece tam yeşil ve 240 derece tam maviyi temsil eder.
saturation: Renk doygunluğunu temsil eder. 0–100 arası değer alır ve değer sonuna % işareti eklenir. 0% saturasyon renk doygunluğunun hiç olmaması durumudur. Hue ne olursa olsun gri rengi temsil ederken. %100 saturasyon tam renk doygunluğunu gösterir. Yani rengin en yoğun halidir. Hue değerinin en yoğun halini verir.
lightness: Işık oranını gösterir. 0–100 arası değer alır ve değer sonuna % işareti eklenir. %0 olması hiç ışık olmadığı anlamına gelir. Hue ne olursa olsun hiç ışık olmadığı için renk gözükmez ve siyah renk oluşur. %50 lightness rengin en doğal ışığıdır hue’nun en belirgin hali bu ışık oranında görünür. %100 ise ışık ışığın full olduğu durumdur. Hue ne olursa beyaz rengi verir.
Kafanız karıştıysa birde örnekler üzerinden bakalım:
Saturasyonun renklere etkisi:
Işık oranının renklere etkisi:
Grinin tonları:
Kod üzerinde bakmak istersek:
3.1 hsla()
rgba() renk değeri yapısı gibi hsla()’da da a harfi alfa kanalını belirtir ve bize şeffaflığı ayarlama imkanı verir.
Kod üzerinde bakalım:
Bonus: Neden Bu Kadar Fazla Renk Değeri Türü Var?
Farklı renk gösterimleri farklı işlerde kullanmaktadır. Özellikle renklerin dinamik olarak değişmesi gereken durumlarda HSL/HSLA kullanmak RGB/RGBA kullanışlı olabiliyor. Mesela hsla ile saturasyon ve ışığı değiştirmeden renk tonları arası geçişi otomatik yapmak istediğimizde bunu JavaScript’e oluşturacağımız tek bir değişken ile yapabiliriz. Eğer bunun için RGB kullanmaya kalkarsak, aynı renk tonlarına ulaşmak için en az 3 değişken ve bir yığın işlem gerekmektedir. Bunları ileri de kullandığımızda daha iyi anlayacağız. Bugünlük de bu kadar yeter. Bir sonraki derste görüşmek üzere!
