Berikut ini adalah contoh Penggunaan Warna pada HTML beserta penjelasan lengkap pada setiap kode yang digunakan:
1. Warna dengan nama
HTML
<p style="color: red;">Ini adalah teks berwarna merah.</p>
<p style="color: blue;">Ini adalah teks berwarna biru.</p>
<p style="color: green;">Ini adalah teks berwarna hijau.</p>2. Warna dengan Kode Hexadecimal
HTML
<p style="color: #FF0000;">Ini adalah teks berwarna merah.</p>
<p style="color: #0000FF;">Ini adalah teks berwarna biru.</p>
<p style="color: #00FF00;">Ini adalah teks berwarna hijau.</p>3. Warna dengan Kode RGB
HTML
<p style="color: rgb(255, 0, 0);">Ini adalah teks berwarna merah.</p>
<p style="color: rgb(0, 0, 255);">Ini adalah teks berwarna biru.</p>
<p style="color: rgb(0, 255, 0);">Ini adalah teks berwarna hijau.</p>4. Warna dengan Kode RGBA
HTML
<p style="color: rgba(255, 0, 0, 0.5);">Ini adalah teks berwarna merah dengan transparansi 50%.</p>
<p style="color: rgba(0, 0, 255, 0.5);">Ini adalah teks berwarna biru dengan transparansi 50%.</p>
<p style="color: rgba(0, 255, 0, 0.5);">Ini adalah teks berwarna hijau dengan transparansi 50%.</p>5. Warna dengan Nama dan Background
HTML
<p style="color: white; background-color: red;">Ini adalah teks berwarna putih dengan latar belakang merah.</p>
<p style="color: white; background-color: blue;">Ini adalah teks berwarna putih dengan latar belakang biru.</p>
<p style="color: white; background-color: green;">Ini adalah teks berwarna putih dengan latar belakang hijau.</p>6. Warna dengan Kode Hexadecimal dan Background
HTML
<p style="color: white; background-color: #FF0000;">Ini adalah teks berwarna putih dengan latar belakang merah.</p>
<p style="color: white; background-color: #0000FF;">Ini adalah teks berwarna putih dengan latar belakang biru.</p>
<p style="color: white; background-color: #00FF00;">Ini adalah teks berwarna putih dengan latar belakang hijau.</p>7. Warna dengan Kode RGB dan Background
HTML
<p style="color: white; background-color: rgb(255, 0, 0);">Ini adalah teks berwarna putih dengan latar belakang merah.</p>
<p style="color: white; background-color: rgb(0, 0, 255);">Ini adalah teks berwarna putih dengan latar belakang biru.</p>
<p style="color: white; background-color: rgb(0, 255, 0);">Ini adalah teks berwarna putih dengan latar belakang hijau.</p>8. Warna dengan Kode RGBA dan Background
HTML
<p style="color: white; background-color: rgba(255, 0, 0, 0.5);">Ini adalah teks berwarna putih dengan latar belakang merah dan transparansi 50%.</p>
<p style="color: white; background-color: rgba(0, 0, 255, 0.5);">Ini adalah teks berwarna putih dengan latar belakang biru dan transparansi 50%.</p>
<p style="color: white; background-color: rgba(0, 255, 0, 0.5);">Ini adalah teks berwarna putih dengan latar belakang hijau dan transparansi 50%.</p>Dengan menggunakan kode-kode di atas, Anda dapat mengatur warna teks dan latar belakang pada elemen HTML sesuai dengan kebutuhan Anda.
Output:
See the Pen Penggunaan Warna pada HTML by De Orchids (@De-Orchids) on CodePen.
Leave a Reply