CSS Renk Yapıları
CSS'te renk yapılarının önemi nedir?
CSS, genel itibariyle sayfanın tasarımın ele alan bir yapıdır. Bu nedenle CSS'in içersinde bulunan renk yapıları aslında belkide CSS'in en önemli başlıklarından birisidir. Eğer ki renk yapıları bilinmezse bu durumda rahat bir şekilde kod yazılamaz ve böylelikle kod yazarken kendimizi yormuş oluruz. Tabiki bugünkü yazımızı okumadan önce CSS ile HTML elementlerine nasıl erişilir başlığını okumanız gerekmektedir. Elementlere erişimi başarılı bir şekilde yaptıktan sonra artık renklendirme işlemlerine başlayabiliriz.
CSS içerisinde kaç farklı renk yapısı bulunmaktadır?
CSS içerisinde toplamda 6 farklı renklendirme yapısı mevcuttur. Renklerin 6 farklı yapıda bulunmasının nedeni her birinin farklı kullanım alanına hizmet etmesinden kaynaklanmasıdır.
1) Ön tanımlı "Named Colors" renk yapıları
En çok bilinen renk yapılarıdır. Ön tanımları renk yapılarına örnek vermek gerekirse:
/* Ön Tanımlı Renk Yapıları*/
.textColor{
color: red;
}
div{
background-color: orange;
}
Yukarıdaki gibi bir yazım tarzına sahiptir. Named colors yapıları genel itibariyle herhangi bir rengin doğrudan İngilizce hâliyle kullanılmaktadır ve kullanımı en kolay olan renk türüdür. Kolay olması ile birlikte renk aralığı sınırlı olduğundan yazılımcılar tarafından sadece belirli bir alanı başlangıçta görme maksadıyla kullanılır.
2) 16'lı "Hexadecimal" renk yapıları:
Hexadecimal renk türü yine Named Colors yapısı gibi oldukça popüler bir renk türüdür. 16'lı şeklinde ifade edilmesinin sebebi, 16'lı sayı sistemini kullanmasıdır. 16'lı sayı sistemi kısaca "0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F" değerleri ile ifade edilen yapıları temsil etmektedir. Genel kullanım amacı 0-1 sayı değerlerine binâen tek bir ifadede 16 farklı durumu temsil etmesinden kaynaklı olarak veri iletim, renk okuma, ASCII kodlaması gibi alanlarda kullanılır. CSS'te de renk kodlaması olarak karşımıza çıkıyor.
Hexadecimal bir renk türünü daha iyi ifade etmek gerekirse #RRGGBB yani aslında (Reg, Green, Blue) değerlerini içerisinde barındıran bir yapıdır. RR değerleri 16 sayı sisteminde 16 x 16 = 256 şeklinde ifade edilebileceğinde 0 - 256 arasındaki renkleri belirli kat sayı aralığında kolaylıkla belirtmektedir. RGB() ile ifade edilen renklerden farkı ise çok detaylı değildir. Normalde renkler 0 - 256 arasında bir renk alır. Fakat "hexadecimal" renk türü kullanıldığında 16 x 16 = 256 değerini verse bile 16 x 15 değeri 240 sonucunu verdiğinden aslında aradaki 16 renk değeri kaybolmuş olur. Bu da bize "Hexadecimal" renk yapısının "RGB Fonksiyonu" ile ifade edilen renk yapısına göre daha az hassas olduğunu fakat "Named Colors" yapısına göre daha fazla renk içerdiğini göstermektedir. İşte bazı "hexadecimal" renk örnekleri:
/*Hexadecimal Renk Yapıları*/
.textColor{
color: #FF0000;
}
div{
background-color: #FFA500;
}
3) CSS RGB Fonksiyonu
CSS'in doğrudan böyle bir fonksiyonu desteklemesi oldukça mükemmeldir. Zira biz bu fonksiyon aracılığı ile bilinen tüm renkleri üretebiliriz. Mantık kısaca şudur; kırmızı, yeşil ve mavi renklerini karıştırarak bütün renkler elde edilebilir. Bununla birlikte "0" değeri belirtilen alanın en koyu değerini (siyah), 256 ile belirtilen bölge ise o alanın en açık değerini temsil etmektedir. O hâlde örnek olarak göstermek gerekirse
/*RGB(R, G, B) Renk Yapıları*/
.textColor{
color: rgb(256, 0, 0);
}
div{
background-color: rba(256, 50, 0);
}
Tüm renkleri yukarıdaki gibi bir yazım tarzı ile elde edebilirsiniz. Fark etmişsinizdir zaten ama ilk parametre Red, ikinici parametre Green, üçüncü parametre ise Blue renk değerinin 0 - 256 arasındaki değerini almaktadır.
4) CSS RGBA Fonksiyonu
Bu fonksiyon, temelinde RGB fonksiyonunu barındırmaktadır. Yani RGB fonksiyonunda yaptığımız bütün işlemler bu arkaşımızın olayında da aynen geçerlidir. Fakat farkı son kısmında bulunan A karakterinden kaynaklanmaktadır. "A" harfi bize kısaca "Alpha" yani opaklık durumunu temsil eder. Bazen biz renklerin arkasında bulunan şeyleri görmek isteriz. Yani bir elementin arkasında bir değer varsa hem o değeri bir renk verebilir hem de arkasındaki yapıyı görebilimek isteriz. Bu gibi durumlarda RGBA Fonksiyonu çok kullanışlı olabilir. "A" değeri 0.0 - 1.0 arasında değer almaktadır. Bu değerler "0.1 veya 0.15" şeklinde oldukça detaylıdır. Örnek bir kullanım:
/*RGBA(R, G, B, A) Renk Yapıları*/
.textColor{
color: rgba(256, 0, 0, 0.5); /*%50 saydam bir hâle geldi*/
}
div{
background-color: rba(256, 50, 0, 0.2); /*%80 saydam bir hâle geldi*/
}
5) CSS HSL Fonksiyonu
Çok sevilmeyen ve kullanılması da tavsiye edilmeyen bir yapıdır. Bu fonksiyonun "H"Hue değeri renk tonunu, "S%" Saturation değeri doygunluğu, "L%" Lightness değeri ise ışık değerini temsil etmektedir. Örneğin:
/*HSL(H, S% L%) Renk Yapıları*/
.textColor{
color: hsl(0, 100%, 50%); /*Kırmızı, yersen :)*/
}
div{
background-color: hsl(30, 100%, 50%); /*Turuncu*/
}
6) CSS HSLA Fonksiyonu
Bu fonksiyon da aynen RGB - RGBA yapılarında olduğu gibi sadece "Alpha" değeri ile ikiye ayrılmış tek bir yapıdır. HSL için ne yazdıysak bu yapı için de aynısı birebir olarak geçerlidir.
/*HSLA(H, S% L%, A) Renk Yapıları*/
.textColor{
color: hsla(0, 100%, 50%, 0.5); /*%50 saydam*/
}
div{
background-color: hsla(30, 100%, 50%, 0.8); /*%80 saydam*/
}
Ve böylelikle CSS içerisinde bulunan renk değerlerinin tamamını görmüş olduk. Kısaca; Named Colors yapısı tasarım esnasında belirli bir alanı işaretlemek, belirtmek için, Hexadecimal Colors daha geniş aralıkta hızlı ve etkin renk değerleri için. CSS RGB Fonksinyonu daha geniş bir renk aralığında tüm renkler için. CSS HSL Fonksiyonu ise daha kompleks renk üretmek, modern bir yaklaşım için kullanılmaktadır. "A" Alpha değeri ise saydamlık vermek için kullanılmaktadır.