CSS3 Color (Renk) Modülü

CSS3 Başlangıç yazısında CSS3 ile beraber artık modül kavramının geliştirildiğinden bahsetmiştim. Bu yazımda da Color yani renk özelliklerinden bahsederek modüllere yavaştan giriş yapalım istedim. Burada yazacaklarımdan bir kısmı CSS2 ve öncesinde de mevcuttu ancak hiç sürüm karmaşasına girmeye niyetim yok. Biz en güncel haliyle CSS3’ün renk özelliklerini nasıl kullanacağımızı inceleyelim.

CSS3 Renk Modülü

Css ile nesnelerin rengini belirlemek için “color” özelliğini (attribute) kullanmaktayız. Mevzu bahis tasarım olduğundan renk konusunun sanırım ne kadar önemli ve temel bir konu olduğunu belirtmeme gerek yok. Bu nedenle “color”‘ın kullanımını anlatarak modül konusuna başlamayı uygun buldum.

CSS3 “color” modülünü nesnelere renk verirken kullanmaktayız. Mantık olarak kırmızı, mavi ve yeşil (Red, Green, Blue – RGB) renklerinin kombinasyonları kullanılarak, istenilen renkler üretili. Bu renklendirme işini 6 farklı şekilde yaparız. Bu kullanım şekillerinden hangisini kullanacağınız tamamen sizin tercihinize kalmıştır.

1. Heksadesimal (On Altılı Sayı Sistemi) Gösterimi

En bilinen şekliyle CSS3’te renkler heksadesimal yani on altılı sayı sistemi ile gösterilir. Bu gösterimde her değerin başına diyez (#) işareti konulur. Bu sistemin kullanılışı aşağıdaki gibidir:

[css].metin {color:#FF0000} – Kırmızı
.metin {color:#00FF00} – Yeşil
.metin {color:#0000FF} – Mavi[/css]

Renk listesi

En çok kullanılan renklerin heksadesimal sistemdeki değerlerine şuradan ulaşabilirsiniz.

2. Ön Tanımlı Renkler

CSS3’te tüm tarayıcılar tarafından kabul edilen 147 adet ön tanımlı renk vardır. Diğer bir deyişle rengin heksadesimal ya da RGB kodunu kullanmak yerine doğrudan renk için tanımlanmış ismi kullanabilirsiniz. Kullanımı şu şekildedir:

[css].metin {color:red} – Kırmızı
.metin {color:green} – Yeşil
.metin {color:blue} – Mavi[/css]

CSS3’te ön tanımlı tüm renklerin isimlerine şuradan ulaşabilirsiniz.

3. RGB Gösterimi

CSS3’te renklerin kırmızı, yeşil ve mavinin karışımı ile üretildiğini değinmiştim. İşte bu gösterimde kısaca ne kadar kırmızı, ne kadar yeşil ve ne kadar mavi kullanacağımızı doğrudan belirtiyoruz. Her bir değer 0 ile 255 arası toplam 256 değer alır. Matematik hesabı ile de ortaya çıkacak renk miktarı 256x256x256’dan yaklaşık 16 milyondur. RGB gösterimin kullanımı şu şekildedir:

[css].metin {color:rgb(255,0,0)} – Kırmızı
.metin {color:rgb(0,255,0)} – Yeşil
.metin {color:rgb(0,0,255)} – Mavi[/css]

RGB gösterimde doğrudan renk miktarı yerine rengin kullanılacağı yüzdeyi de girebilirsiniz. Mesela şu iki gösterim birbirine eşittir.
[css].metin {color:rgb(255,0,0)} – Kırmızı
.metin {color:rgb(100%, 0%, 0%)} – Kırmızı[/css]

500’den fazla rengin RGB gösterimdeki değerlerinin listesine şuradan ulaşabilirsiniz.

4. RGBA Gösterimi

CSS3 ile gelen yeniliklerden birisi RGBA gösterimidir. Renk (color) özelliğine RGBA’daki A harfi ile Alpha yani saydamlık yeteneği kazandırılmıştır. Saydamlık değeri olarak 0.0 ile 1 arasında bir rakam girebiliriz ve bu değer yüzde (%) olarak yorumlanacaktır. Bir örnekle anlatmak gerekirse:
[css]p {float:left;width:60px;height:60px;}
.metin1 {background-color:rgba(255,0,0, 0.1);}
.metin2 {background-color:rgba(255,0,0, 0.3);}
.metin3 {background-color:rgba(255,0,0, 0.5);}
.metin4 {background-color:rgba(255,0,0, 0.7);}
.metin5 {background-color:rgba(255,0,0, 0.9);}[/css]

Sonuç:
Renk testi sonucu
Burada değerli Fatih Hayrioğlu ile aynı şekilde bir örnekle konuyu anlattım çünkü bu konu bundan daha iyi örneklendirilemez kanımca ;)

5. HSL Gösterimi

HSL gösterimi aslında mantık olarak RGB ile aynıdır. RGB’nin bir takım kısıtlamaları olduğu düşünülerek bu gösterim üretilmiştir. HSL gösterimde renkler Kırmızı, Yeşil ve Mavi karışımından ziyade Hue, Saturation ve Lightness yani Renk, Koyuluk ve Işık miktarı ile belirlenir. Hue yani renk, renk çemberinde 0 ile 360 arasındaki renklere karşılık gelir. 0 kırmızı, 120 yeşil ve 240 mavidir. Saturation yani koyuluk, gri gölge ve tam renk arasında bir yüzde değerdir. Aynı şekilde Lightness yani ışık için de beyaz ve siyah arasında bir yüzde değer girilir. HSL kullanımı şu şekildedir:

[css].metin {color:hsl(0,65%,75%)} – Kırmızı tonu
.metin {color:hsl(120,35%,65%)} – Yeşil tonu
.metin {color:hsl(240,55%,35%)} – Mavi tonu[/css]

6. HSLA Gösterimi

HSL gösterimi kullanım açısından nasıl RGB gösterime benziyorsa HSLA gösterim de aynı şekilde RGBA gösterimine benzer ve en sondaki A harfi Alpha yani saydamlığı ifade eder. Saydamlık mantığı da RGBA’daki gibidir. Örnek kullanım ise şu şekildedir:

[css].metin {color:hsla(0,65%,75%, 0.3)} – Saydam kırmızı tonu
.metin {color:hsla(120,35%,65%, 0.5)} – Saydam yeşil tonu
.metin {color:hsla(240,55%,35%, 0.6)} – Saydam mavi tonu[/css]

Notlar

Yukarıda bahsettiğim tüm kullanımlar color için olduğu kadar background-color özelliği için de geçerlidir.

RGBA ve HSLA’daki Alpha ile opacity arasındaki fark, Alpha kullanımında sadece kullanılan elemana saydamlık verilirken opacity kullanımında elemanın içinde tüm alt elemanlara saydamlık özelliği kazandırılır.

RGBA ve HSLA’nın desteklenmediği Internet Explorer sürümlerinde (8 ve öncesi) aşağıdaki koddan faydalanabilirsiniz:
[css]<!–[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]–>[/css]

Renk modülünün veya daha net konuşmak gerekirse HSLA ve RGBA’nın hangi tarayıcılarda desteklendiğini şuradan görebilirsiniz.

Sonuç

Bu yazımda CSS3 ile elemanlara nasıl renk verebileceğinizi ve saydamlık katabileceğinizi anlatmaya çalıştım. Yukarıdakilerden hangisini kullanacağınız tamamen size kalmış, tamamı geçerli ve uygun kullanımdır. Bol renkli tasarımlarda buluşmak üzere diyeceğim ama lütfen renkleri abartmayalım :)