Penukar Warna RGB ke HEX

Sistem Warna RGB dan HEX

RGB (Merah, Hijau, Biru) dan HEX (hexadecimal) adalah dua cara untuk mewakili warna yang sama — mereka hanya menggunakan sistem notasi yang berbeda. Kedua sistem ini menggambarkan warna dengan mencampur tiga warna primer (merah, hijau, biru) dengan intensitas yang berbeda. Memahami kedua sistem ini sangat penting untuk desain web, CSS, desain grafis, pengeditan fotografi, dan seni digital.

Dalam model RGB, setiap dari tiga saluran (merah, hijau, biru) memiliki nilai intensitas dari 0 hingga 255. Nol berarti tidak ada warna; 255 berarti intensitas maksimum. Mencampur semua tiga di 255 memberikan putih (rgb(255,255,255)). Semua tiga di 0 memberikan hitam (rgb(0,0,0)). Dengan 256 nilai mungkin per saluran dan 3 saluran, RGB dapat mewakili 256³ = 16.777.216 warna yang berbeda (sekitar 16,7 juta).

Dalam model HEX, tiga saluran yang sama diungkapkan sebagai angka hexadecimal 2-digit (00 hingga FF), dilengkapi dengan #. Hexadecimal menggunakan angka 0-9 dan huruf A-F, di mana A=10, B=11, C=12, D=13, E=14, F=15. FF dalam hex = 15×16 + 15 = 255 dalam desimal. Jadi #FFFFFF = rgb(255,255,255) = putih. Konversi ini hanya berubah basis: desimal (basis 10) ke hexadecimal (basis 16).

Cara Mengubah RGB ke HEX: Langkah demi Langkah

Mengubah setiap saluran RGB ke hex memerlukan membagi dengan 16 dan mengungkapkan sisa sebagai digit hex:

1. Ambil nilai saluran (0-255)
2. Bagi dengan 16: sisa = digit hex pertama, sisa = digit hex kedua
3. Ungkap kedua jika mereka 10-15 (A-F)
4. Gabungkan: digit pertama + digit kedua = nilai hex 2-karakter
5. Ulangi untuk saluran G dan B
6. Gabungkan: # + R_hex + G_hex + B_hex

Contoh: Ubah rgb(255, 99, 71) ke hex (merah tomat).

• R=255: 255÷16=15 sisa 15 → F + F → FF
• G=99: 99÷16=6 sisa 3 → 6 + 3 → 63
• B=71: 71÷16=4 sisa 7 → 4 + 7 → 47
• Hasil: #FF6347

Warna Web yang Umum: Referensi RGB dan HEX

Di bawah ini adalah tabel referensi yang komprehensif untuk warna web yang paling umum digunakan:

Menggunakan RGB dan HEX di CSS dan Desain Web

CSS menerima beberapa format warna. HEX dan RGB adalah yang paling umum, tetapi CSS modern juga mendukung HSL, nama warna, dan ruang warna oklch dan oklch yang lebih luas untuk layar yang lebih luas.

Dalam CSS, warna dapat ditentukan sebagai:

• color: #FF6347; (HEX)
• color: rgb(255, 99, 71); (RGB)
• color: rgba(255, 99, 71, 0.5); (RGB + transparansi alpha, 0=transparan, 1=transparan)
• color: hsl(9, 100%, 64%); (Hue, Satuan, Kecerahan)
• color: tomato; (Nama warna CSS)

Kode HEX juga dapat ditulis dalam 3-karakter singkat ketika setiap pasangan adalah digit yang sama: #FF0000 = #F00, #FFFFFF = #FFF, #336699 tidak dapat disingkat. Singkatan memotong waktu mengetik dan didukung oleh semua browser.

Untuk konsistensi desain, sistem desain modern (Material Design, Tailwind CSS, Bootstrap) menggunakan palet warna yang ditentukan sebagai kode HEX. Tailwind CSS, misalnya, menyediakan 22 keluarga warna masing-masing dengan 10 nada (abu-abu-100 hingga abu-abu-900), semua ditentukan sebagai kode HEX dalam file konfigurasi.

