Kode HEX memadatkan tiga angka 8‑bit menjadi enam digit heksadesimal. Mengonversi HEX ke RGB berarti memecah digit tersebut menjadi pasangan dan membaca setiap pasangan sebagai angka desimal antara 0 dan 255 — tepat seperti yang diharapkan CSS, Figma, dan editor gambar.
Cara konversi HEX ke RGB bekerja
- Buang tanda # di depan dan, jika kodenya hanya tiga digit, gandakan tiap digit: #f53 menjadi #ff5533.
- Pisahkan enam digit menjadi tiga pasangan — RR, GG, dan BB.
- Baca setiap pasangan sebagai angka basis‑16 dan konversi ke basis 10: FF menjadi 255, 57 menjadi 87, 33 menjadi 51.
- Tulis ketiga hasil sebagai rgb(R, G, B).
Contoh yang bekerja
Konversi ini tepat. HEX dan RGB menggambarkan nilai sRGB yang sama dalam notasi berbeda, jadi tidak ada pembulatan atau kehilangan di kedua arah.
HEX dan RGB dijelaskan
Apa itu HEX?
Kode HEX adalah angka heksadesimal enam digit yang menyimpan kanal merah, hijau, dan biru di balik tanda #. Setiap pasangan digit mewakili satu kanal, dari 00 (tidak ada) sampai FF (penuh), memberi 16,7 juta warna yang sama seperti RGB dalam notasi yang lebih singkat. HEX adalah default di CSS, alat desain, dan panduan merek.
- Sintaks:
- #RRGGBB
- Rentang:
- 00–FF per kanal
- Terbaik untuk:
- CSS, serah terima desain, panduan merek
Apa itu RGB?
RGB menggambarkan warna sebagai tiga kanal cahaya — merah, hijau, dan biru — masing‑masing dari 0 sampai 255. Ini mencerminkan cara kerja layar sebenarnya: ketiganya di 255 memberi putih, semuanya di 0 memberi hitam. RGB tepat ketika kamu perlu menghitung dengan warna, dan rgba() menambahkan transparansi di atasnya.
- Sintaks:
- rgb(R, G, B)
- Rentang:
- 0–255 per kanal
- Terbaik untuk:
- kode, canvas, transparansi dengan rgba()
Tabel referensi HEX ke RGB
Warna CSS yang paling umum, dikonversi 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) |