Konverter HEX ke RGB

Konversi HEX ke RGB: Cara Kerja, Aturan, dan Penggunaannya

Halaman ini menerima kode warna heksadesimal (HEX) seperti #4f46e5 atau abc dan langsung menampilkan padanan RGB-nya dalam tiga angka 0–255. Tidak ada konversi lain yang dilakukan di sini selain mengubah representasi berbasis-16 menjadi basis-10 untuk setiap kanal merah, hijau, dan biru. Tidak ada saluran alfa, tidak ada pembulatan, dan tidak ada pemotongan gamut—hasilnya eksak dan dapat dibalikkan.

Mengapa HEX dan RGB pada dasarnya sama

Setiap kode HEX enam digit (#RRGGBB) sebenarnya adalah cara ringkas untuk menulis tiga angka 8-bit. Satu digit heksadesimal mewakili nilai 0–15, tetapi kanal warna membutuhkan rentang 0–255. Oleh karena itu, diperlukan dua digit heksadesimal per kanal. Pasangan RR misalnya, jika diubah dari basis-16 ke desimal menghasilkan bilangan antara 0 dan 255. Inilah yang ditampilkan sebagai nilai merah pada RGB.

Contoh konkret: #4f46e5

• Kanal merah: 4f(hex) = 4×16 + 15 = 64 + 15 = 79
• Kanal hijau: 46(hex) = 4×16 + 6 = 64 + 6 = 70
• Kanal biru: e5(hex) = 14×16 + 5 = 224 + 5 = 229 Hasil RGB: (79, 70, 229).

Proses ini deterministik dan tidak memerlukan pembulatan karena konversi basis-16 ke basis-10 adalah operasi matematika eksak. Inilah yang membedakan halaman ini dari alat konversi warna lain yang mungkin menyertakan pemetaan gamut atau ruang warna berbeda. Di sini hanya ada satu input dan satu output yang saling berkaitan erat: kode HEX dan triplet RGB yang menyusunnya.

Aturan input dan penanganan format

Alat ini menerima beberapa bentuk kode HEX yang valid:

1. Enam digit dengan pagar: #4f46e5, #1E90FF, #ffffff
2. Enam digit tanpa pagar: 4f46e5, 1E90FF
3. Tiga digit dengan atau tanpa pagar: #abc, abc, #fff

Kode tiga digit merupakan bentuk singkat: setiap digit digandakan sebelum dikonversi. #abc menjadi #aabbcc, lalu diproses seperti format enam digit. Jadi #abc setara dengan #aabbcc yang menghasilkan RGB (170, 187, 204).

Jika input tidak sesuai salah satu format di atas—misalnya mengandung karakter non-heksadesimal, terdiri dari dua digit, atau delapan digit (termasuk alfa)—maka alat menampilkan pesan galat:
"Enter a hex color like #4f46e5 or #abc."
Pesan ini muncul dalam bahasa Inggris sesuai spesifikasi alat, tanpa penerjemahan.

Semua konversi terjadi sepenuhnya di peramban pengguna. Tidak ada data yang dikirim ke server, sehingga tidak ada risiko privasi atau penyimpanan riwayat warna.

Bagaimana setiap nilai RGB dihasilkan

Metode konversi mengikuti rumus standar:

nilai_desimal = digit_pertama × 16 + digit_kedua

dengan setiap digit adalah bilangan 0–15 yang diperoleh dari karakter heksadesimal (0–9 dan A–F, baik huruf besar maupun kecil). Karena setiap kanal diwakili dua digit, rentang hasilnya selalu 0–255.

Tabel berikut menunjukkan beberapa contoh konversi:

Semua nilai RGB yang dihasilkan adalah bilangan bulat. Tidak ada desimal, tidak ada pembulatan ke angka terdekat. Ini penting ketika warna digunakan dalam kode yang memerlukan presisi numerik, seperti operasi matematika pada kanvas HTML5 atau perhitungan luminansi untuk kontras aksesibilitas.

Perbedaan antara HEX dan RGB di dunia nyata

Dalam CSS, kode warna dapat ditulis sebagai #4f46e5 atau rgb(79, 70, 229). Keduanya diinterpretasikan oleh peramban secara identik. Namun, ada beberapa perbedaan praktis:

• HEX lebih ringkas: Tujuh karakter (#RRGGBB) dibandingkan sembilan hingga empat belas karakter rgb(r,g,b). Untuk nilai yang sering digunakan, HEX lebih cepat diketik.
• RGB lebih eksplisit: Nilai numerik 0–255 langsung terlihat, sehingga lebih mudah dibaca oleh manusia yang terbiasa dengan skala kecerahan. Misalnya, mengetahui bahwa merah murni adalah 255 lebih intuitif daripada #ff0000.
• RGB mendukung fungsi rgba(): Jika diperlukan saluran alfa, rgba(79, 70, 229, 0.5) memberikan transparansi. HEX delapan digit (#4f46e580) juga mendukung alfa, tetapi tidak semua alat konversi—termasuk halaman ini—menangani format tersebut.

Halaman ini secara khusus hanya menangani format HEX enam atau tiga digit. Tidak ada fitur untuk kode delapan digit yang menyertakan alfa. Jika pengguna memasukkan #4f46e580, alat akan menampilkan galat karena format tidak dikenali.

Peran RGB dalam model warna aditif

Monitor, layar ponsel, dan proyektor menggunakan model warna aditif RGB. Setiap piksel terdiri dari tiga subpiksel merah, hijau, dan biru yang menyala dengan intensitas 0–255. Kombinasi intensitas ini menciptakan spektrum warna yang tampak. Nilai 0 berarti subpiksel mati, 255 berarti menyala maksimal.

Kode HEX #4f46e5 menghasilkan warna ungu kebiruan karena kanal merah 79 (cukup rendah), hijau 70 (rendah), dan biru 229 (tinggi). Dominasi biru membuat warna cenderung ke spektrum biru-ungu. Skema seperti ini sering digunakan untuk merepresentasikan warna merek atau aksen dalam antarmuka pengguna.

Dengan memahami hubungan antara nilai heksadesimal dan intensitas RGB, seseorang dapat memprediksi secara kasar bagaimana suatu warna akan tampak tanpa harus melihatnya. Misalnya, #808080 (128,128,128) adalah abu-abu netral karena ketiga kanal sama. #ff6600 (255,102,0) adalah jingga karena merah maksimal, hijau sedang, biru nol.

Aksesibilitas dan kontras dari nilai RGB

Salah satu aplikasi penting konversi HEX ke RGB adalah menghitung luminansi relatif untuk memenuhi pedoman kontras WCAG. Luminansi dihitung dari nilai RGB linear, bukan langsung dari nilai 8-bit. Namun, langkah pertama tetap mendapatkan triplet RGB dari kode HEX.

Rumus luminansi relatif (untuk sRGB):

R_linear = (R/255)^2.2  (aproksimasi gamma)
G_linear = (G/255)^2.2
B_linear = (B/255)^2.2
L = 0.2126×R_linear + 0.7152×G_linear + 0.0722×B_linear

Dengan nilai RGB eksak dari konversi HEX, perhitungan ini dapat dilakukan tanpa kesalahan pembulatan. Rasio kontras antara dua warna kemudian dihitung untuk memastikan teks dapat dibaca oleh pengguna dengan gangguan penglihatan.

FAQ

1. Mengapa alat ini menolak kode HEX delapan digit (misal #4f46e580)?
Kode delapan digit menyertakan saluran alfa. Halaman ini dirancang khusus untuk konversi HEX ke RGB tanpa alfa. Jika Anda memerlukan nilai RGBA, gunakan alat terpisah yang mendukung format delapan digit.

2. Apakah huruf besar dan kecil dalam kode HEX diperlakukan berbeda?
Tidak. #4F46E5 dan #4f46e5 menghasilkan RGB yang sama. Konversi bersifat case-insensitive.

3. Bisakah saya memasukkan kode HEX tanpa pagar (#)?
Ya. Alat menerima "4f46e5" atau "abc" sama baiknya. Pagar bersifat opsional.

4. Mengapa hasil RGB selalu bilangan bulat?
Karena setiap kanal dalam RGB standar direpresentasikan dengan 8 bit (0–255). Konversi dari dua digit heksadesimal ke desimal menghasilkan bilangan bulat tanpa desimal.

5. Apakah tiga digit singkat selalu menghasilkan warna yang sama dengan enam digit yang digandakan?
Ya, #abc setara dengan #aabbcc. Namun, rentang warna yang dihasilkan lebih terbatas karena hanya ada 4096 kemungkinan (16³) dibandingkan 16.777.216 kemungkinan (256³) untuk format enam digit. Ini adalah batasan dari format singkat itu sendiri, bukan dari alat.

6. Bisakah saya menggunakan alat ini untuk kode warna dari aplikasi desain seperti Figma atau Adobe?
Tentu. Kode HEX dari Figma atau Adobe XD dapat langsung dimasukkan. Alat akan menampilkan RGB yang setara, yang sering diperlukan untuk menulis kode CSS atau untuk digunakan dalam lingkungan yang hanya menerima triplet numerik.