Menetapkan Warna melalui rgb dalam CSS

Pada permulaan buku teks ini, ketika kita mempelajari warna, saya telah memberitahu anda bahawa warna boleh ditetapkan sama ada dengan perkataan Inggeris, atau melalui rgb, atau melalui #. Dua format terakhir membolehkan kita mendapatkan warna dalam sebarang rona. Mari kita fahami bagaimana format-formaat ini berfungsi.

Untuk memahami cara-cara ini, pertama sekali kita perlu memahami bagaimana warna yang dikehendaki dihasilkan pada skrin komputer.

Sebenarnya, titik individu pada skrin (piksel) tidak boleh memancarkan semua warna yang diperlukan, kerana secara teknikalnya ia akan menjadi sangat rumit. Setiap titik pada skrin hanya boleh memancarkan tiga warna: merah, hijau, dan biru. Tetapi secara serentak dan dalam perkadaran yang berbeza.

Dengan menggabungkan warna-warna ini kita boleh mendapatkan sebarang warna yang kita perlukan, sama seperti yang dilakukan oleh pelukis dengan cat: dengan mencampurkan beberapa warna mereka mendapat warna baru yang lain.

Untuk mencampur warna dalam CSS, anda perlu menetapkan kata kunci rgb sebagai nilai sifat, selepas itu nyatakan melalui koma perkadaran untuk mengambil ketiga-tiga warna asas ini. Warna-warna itu sendiri boleh berubah dari 0 hingga 255. Selain itu, sifar - bermakna ketiadaan warna, manakala 255 bermaksud warna tulen (contohnya, merah tulen).

Huruf-huruf rgb itu sendiri adalah singkatan untuk red, green, blue.

Mari lihat contohnya.

Contoh

Mari kita campurkan warna merah tulen dan biru tulen. Untuk melakukan ini, kita tetapkan nilai pertama kepada 255, nilai kedua kepada 0, dan nilai ketiga - kepada 255. Kita akan mendapat warna ungu:

html<p>
  teks
</p>

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

Результат:

Contoh

Sekarang mari kita tetapkan nilai pertama kepada 255, dan semua yang lain - kepada sifar. Hasilnya, kita akan mendapat warna merah tulen:

html<p>
  teks
</p>

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

Результат:

Contoh

Beginilah cara kita mendapat warna hijau tulen:

html<p>
  teks
</p>

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

Результат:

Contoh

Dan jika untuk hijau kita tetapkan bukan 255, tetapi 100, maka akan terhasil hijau separa:

html<p>
  teks
</p>

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

Результат:

Contoh

Mari campurkan ketiga-tiga warna dalam perkadaran sewenang-wenangnya. Lihat apa yang terhasil:

html<p>
  teks
</p>

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

Результат:

Contoh

Jika semua nilai ditetapkan kepada 255, maka akan terhasil warna putih tulen:

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

Contoh

Jika semua nilai ditetapkan kepada 0, maka akan terhasil warna hitam tulen:

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

Tugas Praktikal