Memahami Sistem Warna CSS: HEX, RGB, HSL, dan CurrentColor

Di balik setiap pixel warna di layar, terdapat perhitungan matematika. Sebagai developer, memilih sistem warna yang tepat dapat mempermudah proses styling dan maintenance kode.

1. HEX (Hexadecimal)

Sistem yang paling umum digunakan dalam web. Menggunakan basis 16 (0-9 dan A-F).

• Format: #RRGGBB atau #RRGGBBAA (untuk transparansi).

• Contoh: #ff5733

• Kelebihan: Ringkas dan standar industri di alat desain seperti Figma atau Photoshop.

2. RGB & RGBA (Red, Green, Blue)

Sistem ini mencampur cahaya merah, hijau, dan biru dengan skala 0 hingga 255.

• Format: rgb(red, green, blue)

• RGBA: Tambahan "Alpha" (0.0 - 1.0) untuk mengatur tingkat transparansi.

• Contoh: rgba(255, 87, 51, 0.5) (Warna oranye dengan transparansi 50%).

Shutterstock

3. HSL & HSLA (Hue, Saturation, Lightness)

Sistem yang paling intuitif bagi manusia karena bekerja berdasarkan cara kita melihat warna.

• Hue: Lingkaran warna (0 - 360). 0=Merah, 120=Hijau , 240=Biru.

• Saturation: Kejenuhan warna (0% abu-abu, 100% warna penuh).

• Lightness: Kecerahan (0% hitam, 50% normal, 100% putih).

• Contoh: hsl(200, 100%, 50%) (Warna biru cerah).

• Kelebihan: Sangat mudah untuk membuat variasi warna (lebih gelap/terang) hanya dengan mengubah nilai Lightness.

4. CurrentColor (Keyword Dinamis)

currentColor adalah variabel bawaan CSS yang mengambil nilai dari properti color elemen tersebut (atau induknya).

• Kegunaan: Sangat berguna untuk menyamakan warna border, icon (SVG), atau box-shadow dengan warna teks secara otomatis.

Tutorial: Implementasi Warna yang Efisien

Mari kita bandingkan penggunaan sistem warna ini dalam komponen nyata.

Struktur HTML

<div class="card"> <h3>Sistem Warna CSSh3> <p>Belajar mengelola warna dengan lebih fleksibel.p> <button class="btn">Klik Disinibutton>
div>

< !---->

Kode CSS

:root { /* Menggunakan HEX untuk brand color */ --primary-hex: #3498db;
} .card { /* Menggunakan RGBA untuk shadow agar halus */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 20px; border-radius: 8px; /* Menggunakan HSL untuk background tipis */ background-color: hsl(200, 100%, 95%); color: #2c3e50;
} .btn { /* Tombol menggunakan warna utama */ background-color: var(--primary-hex); color: white; padding: 10px 20px; /* TRICK: Border akan selalu mengikuti warna teks tombol jika teks diubah */ border: 2px solid currentColor; transition: 0.3s;
} .btn:hover { /* Mempergelap warna hanya dengan mengubah Lightness (HSL) */ background-color: hsl(204, 70%, 43%);
}

Tabel Ringkasan

Tips Pro:

Jika Anda sedang membangun fitur Dark Mode atau sistem tema di proyek SatuMedia, sangat disarankan menggunakan HSL. Anda cukup mengubah variabel Lightness untuk menyesuaikan seluruh tema website tanpa harus mencari kode HEX baru satu per satu.