RGB memberi tiga kanal desimal antara 0 dan 255. Mengonversi ke HEX mengubah setiap kanal menjadi angka heksadesimal dua digit, sehingga seluruh warna muat dalam satu token ringkas yang dimengerti browser, alat desain, dan panduan gaya.
Cara konversi RGB ke HEX bekerja
- Ambil kanal merah dan bagi dengan 16: hasil bagi adalah digit pertama, sisanya digit kedua.
- Tulis digit 10 sampai 15 sebagai huruf A sampai F — 255 menjadi FF.
- Ulangi untuk hijau dan biru, tambahkan nol di depan untuk angka satu digit: 5 menjadi 05.
- Gabungkan ketiga pasangan dan beri tanda # di depannya.
Contoh yang bekerja
Tepat, selama kanalnya adalah bilangan bulat dari 0 sampai 255. Nilai pecahan seperti rgb(79.5, 70, 229) dibulatkan ke bilangan bulat terdekat dulu, karena HEX tidak bisa menyimpan nilai di antaranya.
RGB dan HEX dijelaskan
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()
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
Tabel referensi RGB ke HEX
Warna CSS yang paling umum, dikonversi dari RGB ke HEX.
| Warna | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |