Last Updated on August 20, 2022 by
HTML color dapat didefinisikan berupa nama, nilai RGB, RGBA, HEX, HSL atau HSLA. Semua color pada HTML ini bisa diterapkan pada background maupun teks.
Tutorial belajar HTML berikut akan menjelaskan berbagai cara simpel mengganti color teks dan background. Yuk langsung simak contoh pengkodean color pada HTML berikut ini!
Table of Contents
Mendefinisikan HTML Color
Mengingat desain bukanlah fungsi utama dari HTML, maka wajar kalau Anda tidak bisa menemukan elemen HTML color tag untuk membantu penggantian warna di web.
Mewarnai website biasanya adalah tugas dari CSS inline styling. Alhasil, Anda harus menyematkan attribute style pada tag pembuka HTML yang mau diberi warna.
Ada dua properti yang bisa digunakan untuk menambah elemen color pada HTML: color untuk mengganti warna teks; dan background-color untuk background.
Keduanya bisa dipakai untuk mengisi warna dengan memasukkan nilai color name, RGB, RGBA, HEX, HSL atau HSLA.
Belajar HTML Color : Teks atau Latar (Background)
Seperti yang sempat disebut sebelumnya, terdapat sepasang HTML properti yang bisa digunakan untuk mewarnai web: background-color dan color.
Nama setiap properti juga telah mewakili kegunaannya masing-masing. Background-color dikhususkan untuk mengganti warna latar belakang.
Jika Anda memakai kode color saja, maka hanya warna teks yang berubah – latar belakangnya tidak.
Tetapi keduanya bisa diisi dengan nilai yang sama, mencakup nama warna, kode RGB, RGBA, HEX, HSL atau HSLA sesuai keinginan Anda. Contoh:
| Jenis Color pada HTML | Nilai |
| Nama warna (color name) | whitesmoke |
| RGB | 245, 245, 245 |
| RGBA | 245, 245, 245, 1 |
| HEX | #f5f5f5 |
| HSL | 0, 0%, 96% |
| HSLA | 0, 0%, 96%, 1 |
Yang penting untuk diingat di sini adalah properti HTML background-color hanya bisa mewarnai latar dari teks saja, bukannya seluruh area dokumen.
Kalau Anda ingin mengganti HTML color untuk seluruh halaman website, gunakanlah kode attribute bgcolor pada tag pembuka di bagian <body>. Contohnya adalah:
<body bgcolor="#a7cecf"> <h2 style="color: black;"> Contoh ini menggunakan nama warna untuk memberi warna pada teks dan seluruh web page </h2>
Catatan penting: khusus attribute bgcolor di <body>, elemen ini tidak mendukung nilai RGB. Sebagai gantinya, gunakan nilai HEX atau nama warna pilihan.
4 Cara Mendefinisikan Color pada HTML
1. HTML Color : Nama Warna
Nama warna adalah keterangan spesifik merujuk pada yang suatu color pada HTML.
Ada sekitar 140 nama warna yang didukung oleh CSS, dan Anda bisa menggunakan yang mana saja untuk menghias web page.
Di bawah ini adalah contoh pemakaian kode red untuk mendefinisikan color HTML red:
<h2 style="color: black;"> Contoh berikut menggunakan nama warna untuk mewarnai teks </h2> <h2 style="background-color: yellow;"> Contoh berikut menggunakan nama warna untuk mewarnai background </h2> <h2 style="background-color: yellow; color: black;"> Contoh berikut menggunakan nama warna untuk mewarnai teks dan background </h2>
2. HTML Color : Kode RGB dan RGBA
Kode RGB mendefinisikan color HTML dengan mencampur nilai warna merah, hijau, dan biru. Angka pertama adalah input warna merah; yang kedua merujuk input warna hijau; dan yang ketiga merupakan input warna biru.
Nilai setiap warna RGB juga dapat bervariasi dari 0 hingga 255. Misalnya, untuk mendapatkan warna merah di HTML, kita harus menggunakan kode RGB(255,0,17):
<h2 style="color: rgb(128, 207, 209);"> Contoh berikut menggunakan kode RGB untuk mewarnai teks </h2> <h2 style="background-color: rgb(54, 50, 50);"> Contoh berikut menggunakan kode RGB untuk mewarnai background </h2> <h2 style="color: rgb(128, 207, 209); background-color: rgb(54, 50, 50);"> Contoh berikut menggunakan kode RGB untuk mewarnai teks dan background </h2>
Sedangkan nilai RGBA sepintas tampak amat mirip dengan RGB. Meski demikian, terdapat satu lagi nilai dalam kode RGBA yakni A (alpha).
Kode alpha mewakili opasitas (keburaman) warna, dan bisa didefinisikan dari rentang 0 (tidak transparan) sampai 1 (sepenuhnya transparan). Contohnya:
<h2 style="color: rgba(109, 191, 190, 0.25);"> Nilai RGBA memungkinkan Anda mengatur opacity khusus – bandingkan dua baris ini </h2> <h2 style="color: rgba(109, 191, 190, 0.75);"> Nilai RGBA memungkinkan Anda mengatur opacity khusus – bandingkan dua baris ini </h2>
3. HTML Color : Nilai HEX
Cara menambahkan color pada HTML dengan kode HEX mirip dengan RGB – namun dengan sedikit perbedaan.
Kode HEX wajib memuat nilai angka dan huruf. Nilai angka (0 sampai 9) mewakili warna, sedangkan huruf (A sampai F) menandai tingkat intensitas warna pilihan.
Dalam setiap kode HEX, dua simbol pertama menentukan intensitas warna merah; dua simbol di tengah menandai intensitas warna hijau; dan dua yang terakhir merujuk pada intensitas warna biru.
Contohnya, kita dapat memakai kode HEX #0000fe untuk memberi warna biru yang terang pada HTML:
<h2 style="color: #f0ebeb;"> Contoh berikut menggunakan kode HEX untuk mewarnai teks </h2> <h2 style="background-color: #b8515e;"> Contoh berikut menggunakan kode HEX untuk mewarnai background </h2> <h2 style="color: #f0ebeb; background-color: #b8515e;"> Contoh berikut menggunakan kode HEX untuk mewarnai teks dan background </h2>
4. HTML Color : Nilai HSL dan HSLA
Cara memberi warna pada HTML yang terakhir adalah dengan nilai HSL dan HSLA. Adapun kepanjangan dari HSL adalah Hue (Rona), Saturation (Saturasi), dan Lightness (Pencahayaan)
- Hue didefinisikan dalam satuan derajat dari 0 sampai 360. Dalam palet roda warna, warna merah berada di antara 0/360 derajat; hijau di 120 derajat; dan biru di 240 derajat.
- Saturation dinyatakan dalam bentuk persentase dari 0 (hitam dan putih) sampai 100 (warna-warni; full color).
- Lightness juga dideklarasikan dalam satuan persen dari 0 (hitam) ke 100 (putih).
Misalnya, untuk memasukkan warna biru pada latar belakang web HTML memakai HSL, kita bisa menggunakan rangkaian nilai hsl(240, 100%, 50%):
<h2 style="color: hsl(117, 1%, 44%);"> Contoh berikut menggunakan kode HSL untuk mewarnai teks </h2> <h2 style="background-color: hsl(117, 70%, 87%);"> Contoh berikut menggunakan kode HSL untuk mewarnai background </h2> <h2 style="color: hsl(117, 1%, 44%); background-color: hsl(117, 70%, 87%);"> Contoh berikut menggunakan kode HSL untuk mewarnai teks dan background </h2>
Kemudian selayaknya RGBA, nilai keempat (“A”) pada HSLA juga berupa alpha. Nilai alpha HSLA menandai opasitas (tingkat keburaman) yang dideklarasikan dari angka 0 sampai 1:
<h2 style="color: hsla(215, 55%, 60%, 0.25);"> Nilai HSLA memungkinkan Anda mengatur opacity khusus – bandingkan dua baris ini </h2> <h2 style="color: hsla(215, 55%, 60%, 0.75);"> Nilai HSLA memungkinkan Anda mengatur opacity khusus – bandingkan dua baris ini </h2>
Belajar HTML Warna: Tips Penting
- Gunakan tool pemilih warna (color picker) dapat membantu Anda menemukan kode-kode nilai RGB atau HEX yang dibutuhkan.
- Menebak dan mencari nama warna sering kali terasa seperti sebuah permainan. Perbanyak menggali variasi nama warna di situs-situs color picker atau palet online dapat membantu memperkaya pengetahuan warna Anda.
Demikianlah pembahasan seri belajar HTML kali ini seputar penggunaan warna pada teks dan background. Semoga tips di atas bermanfaat menambah wawasan Anda, ya!
Jangan lupa untuk follow terus CODEKEY di https://codekey.id/, dan dapatkan lebih banyak tips mudah belajar programming lainnya. Sampai bertemu lagi!
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.
