CSS'te rgb ile Renk Belirleme

Eğitimin en başında, renkleri incelerken size rengin İngilizce bir kelimeyle, rgb ile veya # ile belirlenebileceğini anlatmıştım. Son iki format, her tondan renk elde etmeye izin verir. Bu formatların tam olarak nasıl çalıştığını anlayalım.

Bu yöntemleri anlamak için öncelikle bilgisayar ekranında istenen rengin nasıl elde edildiğini anlamamız gerekir.

Aslında ekranın ayrı bir noktası (piksel) ihtiyaç duyulan tüm renklerle yanamaz, çünkü bu teknik olarak çok karmaşık olurdu. Ekranın her noktası yalnızca üç renkle yanabilir: kırmızı, yeşil ve mavi. Ancak aynı anda ve farklı oranlarda.

Bu renkleri birleştirerek, tıpkı ressamlarla boyalarda yaptıkları gibi, ihtiyacımız olan herhangi bir rengi elde edebiliriz: birkaç rengi karıştırarak başka yeni bir renk elde ederler.

CSS'te renkleri karıştırmak için, özelliğin değeri olarak rgb anahtar kelimesini yazmanız, ardından virgülle ayırarak bu üç temel rengin hangi oranlarda alınacağını belirtmeniz gerekir. Renklerin kendisi 0 ile 255 arasında değişebilir. Sıfır rengin yokluğu, 255 ise saf renk (örneğin, saf kırmızı) anlamına gelir.

rgb harflerinin kendisi red (kırmızı), green (yeşil), blue (mavi) olarak açılır.

Örneklerle inceleyelim.

Örnek

Saf kırmızı ve saf maviyi karıştıralım. Bunun için ilk değeri 255, ikinciyi 0 ve üçüncüyü 255 yapıyoruz. Mor bir renk elde edeceğiz:

<p>
	metin
</p>

p {
	color: rgb(255, 0, 255);
}

Örnek

Şimdi ilk değeri 255, diğer tüm değerleri ise sıfır yapalım. Sonuç olarak saf kırmızı rengi elde ederiz:

<p>
	metin
</p>

p {
	color: rgb(255, 0, 0);
}

Örnek

Saf yeşil rengi şu şekilde elde ederiz:

<p>
	metin
</p>

p {
	color: rgb(0, 255, 0);
}

Örnek

Yeşil için 255 yerine 100 değerini verirsek, kısmen yeşil elde edilir:

<p>
	metin
</p>

p {
	color: rgb(0, 100, 0);
}

Örnek

Üç rengi keyfi oranlarda karıştıralım. Bakın ne çıktı:

<p>
	metin
</p>

p {
	color: rgb(200, 100, 125);
}

Örnek

Tüm değerler 255 olarak ayarlanırsa, saf beyaz renk elde edilir:

p {
	color: rgb(255, 255, 255);
}

Örnek

Tüm değerler 0 olarak ayarlanırsa, saf siyah renk elde edilir:

p {
	color: rgb(0, 0, 0);
}

Pratik Görevler

rgb ile renk belirleyerek tüm paragrafları kırmızı yapın.

rgb ile renk belirleyerek tüm h2 başlıklarını yeşil yapın.

rgb ile renk belirleyerek tüm h3 başlıklarını mavi yapın.

Saf kırmızı ve saf yeşili karıştırın. Hangi renk elde edilir?