Penukar HEX kepada RGB

Tukar Kod HEX ke RGB dengan Tepat dan Pantas

Apabila anda menaip kod warna HEX seperti #4f46e5 ke dalam medan input, halaman ini terus memaparkan nilai RGB yang sepadan – tiga nombor antara 0 dan 255. Hasilnya dipaparkan bersama format warna lain, sedia untuk disalin terus ke dalam kod atau perisian reka bentuk. Perbezaan utama halaman ini berbanding alat penukar warna lain adalah ia menukar perwakilan perenambelasan (asas-16) kepada perpuluhan (asas-10) saluran RGB yang digunakan secara langsung oleh paparan dan pengiraan campuran warna. Walaupun kod HEX padat dan meluas dalam CSS, ia sebenarnya hanyalah bentuk ringkas bagi tiga saluran 8-bit yang sama yang dinyatakan secara berangka oleh RGB.

Oleh kerana ini adalah penukaran HEX-ke-RGB, peraturannya spesifik: kod HEX diberikan sebagai enam digit (#RRGGBB) atau bentuk ringkas tiga digit (#RGB), di mana setiap digit ringkas digandakan untuk membentuk kod enam digit penuh. Awalan # adalah pilihan; alat ini menerima kod dengan atau tanpa #. Saluran RGB sasaran sentiasa integer dari 0 hingga 255, tanpa saluran alfa (kod HEX lapan digit yang mengandungi alfa tidak dikendalikan di sini; halaman ini hanya menjangkakan kod enam atau tiga digit). Penukaran adalah matematik semata-mata: setiap pasangan digit perenambelasan didarab dengan kuasa 16, jadi hasilnya tepat dan boleh diterbalikkan (tiada pembundaran atau pemotongan gamut).

Bagaimana Penukaran HEX ke RGB Berfungsi

Kod warna HEX mewakili warna dalam sistem perenambelasan, di mana setiap digit boleh bernilai 0–9 atau A–F (A=10, B=11, C=12, D=13, E=14, F=15). Enam digit HEX dibahagikan kepada tiga pasangan: dua digit pertama untuk merah (RR), dua digit tengah untuk hijau (GG), dan dua digit terakhir untuk biru (BB). Setiap pasangan ditukar kepada nombor perpuluhan dengan formula:

Nilai perpuluhan = (digit pertama × 16) + digit kedua

Contohnya, #4f46e5:

• Merah: 4f → (4×16) + 15 = 64 + 15 = 79
• Hijau: 46 → (4×16) + 6 = 64 + 6 = 70
• Biru: e5 → (14×16) + 5 = 224 + 5 = 229

Maka RGB yang terhasil ialah 79, 70, 229. Proses ini tepat dan boleh diterbalikkan – jika anda menukar 79, 70, 229 kembali ke HEX, anda akan mendapat #4f46e5 semula.

Untuk kod tiga digit seperti #abc, alat ini secara automatik menggandakan setiap digit: #abc menjadi #aabbcc. Ini kerana bentuk ringkas hanyalah cara padat untuk menulis kod di mana setiap saluran mempunyai dua digit yang sama. Jadi #abc bersamaan dengan merah aa (170), hijau bb (187), biru cc (204), menghasilkan RGB 170, 187, 204.

Jadual Penukaran Pantas untuk Warna Biasa

Peraturan dan Kes Sempadan

Halaman ini mematuhi beberapa peraturan ketat untuk memastikan penukaran yang boleh diramal:

• Format yang sah: Kod HEX mesti enam digit (#RRGGBB) atau tiga digit (#RGB). Awalan # adalah pilihan; alat menerima #4f46e5 mahupun 4f46e5.
• Kesalahan format: Jika anda memasukkan nilai yang tidak sepadan – misalnya #xyz, #12345 (lima digit), atau #1234567 (tujuh digit) – halaman memaparkan mesej ralat: "Enter a hex color like #4f46e5 or #abc." Tiada penukaran dibuat sehingga input dibetulkan.
• Kod lapan digit tidak dikendalikan: Kod seperti #4f46e580 (dengan saluran alfa) tidak diterima. Halaman ini direka khusus untuk penukaran HEX ke RGB tanpa alfa. Untuk warna lut sinar, anda perlu menggunakan alat berasingan.
• Tiada pembundaran: Oleh kerana penukaran adalah matematik tepat dari asas-16 ke asas-10, nilai RGB yang terhasil adalah integer tepat. Tiada pembundaran atau pemotongan berlaku.
• Kemas kini segera: Sebaik sahaja anda menaip atau memilih warna, medan input lain (HSL, HSV, CMYK, LAB) dikemas kini secara serentak. Ini membolehkan anda melihat perwakilan warna yang sama dalam pelbagai format sekaligus.
• Semua pemprosesan di sisi pelanggan: Tiada data yang dimuat naik atau disimpan; penukaran berlaku terus dalam pelayar anda.

Siapa yang Memerlukan Alat Ini?

Halaman ini berguna untuk beberapa kumpulan pengguna:

• Pembangun hadapan (front-end): Mereka yang perlu menukar kod HEX CSS kepada nilai RGB untuk digunakan dalam JavaScript, kanvas, atau gaya dalam talian yang memerlukan saluran berangka. Contohnya, semasa menggunakan API canvas di mana warna mesti diberikan sebagai rgb(79, 70, 229).
• Pereka grafik: Pereka yang menerima spesifikasi warna dalam HEX daripada garis panduan jenama dan perlu memasukkan nilai tersebut ke dalam alat reka bentuk seperti Adobe Photoshop atau Figma yang menggunakan peluncur RGB.
• Pembangun permainan dan artis digital: Mereka yang bekerja dengan grafik skrin dan perlu memanipulasi warna secara matematik, misalnya untuk mencipta kesan pencahayaan atau gradasi, memerlukan ketepatan nilai saluran 0–255.
• Pelajar dan penggemar: Sesiapa yang ingin memahami bagaimana kod warna perenambelasan berkaitan dengan model warna aditif RGB yang digunakan oleh monitor. Dengan menukar HEX kepada RGB, konsep seperti keamatan saluran dan campuran warna menjadi lebih ketara.

Kaitan Antara HEX dan RGB dalam Pembangunan Web

Dalam CSS, warna boleh ditulis sebagai color: #ff6600 atau color: rgb(255, 102, 0). Kedua-duanya ditafsirkan oleh pelayar dengan cara yang sama – ia hanya perwakilan yang berbeza bagi nilai warna yang sama. Penggunaan HEX menjadi popular kerana bentuknya yang padat: enam digit mudah diingat dan ditaip. Namun, dalam situasi di mana warna perlu dimanipulasi secara pengiraan (misalnya untuk menambah ketelusan, mencerahkan, atau menggelapkan warna), nilai RGB dalam bentuk nombor lebih mudah digunakan.

Selain itu, model warna RGB adalah asas kepada cara monitor memaparkan warna. Setiap piksel pada skrin terdiri daripada subpiksel merah, hijau, dan biru yang masing-masing boleh dihidupkan pada 256 tahap keamatan. Apabila anda menetapkan RGB (255, 102, 0), anda memberitahu monitor untuk menghidupkan merah pada kekuatan penuh, hijau pada kira-kira 40% (102/255), dan biru pada 0%. Hasilnya ialah warna oren terang.

Kesilapan Biasa yang Perlu Dielakkan

Walaupun penukaran HEX ke RGB kelihatan mudah, terdapat beberapa perangkap yang sering dihadapi:

• Menganggap #RGB sama dengan #RRGGBB secara langsung: Walaupun alat ini mengendalikan penggandaan automatik, ramai pengguna tersilap menyangka #abc bersamaan dengan #a0b0c0. Sebenarnya #abc adalah #aabbcc. Jika anda ingin #a0b0c0, anda perlu menulis #a0b0c0 (enam digit).
• Memasukkan kod lapan digit: Kod seperti #4f46e580 mungkin kelihatan seperti HEX, tetapi ia termasuk saluran alfa. Alat ini tidak akan memprosesnya dan akan memaparkan ralat.
• Menggunakan aksara bukan perenambelasan: Huruf G, H, atau aksara lain di luar 0-9 dan A-F akan menyebabkan ralat. Contohnya #4g46e5 tidak sah.
• Lupa bahawa huruf tidak peka huruf besar/kecil: Alat ini menerima sama ada huruf besar atau kecil. #4F46E5 dan #4f46e5 adalah sama.

Soalan Lazim (FAQ)

1. Apakah yang berlaku jika saya memasukkan kod lima digit seperti #12345?

Alat akan menganggap format tidak sah dan memaparkan mesej ralat: "Enter a hex color like #4f46e5 or #abc.". Kod mesti sama ada tiga atau enam digit.

2. Bolehkah saya menggunakan huruf besar dalam kod HEX?

Ya, alat ini tidak peka huruf besar/kecil. #FF0000 dan #ff0000 kedua-duanya memberikan RGB (255, 0, 0).

3. Adakah awalan # wajib?

Tidak. Alat menerima kod dengan atau tanpa #. Anda boleh taip 4f46e5 dan hasilnya sama seperti #4f46e5.

4. Mengapa nilai RGB selalu integer dan bukan nombor perpuluhan?

Kerana penukaran dari perenambelasan ke perpuluhan adalah tepat. Setiap pasangan digit HEX mewakili nilai antara 0 hingga 255 tanpa pecahan. Oleh itu, hasilnya sentiasa integer.

5. Bolehkah alat ini menukar RGB kembali ke HEX?

Halaman ini direka untuk penukaran HEX ke RGB sahaja. Namun, disebabkan hubungan matematik yang boleh diterbalikkan, anda boleh menggunakan alat penukaran RGB ke HEX yang berasingan. Halaman ini juga memaparkan nilai HEX semasa, tetapi input utama adalah kod HEX.

6. Adakah data saya selamat apabila menggunakan alat ini?

Ya. Semua pengiraan dilakukan secara tempatan dalam pelayar anda. Tiada maklumat yang dihantar ke pelayan atau disimpan.

Aplikasi Praktikal: Kontras dan Kebolehcapaian

Salah satu kegunaan penting nilai RGB adalah untuk mengira nisbah kontras bagi memastikan teks boleh dibaca. Piawaian WCAG (Web Content Accessibility Guidelines) menggunakan kecerahan relatif yang dikira daripada saluran RGB. Dengan mempunyai nilai RGB tepat dari kod HEX, anda boleh dengan mudah mengira kecerahan menggunakan formula:

Kecerahan relatif = 0.2126 × R_(linear) + 0.7152 × G_(linear) + 0.0722 × B_(linear)

di mana setiap saluran ditukar kepada nilai linear terlebih dahulu. Alat ini memberikan anda nilai RGB integer yang diperlukan untuk pengiraan tersebut, membantu pereka dan pembangun mematuhi keperluan kebolehcapaian.

Dengan memahami hubungan antara HEX dan RGB, anda bukan sahaja boleh menukar format warna dengan cepat, tetapi juga memperoleh kefahaman yang lebih mendalam tentang bagaimana warna berfungsi pada skrin. Alat ini menjadikan proses itu tepat, telus, dan bebas ralat.