Penukar RGB kepada HEX

Pengenalan kepada Penukar RGB ke Hex

Laman ini menerima tiga nombor perpuluhan yang mewakili nilai merah, hijau, dan biru – setiap satu antara 0 dan 255 – lalu memaparkan kod warna heksadesimal yang setara dengan serta-merta, seperti #1E90FF. Selain kod hex, alat ini juga menunjukkan sampel warna secara visual dan mengemas kini semua format warna lain yang disokong (HSL, HSV, CMYK, LAB, dan pemetik warna) dalam masa nyata. Tiada butang “tukar” yang perlu ditekan; sebaik sahaja anda mengubah mana-mana medan input, semua medan lain akan berubah serentak.

Apa yang membezakan laman ini daripada penukar RGB-ke-hex yang lain adalah ketepatan penukaran. Kedua-dua format RGB (perpuluhan, tiga saluran 0–255) dan hex (heksadesimal, enam digit) beroperasi dalam ruang warna sRGB yang sama, iaitu ruang kerja yang digunakan oleh kebanyakan skrin moden. Oleh sebab itu, tiada pemotongan gamut atau penghampiran warna – penukaran adalah tepat dan boleh balik. Output hex sentiasa bermula dengan # dan, melainkan anda menggunakan bentuk lapan digit (yang tidak disediakan di sini), tidak membawa saluran alfa. Alat ini mengharapkan input RGB dalam bentuk tiga nombor yang dipisahkan oleh koma atau ruang, contohnya 79, 70, 229. Kod hex yang terhasil sentiasa enam digit, seperti #4F46E5, kerana setiap nilai 0–255 dipetakan kepada sepasang digit heksadesimal dua digit.

Semua pemprosesan berlaku dalam pelayar anda – tiada data yang dihantar ke pelayan. Ini bermakna privasi terjamin dan kelajuan tindak balas adalah segera.

Cara Kerja Penukaran RGB ke Hex

Penukaran RGB ke hex adalah matematik yang mudah tetapi penting untuk difahami. Setiap saluran warna (merah, hijau, biru) dalam RGB menggunakan skala 0 hingga 255, iaitu 256 nilai yang mungkin. Bilangan ini bukan kebetulan – 256 bersamaan dengan 16², dan sistem perenambelasan (heksadesimal) menggunakan asas 16. Oleh itu, setiap nilai perpuluhan boleh diwakili dengan tepat oleh dua digit heksadesimal.

Langkah penukaran bagi satu saluran adalah seperti berikut:

1. Bahagikan nilai perpuluhan dengan 16. Hasil bahagi integer (tanpa baki) memberikan digit heksadesimal pertama.
2. Baki daripada pembahagian itu memberikan digit heksadesimal kedua.
3. Tukarkan setiap hasil bahagi dan baki kepada simbol heksadesimal: 0–9 kekal sebagai angka, 10 menjadi A, 11 menjadi B, 12 menjadi C, 13 menjadi D, 14 menjadi E, 15 menjadi F.

Ambil contoh nilai merah 79:

• 79 ÷ 16 = 4, baki 15. Digit pertama: 4, digit kedua: F. Maka 4F. Nilai hijau 70:
• 70 ÷ 16 = 4, baki 6. Digit pertama: 4, digit kedua: 6. Maka 46. Nilai biru 229:
• 229 ÷ 16 = 14, baki 5. Digit pertama: E, digit kedua: 5. Maka E5.

Gabungkan ketiga-tiga pasangan: 4F 46 E5 → #4F46E5.

Nilai maksimum, 255, memberikan FF kerana 255 ÷ 16 = 15 (F) baki 15 (F). Nilai minimum, 0, memberikan 00. Oleh itu, semua kod hex yang terhasil daripada alat ini mengandungi enam digit, tidak termasuk tanda #. Alat ini tidak memendekkan pasangan digit yang sama secara automatik – contohnya, #AABBCC kekal sebagai #AABBCC, bukan #ABC. Walau bagaimanapun, medan input hex pada laman ini menerima singkatan tiga digit seperti #abc dan akan mengembangkannya secara dalaman kepada #AABBCC sebelum membuat sebarang penukaran lain.

Jadual di bawah menunjukkan beberapa contoh penukaran:

Perhatikan bahawa huruf dalam kod hex boleh ditulis dalam huruf besar atau kecil – kedua-dua #4F46E5 dan #4f46e5 adalah sah dan dianggap sama oleh pelayar web. Alat ini akan memaparkan huruf besar secara lalai, tetapi input anda tidak perlu mengikut kes tertentu.

Format Input dan Output yang Dijangka

