Warna Heksadesimal dalam Desain Web

Setiap desainer web menemui kode seperti #FF5733 atau #2C3E50. Kode warna heksadesimal ini adalah cara ringkas untuk menentukan warna menggunakan sistem bilangan yang sama dengan yang digunakan programmer untuk data biner. Memahami warna hex membuka kendali warna yang presisi dalam desain web.

Cara Kerja Warna Hex

Model Warna RGB

Layar digital menciptakan warna dengan menggabungkan cahaya merah, hijau, dan biru.

• Setiap saluran memiliki 256 tingkat intensitas (0-255)
• 0 = tidak ada cahaya, 255 = intensitas penuh
• 256 × 256 × 256 = 16,7 juta kemungkinan warna

Representasi Heksadesimal

• 256 nilai = FF dalam hex (dua digit hex)
• Lebih ringkas dari desimal (255,128,0 vs FF8000)
• Mudah diketik dan diingat

Contoh: #FF5733

• FF = 255 merah (maksimum)
• 57 = 87 hijau (sedang)
• 33 = 51 biru (rendah)
• Hasil: Warna oranye-merah cerah

Nilai Warna Umum

Warna Hex Singkat

CSS memperbolehkan singkatan 3-digit ketika kedua digit di setiap pasangan sama.

Cara Kerjanya

• #RGB diperluas menjadi #RRGGBB
• Setiap digit digandakan

Contoh

• #FFF = #FFFFFF (putih)
• #000 = #000000 (hitam)
• #F00 = #FF0000 (merah)
• #369 = #336699 (biru baja)

Keterbatasan

#FF5733 tidak bisa disingkat (57 ≠ 55 atau 77)

Hex dengan Alpha (Transparansi)

Hex 8-Digit: #RRGGBBAA

CSS modern mendukung penambahan saluran alpha:

• AA = opasitas (00 = transparan, FF = opak)
• #FF573380 = oranye-merah transparan 50%

Nilai Alpha Umum

• FF = 100% opak
• CC = ~80% opak
• 80 = 50% opak
• 40 = 25% opak
• 00 = sepenuhnya transparan

Mengonversi Hex ke RGB

Metode

1. Ambil setiap pasangan 2 digit
2. Konversi dari hex ke desimal

Contoh: #4A90D9

• 4A = 4×16 + 10 = 74 merah
• 90 = 9×16 + 0 = 144 hijau
• D9 = 13×16 + 9 = 217 biru
• RGB: rgb(74, 144, 217)

Referensi Cepat

• 00 = 0
• 40 = 64
• 80 = 128
• C0 = 192
• FF = 255

Mengonversi RGB ke Hex

Metode

1. Konversi setiap nilai desimal (0-255) ke hex (00-FF)
2. Gabungkan dengan prefiks #

Contoh: rgb(100, 200, 150)

• 100 = 64 (6×16 + 4)
• 200 = C8 (12×16 + 8)
• 150 = 96 (9×16 + 6)
• Hex: #64C896

Hitung Cepat

• Bagi dengan 16 = digit pertama
• Sisa = digit kedua
• 100 ÷ 16 = 6 sisa 4 → 64

Menggunakan Warna Hex di CSS

Penggunaan Standar

color: #FF5733;

background-color: #2C3E50;

border: 2px solid #E74C3C;

Format Warna CSS Alternatif

• rgb(255, 87, 51) - RGB desimal
• rgba(255, 87, 51, 0.5) - RGB dengan alpha
• hsl(9, 100%, 60%) - Hue, Saturation, Lightness

Kapan Menggunakan Masing-masing

• Hex: Paling umum, ringkas
• RGB/RGBA: Saat menghitung warna secara dinamis
• HSL: Saat menyesuaikan kecerahan/saturasi

Palet Warna Populer dalam Hex

Material Design

• Primary Blue: #2196F3
• Green: #4CAF50
• Red: #F44336
• Purple: #9C27B0

Flat UI Colors

• Turquoise: #1ABC9C
• Emerald: #2ECC71
• Wet Asphalt: #34495E
• Alizarin: #E74C3C

Kesimpulan

Kode warna heksadesimal adalah cara ringkas untuk mengekspresikan warna RGB menggunakan sistem bilangan basis 16. Setiap pasangan digit (00-FF) merepresentasikan intensitas satu saluran warna dari 0-255. Memahami warna hex membantu desainer web bekerja secara efisien dengan color picker, style sheet, dan alat desain. Meskipun alat bisa melakukan konversi, mengetahui cara kerja warna hex memungkinkan manipulasi warna yang lebih baik dan debugging yang lebih cepat.

Artikel Terkait

• Cara Mengonversi Basis Bilangan: Panduan Langkah demi Langkah
• Biner, Desimal, dan Heksadesimal: Memahami Basis Bilangan
• Biner dalam Komputasi
• Bit vs Byte