Tabi ki olmazsa olmaz olan HTML ile oluşturacağımız internet sayfasında belirli kısımların belirli bir renkte görünmesini istediğimizdir. Belirli alanları istediğimiz renk düzeni içinde renklendirmek iyi bir kullanıcı deneyimi sunacağı gibi o internet sayfasını da güzel bir görünüme kavuşturacaktır. Bu konuda ise bizler CSS3 renk ekleme işlemini birden fazla şekilde gerçekleştirebiliriz. Bunlar :
- CSS Renk İsimleri
- CSS RGB Renk Ekleme
- CSS HEX Renk Ekleme
- CSS HSL Renk Ekleme
- CSS RGBA Renk Ekleme
- CSS HSLA Renk Ekleme
isimleri başlığında 6 farklı şekilde HTML ile oluşturulan internet sayfasına renk ekleyebiliriz. Her biri farklı bir şekilde söz dizimine sahip olup bu şekilde renk ekleme işlemini gerçekleştirebiliriz. İsterseniz sırasıyla şimdi hangi yöntem ile nasıl ekleme işlemini yapabileceğimize geçelim.
CSS Renk İsimleri
Aslında en kolay olan yöntemlerden bir tanesi olan renk isimleri ile internet sayfamızı renklendirmek çok kolaydır. Bu yöntem aslında 140 farklı şekilde renk ismini içermektedir. Yani neredeyse hemen hemen aklınıza gelebilecek İngilizce olarak renk isimleri için yeterli bir sayıdır.
<h1 style="background-color:black";>Birinci başlık</h1>
Yukarıda yer alan ve aşağıda yer alacak kod satırlarında ise bizler bir “<h1>” etiketine arka plan rengi ekleme işlemini gerçekleştireceğiz. Yukarıda ise bizler Türkçeye çevirdiğimizde siyah anlamına gelen “black” kelimesini kullanarak bu etiketin arka plan rengini siyah olarak belirlemiş bulunuyoruz. Bunun yanında aklınıza gelebilecek olan klasikleşmiş red, green gibi renk isimlerinin yanında tomoto, darkgray, aliceblue gibi renk isimlerini de kullanabilirsiniz.
CSS RGB Kullanımı
Bu renk ekleme yönteminde ise aşina olduğumuz RGB kelimesi red, green ve blue ‘nun birleşiminden oluşmaktadır. Kırmızı, yeşil ve mavi rengin karışımından oluşacak olan değerlerdir. Örneğin eğer kırmızı rengi tam baskın bir şekilde göstermek istiyor isek en yüksek değeri 255 olur iken diğer parametrelere 0 verir isek kırmızı renk baskın bir şekilde karşımıza çıkacaktır.
<h1 style="background-color:rgb(255, 0, 0)";>İkinci başlık</h1>
Yukarıda ise bizler ilk parametre olan kırmızıya en yüksek değeri ve diğer yeşil ve mavi parametrelere ise en küçük değer olan 0 değerini verdiğimizde karşımıza kırmızı renk gelecektir. Beyaz rengi görüntülemek için ise tüm renk parametreli en yüksek değer 255 olması gerekirken siyah rengi görüntülemek için ise tüm renk parametrelerinin 0 değerinde olması gerekmektedir.
CSS HEX Kullanımı
Bu CSS renk ekleme yöntemi ise HTML’de, formdaki onaltılı bir değer kullanılarak bir renk belirtilebilir: Ekleme yötenmi ise #rrggbb ‘dir. Rr (kırmızı), gg (yeşil) ve bb (mavi), 00 ve ff (onluk 0-255 ile aynı) arasında onaltılık değerler olduğunda. Örneğin, # ff0000 kırmızı olarak görüntülenir, çünkü kırmızı en yüksek değerine (ff) ayarlanır ve diğerleri en düşük değere (00) ayarlanır.
<h1 style=”background-color:#0000ff”;>Üçüncü başlık</h1>
Yukarıda ise görmüş olduğunuz şekilde mavi değerine en yüksek değer olan ff ‘i verdiğimiz için karşımıza arka planı bir mavi olan “Üçüncü başlık” yazısı gelecektir.
CSS HSL Kullanımı
HTML’de, formdaki renk tonu, doygunluk ve açıklık (HSL) bir renk belirtilebilir: Bu renk ekleme yöntemi hsl (ton, doygunluk, hafiflik) olarak karşımıza çıkmaktadır. Ton, renk tekerleğinin 0 ile 360 arası bir derece vardır. 0 kırmızı, 120 yeşil ve 240 mavidir. Doygunluk bir yüzde değerdir, % 0 gri tonu anlamına gelir, % 100 tam renklidir. Hafiflik ise yüzde,% 0 siyah, % 50 ne açık, koyu,% 100 beyazdır.
<h1 style="background-color:hsl(0,100%,60%";>Dördüncü başlık</h1>
Bu sefer ise bizler ilk parametre olan ton ‘a 0 değerini vererek “kırmızı” olmasını istemiş bulunduk. Bu rengin ise %100 ‘lük bir renk tonuna sahip olup hafifliğini %60 yaparak biraz açık bir kırmızı renk elde etmiştik. Eğer %50 yapsaydık tam bir kırmızı elde edecektir. %50 ‘den daha düşük bir değer verseydik biraz kapalı bir kırmızı elde edecektir.
CSS RGBA Kullanımı
Yukarıda eklemiş olduğumuz CSS RGB renk ekleme yöntemi ile bir farklılığı olduğu aşikar fakat bu farklılık ise bizim transparanlığı belirlemekten kaynaklanmaktadır. RGBA renk noktaları, bir renk için opaklığı belirten bir alfa kanalı olan RGB renk değerlerinin bir uzantısıdır. Bir RGBA renk değeri şu şekilde belirtilir: rgba (kırmızı, yeşil, mavi, alfa). Alfa parametresi 0.0 (sıfır) ve 1,0 (saydam değil) arasında bir sayıdır.
<h1 style="background-color:rgba(255,0,0,0.3";>Beşinci başlık</h1>
Yukarıda ise normal ekleyeceğimiz rgb renk ekleme yönteminden sonrasında bir virgül daha koyarak alfa parametresini belirtebiliriz. Yukarıda vermiş olduğumuz olduğumuz “0.3” değeri ise saydamlığa yakın fakat tam saydam bir değer değildir. Bu sayede renginizi saydamlık olarak 0 ‘a yaklaştıkça değeri artacak 1 ‘e yaklaştıkça ise saydamlık değeri azalacaktır.
CSS HSLA Kullanımı
Yukarıda öğrenmiş olduğumuz CSS HSL renk ekleme yöntemi ile benzer olan bu renk ekleme yönteminde ise “a” harfi bizim için alfa ‘yı temsil etmektedir. HSLA renk değerleri, bir renk için opaklığı belirten bir alfa kanalı olan HSL renk değerlerinin bir uzantısıdır. Bir HSLA renk değeri şu şekilde belirtilir: hsla (ton, doygunluk, hafiflik, alfa). Alfa parametresi 0.0 (sıfır) ve 1,0 (saydam değil) arasında bir sayıdır.
<h1 style="background-color:hsla(0,100%,60%,0.5)";>Altıncı başlık</h1
Yukarıda ise aslında biz HSL renk ekleme yöntemi ile eklediğimiz renge bir transparanlık eklemiş bulunuyoruz. Bunun için ise normal HSL renk parametrelerini yazdıktan sonrasında bir virgül daha koyarak transparanlık değerini belirtmiş olduk.