RGBA dan Ketepuan Alfa

RGBA menambahkan saluran keempat kepada RGB: alfa, yang mengawal ketepuan. Nilai alfa berkisar dari 0 (penuhnya telus, tidak kelihatan) hingga 1 (penuhnya tidak telus, tiada ketepuan). Nilai perpuluhan mencipta warna separuh telus.

Contoh: rgba(0, 0, 0, 0.5) adalah hitam separuh telus (seperti lapisan transparan). rgba(255, 255, 255, 0.8) adalah putih 80% tidak telus. Ini digunakan secara meluas untuk kesan lapisan, elemen UI yang berkilau, dan penyorotan ketika mengesan.

Pada CSS moden, terdapat juga HEX dengan alfa: kod hex 8-karakter di mana dua digit terakhir menentukan alfa. #FF6347CC adalah Tomato dengan ketepuan 80% (CC dalam hex = 204 dalam desimal; 204/255 ≈ 0.8). Format ini diperkenalkan dalam spesifikasi CSS Color Level 4 dan disokong dalam semua pelayan moden.

Setaraan dalam RGBA lebih mudah dibaca oleh manusia: rgba(255, 99, 71, 0.8) vs #FF6347CC. Format mana yang digunakan bergantung pada pilihan peribadi dan alatan - alatan reka bentuk seperti Figma biasanya menampilkan dan menghantar dalam HEX, manakala preprosesor CSS (Sass, Less) sering menggunakan RGBA kerana kebacaannya.

Teori Warna Asas untuk Reka Bentuk

Memahami model warna RGB berkait rapat dengan memahami teori warna. RGB adalah model warna tambah - warna dicipta dengan menambahkan cahaya. Menggabungkan R+G+B pada intensiti penuh = putih (semua cahaya). Ini adalah lawan dari model warna tolak (pigmen/ cetak), di mana menggabungkan semua warna = hitam.

Warna komplementari dalam RGB berada di seberang satu sama lain pada roda warna. Merah (FF0000) dan Cyan (00FFFF) adalah komplementari - perhatikan bahawa Cyan RGB adalah invers bit dari Merah (0,255,255 vs 255,0,0). Begitu juga, Biru dan Kuning, Hijau dan Magenta. Pasangan komplementari mencipta kontras maksimum dan getaran visual apabila diletakkan di sisi-sisi.

Harmoni warna mengarahkan pemilihan warna yang berfungsi bersama: analog (bersebelahan pada roda), triadik (tiga warna yang sama jarak), split-komplementari, dan tetradik (empat warna membentuk persegi). Kaitan-kaitan ini membantu reka bentuk mencipta palet yang terasa sengaja dan seimbang secara visual.

Kebolehaksesan dan kontras: Garis panduan Kebolehaksesan Kandungan Web (WCAG) memerlukan nisbah kontras minimum antara teks dan latar belakang: 4.5:1 untuk teks biasa, 3:1 untuk teks besar. Nisbah kontras dihitung dari luminans relatif nilai RGB. Banyak alatan pemeriksaan online memeriksa keseimbangan WCAG - ini sangat penting bagi pengguna yang mempunyai penglihatan rendah atau buta warna.

Ruangan Warna Lebih dari RGB: HSL, HSB, CMYK

RGB tidak selalu sistem yang paling intuitif untuk memilih warna. Ruangan warna alternatif boleh lebih praktikal untuk kes-kes yang berbeza:

HSL adalah sangat reka bentuk: warna memilih warna (0°=merah, 120°=hijau, 240°=biru), kekuningan mengawal berapa jelasnya (0% adalah kelabu, 100% adalah warna murni), dan kecerahan mengawal kecerahan (0% adalah hitam, 50% adalah warna murni, 100% adalah putih). Mengubah hanya kecerahan manakala mempertahankan warna dan kekuningan yang sama mencipta skala warna yang konsisten - sangat berguna untuk mencipta keadaan mengesan, keadaan tidak aktif, dan warna kekuningan/kehitaman warna jenama.

