Cara mengonversi kode warna HEX ke RGB
HEX dan RGB adalah dua cara untuk menulis warna yang persis sama. Desainer dan pengembang terus-menerus berpindah-pindah antara keduanya — HEX dalam stylesheet CSS, RGB dalam animasi JavaScript, HSL dalam alat desain. Memahami hubungannya membuat pekerjaan dengan warna jauh lebih sederhana.
Bagaimana HEX bekerja
Kode warna HEX seperti #FF5733 adalah angka heksadesimal 6 digit yang mewakili saluran merah, hijau, dan biru:
| Bagian | Hex | Desimal | Saluran |
|---|---|---|---|
| FF | FF | 255 | Merah |
| 57 | 57 | 87 | Hijau |
| 33 | 33 | 51 | Biru |
Setiap saluran berkisar dari 00 (0, tanpa warna) hingga FF (255, intensitas maksimum). Jadi #FF5733 berarti merah penuh, hijau sedang, sedikit biru — yang menghasilkan merah-oranye yang hangat.
Cara mengonversi HEX ke RGB
- Masukkan kode HEX Anda — ketik atau tempel kode seperti #FF5733, atau gunakan pemilih warna.
- Lihat nilai RGB — lihat padanan dalam merah, hijau, dan biru (0-255 masing-masing).
- Salin dalam format apa pun — dapatkan nilai dalam
rgb(255, 87, 51), saluran individu, atau format lain seperti HSL.
Kode warna umum
| Warna | HEX | RGB |
|---|---|---|
| Putih | #FFFFFF | rgb(255, 255, 255) |
| Hitam | #000000 | rgb(0, 0, 0) |
| Merah | #FF0000 | rgb(255, 0, 0) |
| Hijau | #00FF00 | rgb(0, 255, 0) |
| Biru | #0000FF | rgb(0, 0, 255) |
| Kuning | #FFFF00 | rgb(255, 255, 0) |
Tips
- Gunakan HEX di CSS —
color: #FF5733lebih bersih dan lebih umum daripadacolor: rgb(255, 87, 51)dalam stylesheet. - Gunakan RGB untuk transparansi — ketika Anda butuh warna semi-transparan, gunakan
rgba(255, 87, 51, 0.5). Tidak ada cara untuk menambahkan alpha dalam HEX standar (meskipun HEX 8 digit ada, dukungan peramban bervariasi). - Pintasan 3 digit —
#F00setara dengan#FF0000. Gunakan ini ketika setiap pasangan memiliki digit yang identik untuk menghemat ruang. - Pemilih warna lebih cepat — jika Anda mencari warna yang tepat, gunakan pemilih visual alih-alih menebak nilai HEX. Salin kode setelah Anda puas.
Pertanyaan yang sering diajukan
Bagaimana mengonversi HEX ke RGB secara manual?
Pisahkan kode hex menjadi tiga pasangan (mis. #FF8800 menjadi FF, 88, 00). Konversikan setiap pasangan dari basis 16 ke basis 10. FF = 255, 88 = 136, 00 = 0. Hasilnya rgb(255, 136, 0).
Bagaimana dengan kode HEX 3 digit?
HEX 3 digit adalah pintasan di mana setiap digit diduakalikan. #F80 setara dengan #FF8800. Sebagian besar konverter menangani kedua format secara otomatis.
Kapan menggunakan HEX vs RGB?
HEX lebih kompak dan lebih umum dalam CSS. RGB lebih disukai ketika Anda perlu memanipulasi saluran secara individual dalam kode atau menggunakan rgba() untuk transparansi. Keduanya mewakili warna yang sama.
Apa yang diwakili simbol # dalam kode HEX?
Tanda pagar (#) adalah awalan yang menunjukkan bahwa nilainya adalah kode warna heksadesimal. Itu bukan bagian dari nilainya sendiri. Beberapa alat menerima kode dengan atau tanpa tanda pagar.