Arkadaşlar bu yazımızda Css renk kodları nedir ve nasıl kullanıldığını örneklerle anlatacağız. Css de renk kodları tanımlamanın birden fazla yöntemi vardır. Bu yöntemler ana renk, rgb, rgba, hsl, hsla ve hexadecimal renk tanımlama yöntemleridir.
CSS Ana Renk Tanımlama
Html de tanımlı ana renkler CSS koldarı içinde yazılarak kullanılır. Renk tanımlamayı Html elemanlarının rengini ve arka plan rengini değiştirmede kullanırız.
HTML ana renkler, renklerin ingilizce yazılmış halleridir. Örneğin black, white, red, yellow gibi.
Örnek Kod:
body{
background-color: blue;
color: white;
}CSS RGB Renk Tanımlama
RGB, ingilizce red(kırmızı), green(yeşil) ve blue(mavi) kelimelerinin baş harflerinden gelmektedir. Bütün tarayıcılar (browser) tarafından destenelen renk tanımlamasıdır. Doğadaki bütün renkleri tanımlayabileceğimiz renk uzayıdır.
Yazım biçimi rgb(0,128,255) şeklindedir. Renkler 0 ile 255 arasındaki kombinasyonlar ile elde edilir. Parantez içindeki ilk değer “red”, ikinci değer “green” ve üçüncü değer de “blue” renklerini temsil eder. Bütün renkleri bu üç rengin farklı oranlarındaki karışımı ile elde ederiz.
Örneğin rgb(255,0,0) ile kırmızı, rgb(0,255,0) ile yeşil, rgb(0,0,255) ile mavi, rgb(0,0,0) ile siyah, rgb(255,255,255) ile de beyaz renk elde edilir…
Örnek Kod:
body{
background-color: rgb(100, 150, 200);
}CSS RGBA Renk Tanımlama
“rgb” renk tanımlamaya ek olarak alfa(alpha) kanalı vardır. Alfa kanalı şeffaflık (opacity) özelliğidir ve rgb renk uzayının sonuna eklenir. Tanımladığımız renklerin şeffaflık ayarını % cinsinden ayarlamamızı sağlıyor.
Örneğin rgba(255,0,0.5) şeklinde tanımlama yaptığımızda kırmızı rengi %50 şeffaf şeklinde tanımlar. Bu bizim ne işimize yarayacak diye aklımıza gelebilir. Bazen bir alana renk verirken altına koyduğumuz resimlerin hafif bir şekilde görünmesini isteriz, bu gibi benzer durumlarda kullanılır.
Örnek Kod:
body{
background-color: rgba(100, 150, 200, .6);
}CSS HSL Renk Tanımlama
HSL, ingilizce hue(renk özü), saturation(doygunluk) ve lightnees(açıklık) kelimelerinin baş harflerinden gelmektedir. Bütün tarayıcılar (browser) tarafından desteklenen renk tanımlamasıdır. Doğadaki bütün renkleri tanımlayabileceğimiz renk uzayıdır. Resim üzerinde detayları kaybetmeden renk değişikliklerine olanak verir.
Yazım biçimi hsl(360,100%,100%) şeklimdedir. Parantez içindeki ilk değer Hue, ikici değer Saturation ve üçüncü değer de lightnees değeridir.
Hue, renk özünü belirler ve açısal derece değeri alır. Değer aralığı 0 ile 360 arasındadır.
Saturation, matlık ve parkalığı ayarlar. Yüzde cinsinden değer alır ve değer aralığı 0 ile 100 arasındadır.
Lightness, açıklık ve koyuluk ayarını yapar. Yüzde cinsinden değer alır ve değer aralığı 0 ile 100 arasındadır.
Örneğin hsl(0,100%,50%) rengi kırmızı olur.
Örnek Kod:
body{
background-color:hsl(200, 60, 30)
}CSS HSLA Renk Tanımlama
“hsl” renk tanımlamaya ek olarak alfa(alpha) kanalı vardır. Alfa kanalı şeffaflık (opacity) özelliğidir ve hsl renk uzayının sonuna eklenir. Tanımladığımız renklerin şeffaflık ayarını % cinsinden ayarlamamızı sağlıyor.
“rgb” ile “rgba” da ki ilişki gibi diyebiliriz. Örneğin hsla(0, 100%, 50%, 0.5) renk tanımlaması kırmızı renginin %50 şeffaf halidir.
Örnek Kod:
body{
background-color:hsla(200, 60, 30, .5)
}CSS Hexadecimal Renk Tanımlama
Doğadaki bütün renkleri tanımlayabilir. Renkleri tanımlarken hexadecimal (onaltılık) sayı sistemi rakamları kullanılarak tanımlama yapılır. İlk olarak # karakteri ile başlar ve sonrasında hexadecimal rakamlarla renkler tanımlanır. Küçük ve büyük harf kullanımı fark etmez. Aynı sonucu verir.
Yazım mantığı #AA22C4 şeklindedir. ilk iki karakter (AA) RGB deki Red i, sonraki iki karakter (22) RGB deki Green i ve son iki karakterde RGB deki Blue ya karşılık gelir. İlk iki karakter 00 alındığında Red yani kırmızı dan sıfır alınmış olur yani hiç alınmamış. FF olursa da max seviyede alınmış olur. RGB de mantık 0-255 arasında değer vererek renklendirme yapılıyordu. Burada ise 00-FF hexadecimal sayı değerleri arasındaki değer vererek yapılıyor.
Eğer yazdığımız rengin kodları tekrarlı ise kısa yazım kullanabiliyoruz. Örneğin #11AA44 şeklinde ise kısa olarak #1A4 şeklinde yazabiliriz. Aynı renk tanımlamış oluyoruz. Başka bir örnek daha verelim: #EE66AA renk kodunu kısaltılmış halide #E6A şeklindedir. Yani ilk iki karakter aynı, ortadaki iki karakter aynı ve sondaki iki karakter aynı olursa bu kısaltma yapılır…
Örnek Kod:
body{
background-color:#46273f;
}
h1{
color: #1db;
}Başka bir yazımızda görüşmek dileğiyle…