Perbandingan Aksesibilitas Warna dan Perbandingan Kontras

Garis panduan aksesibilitas web (WCAG 2.1) menetapkan perbandingan kontras minimum antara teks dan warna latar untuk memastikan ketepatan bacaan bagi pengguna dengan penglihatan rendah atau buta warna. Sekitar 8% lelaki memiliki bentuk kecacatan penglihatan warna (buta warna), menjadikan pilihan warna aksesibel sebagai keperluan etika dan undang-undang bagi reka bentuk web profesional.

Perbandingan kontras antara dua warna dihitung dari luminans relatif: perbandingan kontras = (L1 + 0.05) / (L2 + 0.05), di mana L1 ialah luminans warna yang lebih terang dan L2 ialah warna yang lebih gelap. Luminans relatif dihasilkan dari nilai RGB melalui formula koreksi gamma: untuk setiap nilai saluran v = V/255, jika v ≤ 0.03928 maka linear = v/12.92, lainnya linear = ((v+0.055)/1.055)^2.4. Kemudian L = 0.2126×R + 0.7152×G + 0.0722×B.

Keperluan kontras minimum: tahap AA memerlukan 4.5:1 untuk teks biasa (di bawah 18pt atau 14pt tebal) dan 3:1 untuk teks besar. Tahap AAA memerlukan 7:1 untuk teks biasa dan 4.5:1 untuk teks besar. Kegagalan yang paling biasa adalah teks kelabu pada latar putih (#999999 pada putih hanya memiliki perbandingan 2.85:1, gagal tahap AA) dan teks gelap pada latar gelap.

Membina Sistem Warna: Dari HEX ke Sistem Reka Bentuk

Sistem warna profesional biasanya termasuk warna utama jenama, warna akhir sekunder, abu-abu netral, dan warna semantik (hijau kejayaan, kuning peringatan, merah kesalahan, biru maklumat). Setiap warna asas memerlukan beberapa nada untuk keadaan UI yang berbeza.

Mulai dari warna jenama seperti #3B82F6 (biru-500 Tailwind), anda boleh mendapatkan skala 10 nada dengan menyesuaikan kecerahan dalam ruang HSL: biru-50 (#EFF6FF, sangat terang), biru-100 (#DBEAFE), sehingga ke biru-900 (#1E3A5F, sangat gelap). Token reka bentuk kemudian menetapkan nada-nada ini ke penggunaan semantik: primary-button-bg = biru-600, primary-button-hover = biru-700, primary-button-text = putih, dll.

Apabila membina sistem warna jenama, pertimbangkan: 60-30-10 rule — 60% warna dominan (biasanya netral), 30% warna sekunder, 10% akhir. Pastikan semua kombinasi teks memenuhi keperluan kontras WCAG AA. Uji warna di bawah keadaan cahaya yang berbeza dan skrin peranti. Ambil kira mod gelap (yang mungkin memerlukan nilai nada yang berbeza untuk memastikan kontras). Sistem warna yang baik dalam kod ialah 8-15 nilai HEX yang menutup semua kesan konsisten.

Penggunaan Konverter RGB ke HEX

Masukkan nilai saluran merah, hijau, dan biru (setiap nilai antara 0 dan 255). Konverter menampilkan kod warna HEX siap dipasang ke CSS, HTML, atau alat reka bentuk mana-mana. Nilai di luar 0–255 akan dikunci secara automatik. Konverter juga menunjukkan operasi balik: masukkan kod HEX untuk mendapatkan pecahan RGB. Gunakan alat ini apabila alat reka bentuk memberikan nilai RGB tetapi kandungan CSS menggunakan format HEX, atau apabila menyalin warna antara aplikasi yang berbeza yang menggunakan format yang berbeza. Kod HEX output termasuk simbol # di hadapan untuk memasang langsung ke sifat warna CSS. Semua kombinasi 16.7 juta warna RGB terjemahkan kepada kod HEX 6-karakter yang unik tanpa kerumitan atau pusingan.