HTML Colors

❮ Previous Next ❯

Bab 1: Representasi Warna Digital

Dalam pengembangan web, warna bukan sekadar estetika, melainkan data yang dikirimkan oleh server dan diterjemahkan oleh browser. HTML mendukung berbagai metode untuk mendefinisikan warna, mulai dari nama standar hingga kode numerik yang presisi.

Warna dapat diterapkan pada berbagai elemen, seperti latar belakang (background), teks, garis tepi (border), dan elemen grafis lainnya. Memahami format warna adalah kunci untuk menciptakan antarmuka yang konsisten dan profesional.

💡 Cakupan Dukungan:

Semua browser modern mendukung 140 nama warna standar, nilai RGB (Red-Green-Blue), nilai HEX (Hexadecimal), nilai HSL (Hue-Saturation-Lightness), serta varian transparansinya (RGBA & HSLA).

Bab 2: Nama Warna (Color Names)

HTML memiliki 140 nama warna yang telah distandarisasi. Anda dapat menggunakan nama-nama ini secara langsung dalam atribut style.

Nama warna tidak case-sensitive (Red sama dengan red), namun praktik terbaik menyarankan penggunaan huruf kecil.

Tomato

Warna merah oranye yang cerah. Sering digunakan untuk notifikasi atau peringatan ringan.

style="background-color:Tomato;"

DodgerBlue

Biru terang yang sering digunakan sebagai warna utama pada tombol atau tautan.

style="background-color:DodgerBlue;"

MediumSeaGreen

Warna hijau laut yang menenangkan, cocok untuk pesan sukses atau konfirmasi.

style="background-color:MediumSeaGreen;"

Implementasi Nama Warna:

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:Gray;">Gray</h1>

Bab 3: Nilai Warna (Color Values)

Selain menggunakan nama, Anda bisa mendefinisikan warna dengan nilai numerik untuk presisi yang lebih tinggi. Berikut adalah format utamanya:

⚠️ Konsistensi:

Dalam satu proyek, disarankan untuk konsisten menggunakan satu format warna. Format HEX dan RGBA adalah yang paling umum digunakan dalam CSS modern.

Bab 4: Warna Teks vs Latar Belakang

Penting untuk memahami perbedaan properti warna. color digunakan untuk mengubah warna teks, sedangkan background-color digunakan untuk area latar belakang.

<h1 style="background-color:black; color:white;">
  Kontras Tinggi
</h1>
<p style="background-color:yellow; color:black;">
  Teks Hitam di Latar Kuning
</p>

Bab 5: Transparansi (Alpha Channel)

Format RGB dan HSL dapat diperluas untuk mendukung transparansi dengan menambahkan parameter keempat: Alpha.

Nilai Alpha berkisar dari 0.0 (transparan total) hingga 1.0 (tidak transparan sama sekali).

RGBA

Format: rgba(red, green, blue, alpha)

rgba(255, 99, 71, 0.5)

HSLA

Format: hsla(hue, sat, light, alpha)

hsla(9, 100%, 64%, 0.5)

⚡ Proyek Kilat: Palet Warna UI

Tugas Anda adalah membuat sebuah representasi palet warna antarmuka pengguna (UI) sederhana menggunakan div dan atribut style.

🎯 Instruksi Misi:

  • ✅ Buat judul <h2> dengan teks "Palet Warna Saya".
  • ✅ Buat 3 elemen <div> terpisah.
  • ✅ Berikan warna background berbeda untuk setiap div:
    • Div 1: DodgerBlue (Warna Utama)
    • Div 2: Tomato (Warna Aksen)
    • Div 3: LightGray (Warna Netral)
  • ✅ Tambahkan padding 20px pada setiap div agar terlihat tebal.

Pusat Dokumentasi Developer

Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini:

Layanan & Jasa

Pembuatan Website Template Web Jasa Iklan

Fondasi Utama

Tag & Struktur Atribut Elemen Atribut Global Simbol & Karakter

Visual & Media

Kamus Warna Grafik Canvas Audio & Video Cek Browser

Alat Bantu Dev

Konversi PX ke EM Shortcut Keyboard Status HTTP URL Encoding

Standar Global

Kode Bahasa Kode Negara Atribut Event

Langkah Selanjutnya

Anda telah mempelajari konsep dasar warna. Untuk mendalami lebih jauh bagaimana komputer mengolah warna menggunakan kombinasi Merah, Hijau, dan Biru, mari kita pelajari sistem RGB.

INSPIRED BY GLOBAL WEB STANDARDS • POWERED BY CODIVAY

Lanjut ke RGB Colors »
❮ Previous Next: RGB Colors ❯