CSS Renk Metotları
Yeniden Selamlar!
Adım adım HTML-CSS derslerimizde bugünkü konumuz web tasarımda renk kullanımı ve renklerin kodlanma şekli.
Özellikle son zamanlarda içerik zengin web siteleri renk kullanımından çok resim/animasyon gibi görsel materyalleri yoğun olarak kullansa da web tasarımlarda renk kullanımı halen popülerliğini yitirmiş değil ancak her iki kullanım şeklininde kendine has artı ve eksileri var olmaya devam etmektedir.
Web tasarım dünyasında renk kullanımında neredeyse sınırsız sayıda renk karışımları kullanabilmekteyiz,zaten renkler temelde RGB (kırmızı-yeşil-mavi) karmasından oluşmaktadır ve CSS dünyasında genel olarak 5 farklı şekilde renk betimlemesi yapılır:
1-Hexadecimal Yöntemi
Bu yöntem #RRGGBB formatıyla gösterilir.Örneğin tam kırmızı rengi #FF0000 ile oluşturulur.
2-Temel RGB Yöntemi
Hexadecimal yönteminin sadeleştirilmiş şeklidir ve #RGB formatıyla gösterilir.Örneğin: #F00 gibi.
3-Sayısal RGB Yöntemi
Hexadecimal ve temel RGB yöntemlerine nazaran daha fazla tonda renk karşımı elde edebilmemizi sağlar.Genel formatı RGB(sayi,sayi,sayi) şeklindedir ve her sayı 0 ile 255 aralıkları arasında yer alır.Örneğin: RGB(213,212,123) gibi.
4-Yüzdelik RGB Yöntemi
Sayısal RGB yönteminin yüzdelik değerlerle yazımından oluşturulan farklı tonlarda renkler oluşturmamıza yardımcı olur ve her yüzde değeri 0 ile 100 arasında belirtilir.Örneğin: RGB (12%,65%,64%) gibi.
Not:CSS kodlama sisteminde yüzde belirteçleri emperyal biçimde olduğundan % işareti sayıdan sonra yazılır.
5-Renk Adı Yöntemi
En temel renkleri kullanabildiğimiz bu yöntemde her rengi ingilizce karşılıklarıyla yazarız.Örneğin:siyah renk için black,kırmızı için red sözcüklerini kullanırız.
Buraya kadar birçok tarayıcının sorunsuz bir biçimde renk paletini çalıştırabildiği kodlama tiplerini gördük,bunlardan sonrası ise son zamanlarda ortaya çıkan ve daha zengin ve kolay renk seçimi yapmamızı sağlayan formatlardır.
6-RGBA Yöntemi
Sayısal RGB yöntemiyle aynı formattadır ancak tam sayılar kullanmak yerine her sayısal değer için 0 ile 1 arasında ondalıklı değerler vererek daha zengin renk karışımı elde ederiz.Örneğin: RGB(0.2,0.5,0.7) gibi.
7-HSL Yöntemi
Sayısal RGB ile yüzdelik RGB yönteminin karışımından oluşan bu teknikle değerler ister tam sayı ister yüzdelik biçimde verilebilmektedir.Örneğin: HSL(122,65%,33) gibi.
8-HSLA Yöntemi
Bu yöntemin HSL yönteminden farkı oluşturulan renk kombinasyonuna opacity (şeffaflık,parlaklık) katmanını ekleyerek çok daha zengin renk karışımı oluşturmamızı sağlamaktadır.Format olarak 4.değer opacity değerini alır ve kullanımı HSLA(123,55%,44,0.5) şeklindedir.
Buraya kadar öğrendiğimiz renklendirme biçim ve yöntemlerini elbette ezberlemek zorunda değiliz,çünkü web tasarımı için Dreamveawer gibi tasarım programları sayesinde bu kodları kolaylıkla yazabilmekteyiz.
Ayrıca herhangi bir yerde gördüğünüz rengin hexadecimal kodunu Pixie programı ile çok basit bir şekilde alabilir ve kullanabilirsiniz.
Renk kodları ve görsellerle zenginleştirilmiş örneklerini W3C School'unburadaki web sayfasından takip edebilirsiniz.
İlerleyen derslerimizde CSS renk kullanımı ile örnekler yapacağız,şimdilik hoşçakalın!
Adım adım HTML-CSS derslerimizde bugünkü konumuz web tasarımda renk kullanımı ve renklerin kodlanma şekli.
Özellikle son zamanlarda içerik zengin web siteleri renk kullanımından çok resim/animasyon gibi görsel materyalleri yoğun olarak kullansa da web tasarımlarda renk kullanımı halen popülerliğini yitirmiş değil ancak her iki kullanım şeklininde kendine has artı ve eksileri var olmaya devam etmektedir.
Web tasarım dünyasında renk kullanımında neredeyse sınırsız sayıda renk karışımları kullanabilmekteyiz,zaten renkler temelde RGB (kırmızı-yeşil-mavi) karmasından oluşmaktadır ve CSS dünyasında genel olarak 5 farklı şekilde renk betimlemesi yapılır:
1-Hexadecimal Yöntemi
Bu yöntem #RRGGBB formatıyla gösterilir.Örneğin tam kırmızı rengi #FF0000 ile oluşturulur.
2-Temel RGB Yöntemi
Hexadecimal yönteminin sadeleştirilmiş şeklidir ve #RGB formatıyla gösterilir.Örneğin: #F00 gibi.
3-Sayısal RGB Yöntemi
Hexadecimal ve temel RGB yöntemlerine nazaran daha fazla tonda renk karşımı elde edebilmemizi sağlar.Genel formatı RGB(sayi,sayi,sayi) şeklindedir ve her sayı 0 ile 255 aralıkları arasında yer alır.Örneğin: RGB(213,212,123) gibi.
4-Yüzdelik RGB Yöntemi
Sayısal RGB yönteminin yüzdelik değerlerle yazımından oluşturulan farklı tonlarda renkler oluşturmamıza yardımcı olur ve her yüzde değeri 0 ile 100 arasında belirtilir.Örneğin: RGB (12%,65%,64%) gibi.
Not:CSS kodlama sisteminde yüzde belirteçleri emperyal biçimde olduğundan % işareti sayıdan sonra yazılır.
5-Renk Adı Yöntemi
En temel renkleri kullanabildiğimiz bu yöntemde her rengi ingilizce karşılıklarıyla yazarız.Örneğin:siyah renk için black,kırmızı için red sözcüklerini kullanırız.
Buraya kadar birçok tarayıcının sorunsuz bir biçimde renk paletini çalıştırabildiği kodlama tiplerini gördük,bunlardan sonrası ise son zamanlarda ortaya çıkan ve daha zengin ve kolay renk seçimi yapmamızı sağlayan formatlardır.
6-RGBA Yöntemi
Sayısal RGB yöntemiyle aynı formattadır ancak tam sayılar kullanmak yerine her sayısal değer için 0 ile 1 arasında ondalıklı değerler vererek daha zengin renk karışımı elde ederiz.Örneğin: RGB(0.2,0.5,0.7) gibi.
7-HSL Yöntemi
Sayısal RGB ile yüzdelik RGB yönteminin karışımından oluşan bu teknikle değerler ister tam sayı ister yüzdelik biçimde verilebilmektedir.Örneğin: HSL(122,65%,33) gibi.
8-HSLA Yöntemi
Bu yöntemin HSL yönteminden farkı oluşturulan renk kombinasyonuna opacity (şeffaflık,parlaklık) katmanını ekleyerek çok daha zengin renk karışımı oluşturmamızı sağlamaktadır.Format olarak 4.değer opacity değerini alır ve kullanımı HSLA(123,55%,44,0.5) şeklindedir.
Buraya kadar öğrendiğimiz renklendirme biçim ve yöntemlerini elbette ezberlemek zorunda değiliz,çünkü web tasarımı için Dreamveawer gibi tasarım programları sayesinde bu kodları kolaylıkla yazabilmekteyiz.
Ayrıca herhangi bir yerde gördüğünüz rengin hexadecimal kodunu Pixie programı ile çok basit bir şekilde alabilir ve kullanabilirsiniz.
Renk kodları ve görsellerle zenginleştirilmiş örneklerini W3C School'un
İlerleyen derslerimizde CSS renk kullanımı ile örnekler yapacağız,şimdilik hoşçakalın!