RGB memberi anda tiga saluran perpuluhan antara 0 dan 255. Menukar kepada HEX menukar setiap saluran kepada nombor heksadesimal dua digit, supaya keseluruhan warna muat ke dalam satu token padat yang difahami oleh setiap pelayar, alat reka bentuk dan garis panduan gaya.
Bagaimana penukaran RGB ke HEX berfungsi
- Ambil saluran merah dan bahagi dengan 16: hasil bahagi ialah digit pertama, baki ialah digit kedua.
- Tulis digit 10 hingga 15 sebagai huruf A hingga F — 255 menjadi FF.
- Ulang untuk hijau dan biru, tambahkan sifar di hadapan untuk digit tunggal: 5 menjadi 05.
- Gabungkan ketiga-tiga pasangan dan letakkan # di hadapan.
Contoh terperinci
Tepat, selagi saluran adalah nombor bulat dari 0 hingga 255. Nilai pecahan seperti rgb(79.5, 70, 229) dibundarkan ke integer terdekat dahulu, kerana HEX tidak boleh menyimpan nilai di antara.
RGB dan HEX diterangkan
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()
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
Jadual rujukan RGB ke HEX
Warna CSS paling biasa, ditukar 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 |