Input RGB mestilah tiga nombor integer dalam julat 0 hingga 255. Pemisah yang diterima adalah koma (,) atau ruang ( ). Anda boleh menggunakan gabungan, misalnya 79, 70 229 juga akan berfungsi kerana alat ini akan menghapuskan ruang dan koma yang berlebihan. Walau bagaimanapun, format yang paling stabil adalah tiga nombor dipisahkan koma, seperti 79, 70, 229.

Sekiranya anda memasukkan nilai di luar julat 0–255, atau format yang tidak dapat ditafsir (contohnya 79, 70 – hanya dua nombor), alat ini akan memaparkan mesej ralat:
“Masukkan RGB sebagai tiga nombor 0–255, contohnya 79, 70, 229.” (Mesej asal dalam bahasa Inggeris, tetapi versi terjemahan ini digunakan dalam artikel untuk kejelasan.)

Output sentiasa bermula dengan # diikuti enam digit heksadesimal. Tiada ruang atau aksara lain. Sebagai tambahan kepada kod hex, laman ini juga memaparkan:

• Swatch warna – segi empat tepat yang diisi dengan warna yang sepadan.
• Format HSL – Hue, Saturation, Lightness.
• Format HSV/HSB – Hue, Saturation, Value/Brightness.
• Format CMYK – Cyan, Magenta, Yellow, Black (untuk rujukan cetakan, walaupun penukaran ini tidak tepat untuk semua profil kertas).
• Format LAB – CIE Lab* (ruang warna persepsi).
• Pemetik warna – anda boleh mengklik swatch untuk memilih warna secara grafik.

Semua medan ini boleh diedit secara langsung. Sebagai contoh, jika anda menukar nilai HSL, alat akan mengira semula RGB dan hex yang sepadan. Ini membolehkan anda meneroka warna dalam pelbagai perwakilan serentak.

Aturan dan Kes Tepi yang Perlu Diketahui

Terdapat beberapa peraturan penting yang memastikan alat ini berfungsi dengan tepat dan konsisten.

Tiada butang tukar. Sebaik sahaja anda menaip atau menampal nilai dalam mana-mana medan warna (RGB, hex, HSL, HSV, CMYK, LAB), alat akan serta-merta mengemas kini semua medan lain. Ini berguna untuk melihat kesan perubahan kecil dengan pantas, tetapi bermakna anda perlu memastikan input adalah sah sebelum menekan Enter atau mengklik di luar medan.

Input hex tiga digit diterima. Jika anda memasukkan kod hex pendek seperti #abc, alat akan mengembangkannya menjadi #AABBCC dan seterusnya menukar ke RGB. Proses pengembangan dilakukan dengan menggandakan setiap digit: a menjadi aa, b menjadi bb, c menjadi cc. Ini adalah piawaian CSS dan alat ini mengikutinya.

Tiada pelarasan gamut. Oleh kerana RGB dan hex berkongsi ruang warna sRGB yang sama, sebarang warna RGB yang sah (dalam julat 0–255) akan mempunyai kod hex yang setara tanpa perubahan. Ini berbeza dengan penukaran RGB ke CMYK, di mana sesetengah warna RGB mungkin berada di luar gamut dakwat dan perlu dilaraskan. Alat ini tidak melakukan pelarasan sedemikian untuk penukaran RGB-ke-hex.

Semua pemprosesan setempat. Tiada data yang dihantar ke pelayan. Ini bermakna anda boleh menggunakan alat ini di luar talian jika halaman telah dimuatkan, dan tiada kebimbangan privasi mengenai warna yang anda masukkan.

