HTML HEX Colors

Bab 1: Standar Industri Warna

Dalam pengembangan web profesional, format Hexadecimal (HEX) adalah metode paling populer untuk mendefinisikan warna. Format ini lebih ringkas daripada RGB dan didukung oleh semua browser serta software desain seperti Photoshop atau Figma.

HEX menggunakan sistem bilangan basis-16 untuk merepresentasikan nilai intensitas Merah, Hijau, dan Biru.

Bab 2: Memahami Bilangan Hexadecimal

Tidak seperti sistem desimal kita (0-9), Hexadecimal memiliki 16 digit. Setelah angka 9, hitungan dilanjutkan dengan huruf A sampai F.

Urutan intensitas: 0, 1, ..., 9, A, B, C, D, E, F. Jadi, 00 adalah terendah, dan FF adalah tertinggi.

Bab 3: Konversi dan Contoh

Mari kita lihat bagaimana warna-warna dasar diterjemahkan ke dalam kode HEX.

• Hitam (#000000): Merah 00, Hijau 00, Biru 00.
• Putih (#FFFFFF): Merah FF, Hijau FF, Biru FF.
• Merah (#FF0000): Merah maksimal (FF), sisanya mati (00).
• Hijau (#00FF00): Hijau maksimal (FF), sisanya mati (00).
• Biru (#0000FF): Biru maksimal (FF), sisanya mati (00).

<h1 style="color:#FF0000;">Teks Merah</h1>
<h1 style="color:#0000FF;">Teks Biru</h1>
<h1 style="color:#3CB371;">Medium Sea Green</h1>

Bab 4: Shorthand HEX (Kode Pendek)

Jika kedua digit pada setiap komponen warna bernilai sama (misal: #RR GGBB menjadi #11 22 33), Anda bisa menyingkatnya menjadi 3 digit saja.

Bab 5: HEX dengan Alpha (Transparansi)

Sama seperti RGBA, format HEX modern juga mendukung transparansi dengan menambahkan 2 digit ekstra di belakang kode warna. Formatnya menjadi 8 digit: #RRGGBBAA.

Nilai Alpha (AA) juga berkisar dari 00 (Transparan) hingga FF (Solid).

<!-- Merah Solid -->
<div style="background-color:#FF0000;"></div>

<!-- Merah Transparan (sekitar 50%) -->
<div style="background-color:#FF000080;"></div>

⚡ Proyek Kilat: Modern Button Palette

Misi Anda adalah membuat 3 tombol dengan warna berbeda menggunakan kode HEX 3 digit (Shorthand). Ini akan melatih efisiensi penulisan kode Anda.

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: