Cara menggunakan Konverter HEX ke RGBA
- Ketik atau tempel kode HEX, misalnya
#ff6347, atau pilih warna dengan kotak warna. - Geser slider opacity (0 sampai 1) untuk mengatur transparansi. Pratinjau papan catur menampilkan hasilnya.
- Klik Salin di samping format yang kamu butuhkan:
rgba(),rgb()modern, HEX 8 digit, HSLA, atau OKLCH. - Tempel nilai
rgba()atau HEX 8 digit untuk konversi sebaliknya. Slider akan membaca nilai alpha-nya.
Apa fungsi konverter HEX ke RGBA?
Kode HEX seperti #FF6347 terdiri dari tiga pasang digit heksadesimal: merah FF (255), hijau 63 (99), dan biru 47 (71). Format HEX enam digit klasik tidak punya ruang untuk transparansi, jadi saat kamu butuh overlay, bayangan, atau efek hover yang semi-transparan, kamu perlu mengonversinya ke rgba(255, 99, 71, 0.5). Nilai keempat adalah kanal alpha dari 0 (tidak terlihat) sampai 1 (solid).
Cara kerja konversinya
Setiap pasang dua digit diubah dari basis 16 ke basis 10: FF = 15×16 + 15 = 255, 63 = 6×16 + 3 = 99. Singkatan tiga digit seperti #f63 diperluas dengan menggandakan setiap digit (#ff6633). Nilai alpha yang kamu pilih ditambahkan apa adanya.
Sintaks mana yang sebaiknya dipakai?
| Sintaks | Contoh | Catatan |
|---|---|---|
| rgba() klasik | rgba(255, 99, 71, 0.5) | Bekerja di mana saja, termasuk browser lama dan klien email. |
| rgb() modern | rgb(255 99 71 / 50%) | CSS Color Level 4, dipisah spasi dengan alpha setelah garis miring. Didukung semua browser modern. |
| HEX 8 digit | #ff634780 | Dua digit terakhir adalah alpha (80 hex = 128 ≈ 50%). Praktis di alat desain dan kolom warna Webflow. |
| Variabel kanal | rgb(var(--color) / .5) | Simpan hanya kanal warna di custom property lalu ubah opacity sesuai kebutuhan. Pola ini dipakai Tailwind. |
Opacity vs alpha
Properti CSS opacity memudarkan seluruh elemen termasuk teks dan turunannya. Background RGBA hanya membuat warnanya sendiri transparan, sehingga teks di atasnya tetap jelas terbaca. Untuk overlay di atas gambar dan kartu berwarna, RGBA (atau color-mix()) biasanya pilihan yang tepat. Ingat bahwa warna teks yang semi-transparan akan mengubah kontras tergantung apa yang ada di belakangnya. Periksa hasilnya dengan Pemeriksa Kontras.
Juga dicari sebagai: hex ke rgb, rgba, opacity, transparansi, alpha, hex8, rgba ke hex.
Tool yang cocok dipakai bersama Konverter HEX ke RGBA
- Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.
- Konverter OKLCH — Jelajahi ruang warna OKLCH yang seragam secara persepsi dengan slider langsung, cek apakah warna masuk ke sRGB, dan salin fallback HEX, RGB, dan HSL yang sesuai.
- Pencampur Warna — Pilih dua warna dan jumlah langkah untuk mendapatkan warna transisi yang tercampur merata, cocok untuk gradien, border, chart, dan state hover.
- Generator Warna Tailwind — Tempel satu warna brand dan dapatkan skala shade 11 langkah (50 sampai 950) yang seimbang, dibangun dengan OKLCH — lengkap dengan petunjuk kontras dan ekspor untuk Tailwind v3, v4, CSS, dan SCSS.
Pertanyaan yang sering diajukan
Bagaimana cara mengonversi HEX ke RGBA secara manual?
#336699 dengan 70% menjadi rgba(51, 102, 153, 0.7).Berapa nilai HEX untuk opacity 50%?
80 dalam hex. Jadi hitam 50% adalah #00000080. 25% adalah 40, dan 75% adalah BF.Apakah rgba() sudah usang?
rgba() sebagai alias dari rgb(), dan keduanya menerima nilai alpha. Sintaks dengan koma tetap berfungsi di semua browser.Bisakah saya mengonversi RGBA kembali ke HEX?
rgba() ke kolom input. Kamu akan mendapatkan HEX tanpa transparansi dan HEX 8 digit yang menyertakan kanal alpha.