Kod HEX memadatkan tiga nombor 8-bit ke dalam enam digit heksadesimal. Menukar HEX kepada RGB bermaksud memecahkan digit itu kepada pasangan dan membaca setiap pasangan sebagai nombor perpuluhan antara 0 dan 255 — tepat seperti nilai yang dijangka oleh CSS, Figma dan editor imej.
Bagaimana penukaran HEX ke RGB berfungsi
- Buang awalan # dan, jika kod hanya tiga digit, gandakan setiap digit: #f53 menjadi #ff5533.
- Pisahkan enam digit itu kepada tiga pasangan — RR, GG dan BB.
- Baca setiap pasangan sebagai nombor asas-16 dan tukarkannya kepada asas 10: FF menjadi 255, 57 menjadi 87, 33 menjadi 51.
- Tulis ketiga-tiga hasil itu sebagai rgb(R, G, B).
Contoh terperinci
Penukaran ini tepat. HEX dan RGB menerangkan nilai sRGB yang sama dalam notasi berbeza, jadi tiada pembundaran atau kehilangan data dalam kedua-dua arah.
HEX dan RGB diterangkan
Apakah HEX?
Kod HEX adalah nombor enam digit heksadesimal yang menyimpan saluran merah, hijau dan biru sesuatu warna dengan awalan #. Setiap pasangan digit mewakili satu saluran, dari 00 (tiada) hingga FF (penuh), yang memberi jumlah 16.7 juta warna sama seperti RGB tetapi dalam notasi lebih pendek. HEX adalah lalai dalam CSS, alat reka bentuk dan garis panduan jenama.
- Sintaks:
- #RRGGBB
- Julat:
- 00–FF per saluran
- Terbaik untuk:
- CSS, serahan reka bentuk, garis panduan jenama
Apakah RGB?
RGB menerangkan warna sebagai tiga saluran cahaya — merah, hijau dan biru — setiap satu dari 0 hingga 255. Ia menggambarkan cara skrin berfungsi: ketiga-tiganya pada 255 memberi putih, ketiga pada 0 memberi hitam. RGB adalah pilihan tepat bila anda perlu mengira dengan warna, dan rgba() menambah ketelusan di atasnya.
- Sintaks:
- rgb(R, G, B)
- Julat:
- 0–255 per saluran
- Terbaik untuk:
- kod, canvas, ketelusan dengan rgba()
Jadual rujukan HEX ke RGB
Warna CSS paling biasa, ditukar dari HEX ke RGB.
| Warna | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |