Menentukan Warna melalui rgb di CSS

Di awal buku pelajaran, ketika kita mempelajari warna, saya memberitahu Anda bahwa warna dapat ditentukan baik dengan kata bahasa Inggris, atau melalui rgb, atau melalui #. Dua format terakhir memungkinkan untuk mendapatkan warna dalam nuansa apa pun. Mari kita pahami bagaimana tepatnya format-format ini bekerja.

Untuk memahami cara-cara ini, pertama-tama kita perlu memahami bagaimana warna yang diinginkan dihasilkan pada layar komputer.

Sebenarnya, titik individual pada layar (piksel) tidak dapat menyala dengan semua warna yang dibutuhkan, karena secara teknis hal itu akan sangat sulit. Setiap titik pada layar hanya dapat menyala dengan tiga warna: merah, hijau, dan biru. Namun secara bersamaan dan dalam proporsi yang berbeda.

Dengan mengombinasikan warna-warna ini kita bisa mendapatkan warna apa pun yang kita butuhkan, mirip dengan yang dilakukan oleh pelukis dengan cat: dengan mencampur beberapa warna mereka mendapatkan warna baru lainnya.

Untuk mencampur warna dalam CSS, Anda perlu menentukan kata kunci rgb sebagai nilai properti, setelah itu cantumkan dengan koma yang menentukan dalam proporsi bagaimana ketiga warna dasar ini harus diambil. Warna-warna itu sendiri dapat bervariasi dari 0 hingga 255. Di mana nol - adalah tidak adanya warna, dan 255 adalah warna murni (misalnya, merah murni).

Huruf-huruf rgb sendiri merupakan singkatan dari red, green, blue.

Mari kita lihat contohnya.

Contoh

Mari kita campur warna merah murni dan biru murni. Untuk melakukan ini, kita atur nilai pertama ke 255, nilai kedua ke 0, dan nilai ketiga - ke 255. Kita akan mendapatkan warna ungu:

<p>
	teks
</p>

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

Contoh

Sekarang mari atur nilai pertama ke 255, dan semua nilai lainnya - ke nol. Sebagai hasilnya, kita akan mendapatkan warna merah murni:

<p>
	teks
</p>

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

Contoh

Seperti ini kita dapatkan warna hijau murni:

<p>
	teks
</p>

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

Contoh

Dan jika untuk hijau diatur bukan 255, tetapi 100, maka akan dihasilkan hijau sebagian:

<p>
	teks
</p>

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

Contoh

Mari campur ketiga warna dalam proporsi sembarang. Lihat, apa yang dihasilkan:

<p>
	teks
</p>

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

Contoh

Jika semua nilai diatur ke 255, maka akan dihasilkan warna putih murni:

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

Contoh

Jika semua nilai diatur ke 0, maka akan dihasilkan warna hitam murni:

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

Tugas Praktis

Dengan menentukan warna melalui rgb, buatlah semua paragraf berwarna merah.

Dengan menentukan warna melalui rgb, buatlah semua h2 berwarna hijau.

Dengan menentukan warna melalui rgb, buatlah semua h3 berwarna biru.

Campurkan merah murni dan hijau murni. Warna apa yang akan dihasilkan?