Kod hex enam digit sentiasa dihasilkan. Alat ini tidak akan menghasilkan kod tiga digit walaupun pasangan digit adalah sama (seperti #FFCC00 → #FC0). Ini untuk memastikan keserasian maksimum dengan semua sistem yang mungkin hanya menerima format enam digit. Walau bagaimanapun, anda boleh menyalin kod hex yang dihasilkan dan memendekkannya sendiri jika perlu.

Kesalahan biasa. Ramai pengguna tersilap memasukkan peratusan (contohnya 50% ) atau nombor perpuluhan (seperti 255.5). Alat ini hanya menerima integer. Jika anda memasukkan 128, 99, 200.5, alat akan menolak input tersebut kerana nilai biru bukan integer. Begitu juga, memasukkan 0, 128 (hanya dua nombor) akan mencetuskan ralat. Pastikan anda memberikan tiga nombor integer yang dipisahkan dengan betul.

Siapa Yang Memerlukan Alat Ini?

Alat penukar RGB ke hex ini direka untuk pelbagai pengguna yang bekerja dengan warna dalam persekitaran digital.

Pemaju hadapan (front-end developers) selalunya menerima spesifikasi warna dalam bentuk RGB daripada perisian reka bentuk atau palet warna yang dikongsi. Dalam CSS, warna latar atau teks biasanya ditulis dalam hex. Alat ini membolehkan pemaju menyalin kod hex terus ke dalam helaian gaya tanpa perlu mengira sendiri. Contohnya, jika pereka memberikan nilai RGB (41, 128, 185), alat akan menghasilkan #2980B9 – sedia untuk digunakan dalam background-color.

Pereka UI/UX yang bekerja dengan alat reka bentuk seperti Figma, Sketch, atau Adobe XD sering menggunakan sistem warna yang memaparkan kod hex. Namun, apabila menerima input daripada rakan sekerja yang menggunakan nilai RGB perpuluhan, penukaran pantas diperlukan. Alat ini mengurangkan geseran dengan menyediakan hasil segera dan juga membolehkan pereka melihat warna dalam format lain seperti HSL, yang lebih intuitif untuk pelarasan kecerahan dan kepekatan.

Pereka grafik yang menghasilkan aset web perlu memastikan konsistensi warna antara prototaip RGB dan pelaksanaan akhir dalam kod. Oleh kerana kebanyakan pelayar dan peranti menggunakan sRGB, penukaran RGB-ke-hex adalah tepat dan boleh diulang. Pereka boleh menguji warna yang sama dalam alat pemetik warna Photoshop dan kemudian memasukkan nilai RGB ke sini untuk mendapatkan kod hex yang sesuai untuk CSS.

Pelajar dan peminat yang belajar tentang warna digital akan mendapati alat ini berguna untuk memahami hubungan antara perwakilan perpuluhan dan perenambelasan. Dengan memasukkan nilai seperti 255, 255, 0 dan melihat #FFFF00, mereka dapat melihat bagaimana kuning terbentuk daripada gabungan merah dan hijau penuh. Ini membantu dalam pembelajaran sistem warna aditif.

Sesiapa yang menggunakan data pemetik warna daripada alat seperti penyemak imbas (alat pembangun) atau perisian grafik. Banyak alat mengembalikan nilai RGB, tetapi dokumentasi atau kod mungkin memerlukan hex. Alat ini menjimatkan masa dengan mengelakkan pengiraan manual atau carian dalam talian yang lain.

Soalan Lazim (FAQ)

1. Apakah perbezaan antara kod hex enam digit dan tiga digit?
Kod enam digit, seperti #FF6600, mewakili warna dengan tepat menggunakan dua digit bagi setiap saluran. Kod tiga digit, seperti #F60, adalah singkatan yang hanya sah jika setiap pasangan digit dalam kod enam digit adalah sama (contohnya #FF6600 boleh ditulis #F60). Alat ini menerima input tiga digit tetapi sentiasa mengeluarkan enam digit untuk mengelakkan kekeliruan.

2. Bolehkah saya menggunakan huruf besar atau kecil dalam kod hex?
Ya, kedua-duanya sah. Alat ini akan memaparkan output dalam huruf besar secara lalai, tetapi jika anda menaip #4f46e5, ia akan ditukar kepada nilai yang sama. Tiada perbezaan dari segi fungsi.

3. Apakah maksud simbol # dalam kod hex?
Simbol # adalah awalan piawai untuk kod warna heksadesimal dalam HTML dan CSS. Ia memberitahu pelayar bahawa nombor berikut adalah dalam asas 16. Tanpa #, pelayar akan mentafsirkan nombor tersebut sebagai nilai perpuluhan atau warna kata kunci.

4. Mengapa kod hex saya sentiasa enam digit? Mengapa tidak tiga digit?
Alat ini direka untuk menghasilkan format enam digit kerana ia adalah bentuk penuh dan paling serasi. Walaupun banyak pelayar menyokong tiga digit, beberapa konteks (seperti warna gradient atau bayang) memerlukan ketepatan penuh. Anda boleh memendekkannya sendiri jika perlu.

5. Bagaimana jika saya memasukkan nilai di luar julat 0–255?
Alat akan memaparkan mesej ralat yang menyatakan anda perlu memasukkan tiga nombor antara 0 dan 255. Tiada penukaran akan dilakukan sehingga input diperbetulkan. Ini mengelakkan warna yang tidak sah.

6. Adakah alat ini menyokong saluran alfa seperti #RRGGBBAA?
Tidak, alat ini hanya berurusan dengan warna legap. Input RGB tidak termasuk alfa, dan output sentiasa enam digit. Untuk warna dengan ketelusan, anda perlu menggunakan alat penukar RGBA ke hex lapan digit yang berasingan.