Media Belajar Bahasa Pemrograman | by APPKEY

HTML/CSSTutorial HTML 36 : Cara Mudah Mengganti HTML Color

Tutorial HTML 36 : Cara Mudah Mengganti HTML Color

-

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!

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:

Artikel Terkait  Tutorial HTML/CSS 29 : Mengenal Struktur URL Web dan Fungsinya pada Website

<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.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya