HEX dan RGB: dua cara menulis warna yang sama
Setiap warna yang Anda lihat di layar dicampurkan dari tiga cahaya: merah, hijau, dan biru. Nyalakan ketiganya sepenuhnya dan Anda mendapatkan putih; matikan semuanya dan Anda mendapatkan hitam. HEX dan RGB hanyalah dua notasi untuk mendeskripsikan seberapa terang masing-masing dari tiga saluran tersebut. Keduanya menunjuk ke warna yang sama persis, sehingga konverter yang baik hanya menerjemahkan antara dua sistem penulisan tanpa pernah mengubah nuansa warna yang sebenarnya. Itulah yang dilakukan alat ini, sepenuhnya di browser Anda, sambil menampilkan sampel warna langsung agar Anda dapat mengonfirmasi hasilnya dengan mata sendiri.
Cara membaca kode hex
Kode warna hex terlihat seperti #1E90FF. Tanda pagar hanya menandai awalnya; enam karakter setelahnya adalah tiga pasang, ditulis dalam pola #RRGGBB. Pasang pertama adalah merah, kedua adalah hijau, ketiga adalah biru. Setiap pasang adalah angka yang ditulis dalam heksadesimal, artinya basis 16, di mana digit berjalan 0-9 kemudian A, B, C, D, E, F mewakili 10 hingga 15. Satu pasang dapat menampung nilai dari 00 (saluran sepenuhnya mati) hingga FF (sepenuhnya menyala). Dalam desimal biasa, rentang tersebut tepat 0 hingga 255, skala yang sama yang digunakan RGB. Dengan 256 level yang memungkinkan per saluran, bentuk enam digit dapat mendeskripsikan 16.777.216 warna yang berbeda.
Konversi kedua arah, dengan contoh nyata
Untuk beralih dari HEX ke RGB, pisahkan kode menjadi tiga pasangnya dan konversi setiap pasang dari basis 16 ke desimal biasa. Ambil #1E90FF. Pasang merah adalah 1E: itu adalah 1 dikalikan 16, ditambah 14 (E), yang sama dengan 30. Pasang hijau 90 adalah 9 dikalikan 16, ditambah 0, yang sama dengan 144. Pasang biru FF adalah 15 dikalikan 16, ditambah 15, yang sama dengan 255. Jadi #1E90FF menjadi rgb(30, 144, 255) — warna dodger blue yang familiar.
Sebaliknya adalah proses yang sama dalam urutan terbalik. Ambil setiap angka RGB dan tuliskan sebagai dua digit hex. Merah murni, rgb(255, 0, 0), menghasilkan FF, 00, dan 00, yang digabungkan menjadi #FF0000. Satu hal yang perlu diingat: jika nilainya di bawah 16, Anda masih membutuhkan kedua digit, jadi 5 ditulis 05 bukan hanya 5. Konverter menangani padding tersebut untuk Anda, tetapi ini sering menjebak orang ketika melakukannya secara manual.
Di mana setiap format digunakan
HEX adalah bahasa sehari-hari web. CSS, HTML, dan sebagian besar kode yang Anda tulis menggunakan kode hex karena kompak dan mudah disalin. RGB cenderung muncul di dalam alat desain dan gambar — Figma, Photoshop, Sketch, dan Illustrator biasanya menampilkan slider atau field dalam rentang 0-255, dan aplikasi screen-recording atau video sering mengharapkan RGB juga. Jadi Anda sering mengambil kode hex dari stylesheet dan membutuhkan bentuk RGB-nya untuk diketik ke dalam panel desain, atau sebaliknya. Perjalanan bolak-balik itulah yang membuat konverter sangat berguna. Jika Anda perlu membuat seluruh set warna yang cocok daripada menerjemahkan satu warna, generator palet warna kami adalah titik awal yang lebih baik, dan Anda akan menemukan lebih banyak utilitas seperti ini di bawah alat developer.
Alpha, opacity, dan HSL
Kedua notasi memiliki bentuk yang diperluas yang menambahkan transparansi. RGB menjadi rgba(30, 144, 255, 0.5), di mana nilai keempat adalah alpha — 0 berarti sepenuhnya transparan dan 1 berarti sepenuhnya padat. HEX menambahkan pasang keempat untuk tujuan yang sama, memberikan kode #RRGGBBAA delapan digit; 80, misalnya, adalah sekitar 50 persen opacity. Beberapa konverter juga menawarkan HSL (hue, saturation, lightness), yang mendeskripsikan warna seperti cara manusia berpikir — pilih hue pada roda, lalu atur kejenuhan dan kecerahannya. HSL adalah model mental yang berbeda daripada palet yang berbeda, sehingga bisa lebih intuitif ketika Anda ingin menyesuaikan warna menjadi lebih terang atau lebih redup tanpa mengatur tiga angka terpisah.
Pertanyaan yang sering diajukan
Apakah tanda pagar merupakan bagian dari kode hex?
Tanda pagar adalah penanda yang memberi tahu CSS dan alat desain bahwa Anda memberikan warna hex. Warna itu sendiri adalah enam karakter setelahnya. Sebagian besar alat menerima kode dengan atau tanpa tanda pagar dan menambahkannya kembali untuk Anda.
Apa perbedaan antara kode hex 3 digit dan 6 digit?
Kode 3 digit adalah singkatan di mana setiap digit digandakan, sehingga #1AF berarti #11AAFF. Kode ini hanya menjangkau 4.096 warna, sementara bentuk 6 digit penuh menjangkau lebih dari 16 juta.
Mengapa kode hex saya memiliki delapan karakter?
Kode hex 8 digit menambahkan pasang keempat untuk alpha, atau transparansi. Enam karakter pertama masih merah, hijau, dan biru, dan dua terakhir mengatur opacity dari 00 (tidak terlihat) hingga FF (padat).
Apakah kode hex peka huruf besar-kecil?
Tidak. #1e90ff dan #1E90FF mendeskripsikan warna yang sama persis. Huruf heksadesimal bekerja sama dalam huruf besar maupun kecil, jadi gunakan mana pun yang disukai tim Anda.
Apakah HEX dan RGB pernah terlihat berbeda di layar?
Tidak. Ketika mereka mendeskripsikan nilai saluran yang sama, mereka adalah warna yang identik. Perbedaan yang terlihat muncul dari kesalahan ketik atau dari satu kode yang menyertakan transparansi yang tidak ada pada kode lainnya.
Berapa banyak warna yang bisa ditampilkan oleh kode hex standar?
Kode hex 6 digit menawarkan 256 level untuk masing-masing dari tiga saluran, yang dikalikan menjadi 16.777.216 warna yang memungkinkan.