Css Renkler

Html sayfalarında renk vermek için bir kaç yöntemimiz var.

Önceden tanımlanmış bazı renk isimleriyle nesnelerimize renk verebiliriz. Bazı renk isimleri; blue, green, orange vb.

<div> etiketinin arka plan rengini (background-color) ayarlayabiliriz.

div {
   width:300px;
   height:300px;
   background-color:blue;
}

** Ya da sayfanın arka plan rengini gri ve sayfadaki tüm yazıların rengini ise beyaz yapabiliriz.

Ayarladığımız yazı rengi body seviyesinde tanımlandığı için aksi belirtilmedikçe etkin olacak olan yazı rengidir. Eğer ki her hangi bir etiket için color özelliğine farklı bir değer atarsanız bu durumda beyaz rengi ezmiş ve pasif hale getirmiş oluruz.

body {
   font-size: 15px;
   color: gray;
   background-color:white;
}

.title{
   color: green;
}

Tüm renklerin 3 ana renk olan R (Red), G (Green) ve B (Blue)  renklerinden farklı oranlarda birleşerek tüm renkleri oluşturduğunu biliyoruz. Dolayısıyla her ana renk için 0-255 arasında değer verilebildiğini düşünürsek bir renk oluşturmak için aşağıdaki yöntemi kullanabiliriz.

RGB(255,0,0) dediğimizde kırmızı bir renk,

RGB(0,255,0) dediğimizde yeşil bir renk

RGB(0,0,255) dediğimizde mavi bir renk, oluşturabileceğimizi bilmemiz gerekiyor. 

** Dolayısıyla 0-255 arasındaki tüm değerler bir renk oluşmasına neden olur. Bu işlem için bir renk paleti kullanabiliriz. Renk paleti için tıklayınız.

** Daha keskin renk oluşturmak için RGB kullanmanızı tavsiye ederim.

Yukarıdaki örneğimizi şu şekilde güncelleyebiliriz.

body {
   font-size: 15px;
   color: rgb(128, 128, 128);
   background-color: rgb(255, 255, 255);
}

.title{
   color: rgb(0, 255, 0);
}

RGB() değerleri ile oluşturduğumuz her bir rengin Hexadecimal karşılığıda mevcuttur.

Örneğin ;

** rgb(0, 0, 0) siyah renge karşılık gelirken Hexadecimal karşılığı ise #000000 'dır.

** rgb(255, 255, 255)  beyaz renge karşılık gelirken Hexadecimal karşılığı ise #ffffff 'dır.

Dolayısıyla oluşturduğumuz her renk için hexadecimal karşılığınıda kullanabiliriz. Bu değeri gene aynı şekilde renk paleti üzerinden alıp kullanabiliriz.

body {
   font-size: 15px;
   color: #808080;
   background-color: #ffffff;
}

.title{
   color: #00ff00;
}

Son olarak rgb() metodu ile benzer bir yapıya sahip olan rbga() metodu mevcuttur ve bu metot son parametre olarak alpha değeri alır. Yani bir rengin opacity' si ile alakalı 0-1 arasında bir değer alır.

Eğer 0 değerini verirsek opacity' si tamamen saydam olur ve görünmez. Eğer ki; 1 verirsek rengin orjinali görünür. Eğer ki arada bir değer verirsek örneğin 0.5 değeri rengi %50 oranında saydam hale getirir.