Halo teman-teman,
Setelah sebelumnya kita belajar cara menggunakan komentar untuk memperjelas bagian dalam kode HTML, sekarang kita masuk ke bagian yang bikin tampilan halaman web jadi lebih menarik: warna.
Dengan warna, kita bisa mengatur suasana, menonjolkan elemen penting, dan bikin halaman web jadi lebih hidup. Yuk kita pelajari cara mengatur warna di HTML dengan berbagai metode.
Menggunakan Nama Warna
HTML mendukung lebih dari 140 nama warna yang bisa langsung kamu gunakan.
<body style="background-color: lightblue;">
<h1 style="color: darkblue;">Halo Warna!</h1>
</body>
Beberapa contoh nama warna yang umum dipakai: red, blue, green, yellow, gray, black, white, orange, purple, dan sebagainya.
Menggunakan RGB
RGB adalah singkatan dari Red, Green, Blue. Kamu bisa menentukan nilai intensitas masing-masing warna dari 0 sampai 255.
<p style="color: rgb(255, 0, 0);">Teks ini berwarna merah cerah.</p>
<p style="background-color: rgb(200, 200, 200);">Latar abu-abu muda</p>
Kalau kamu mau warna hitam: rgb(0, 0, 0)
Kalau mau warna putih: rgb(255, 255, 255)
Kalau mau warna abu-abu: gunakan nilai yang sama di ketiga angka, misalnya rgb(120, 120, 120)
Menggunakan Nilai HEX
Selain RGB, kamu juga bisa gunakan kode hexadecimal. Formatnya diawali dengan # lalu diikuti enam karakter, masing-masing dua digit untuk red, green, dan blue.
<p style="color: #ff0000;">Teks ini juga merah</p>
<p style="background-color: #00ff00;">Latar hijau terang</p>
-
#000000= hitam -
#ffffff= putih -
#808080= abu-abu -
#0000ff= biru
Menggunakan RGBA
Kalau kamu ingin mengatur transparansi warna, gunakan format rgba di mana huruf “A” berarti alpha, atau tingkat transparansi dari 0.0 sampai 1.0.
<p style="color: rgba(255, 0, 0, 0.5);">Teks merah setengah transparan</p>
Ini cocok untuk membuat elemen yang tidak terlalu mencolok, atau memberi efek lapisan tanpa menutupi sepenuhnya.
Setelah tahu cara pakai warna lewat nama, RGB, HEX, dan RGBA, kamu punya banyak kebebasan untuk eksplorasi tampilan halaman web kamu. Coba-coba aja kombinasi warna yang pas buat tema halaman kamu.
Kalau kamu punya warna favorit dan bingung cara nulisnya di kode HTML, tinggal cari nama warnanya atau konversi ke RGB/HEX pakai tools online. Gampang kok!
Kalau ada pertanyaan atau kamu punya trik warna favorit, tulis aja di komentar ya. Kita bahas bareng-bareng.
Di materi selanjutnya, kita akan mulai masuk ke dunia CSS—cara profesional untuk mengatur tampilan halaman web secara lebih fleksibel dan terstruktur. Sampai ketemu di tutorial berikutnya!
Komentar
Posting Komentar