Konverter Warna RGB ke HEX

Sistem Warna RGB dan HEX

RGB (Merah, Hijau, Biru) dan HEX (heksadesimal) adalah dua cara untuk mewakili warna yang sama — mereka hanya menggunakan sistem notasi yang berbeda. Kedua sistem ini menggambarkan warna dengan mencampurkan tiga warna dasar cahaya (merah, hijau, biru) pada 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. Mencampurkan 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 heksadesimal 2-digit (00 hingga FF), dilengkapi dengan #. Heksadesimal menggunakan angka 0-9 dan huruf A-F, di mana A=10, B=11, C=12, D=13, E=14, F=15. FF dalam heksadesimal = 15 × 16 + 15 = 255 dalam desimal. Jadi #FFFFFF = rgb(255,255,255) = putih. Konversi ini hanya perubahan basis: desimal (basis 10) ke heksadesimal (basis 16).

Cara Mengubah RGB ke HEX: Langkah demi Langkah

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

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

Contoh: Ubah rgb(255, 99, 71) ke heksadesimal (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 berbagai format warna. HEX dan RGB adalah yang paling umum, tetapi CSS modern juga mendukung HSL, warna yang dinamai, 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%); (Warna, Keturunan, Kecerahan)
• color: tomato; (Warna CSS yang dinamai)

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 (gray-100 hingga gray-900), semua ditentukan sebagai kode HEX dalam file konfigurasi.

RGBA dan Transparansi Alpha

RGBA menambahkan kanal keempat ke RGB: alpha, yang mengontrol transparansi. Nilai alpha berkisar dari 0 (transparan sepenuhnya, tidak terlihat) hingga 1 (transparan sepenuhnya, tidak ada transparansi). Nilai parsial menciptakan warna semi-transparan.

Contoh: rgba(0, 0, 0, 0.5) adalah hitam semi-transparan (seperti overlay transparan). rgba(255, 255, 255, 0.8) adalah putih 80% transparan. Ini digunakan secara luas untuk efek overlay, elemen UI kaca yang diproses, dan penyorotan hover.

Dalam CSS modern, ada juga HEX dengan alpha: kode hex 8 karakter di mana dua karakter terakhir menentukan alpha. #FF6347CC akan menjadi Tomato dengan 80% opacity (CC dalam hex = 204 dalam desimal; 204/255 ≈ 0,8). Format ini diperkenalkan dalam spesifikasi CSS Color Level 4 dan didukung oleh semua browser modern.

Sama seperti RGBA, format ini lebih sederhana untuk manusia: rgba(255, 99, 71, 0.8) vs #FF6347CC. Format mana yang digunakan tergantung pada preferensi pribadi dan perangkat lunak — alat desain seperti Figma biasanya menampilkan dan mengekspor dalam HEX, sementara preprosesor CSS (Sass, Less) sering menggunakan RGBA karena keterbacaannya.

Dasar Teori Warna untuk Desainer

Mengerti model warna RGB beriringan dengan mengerti teori warna. RGB adalah model warna penjumlahan — warna diciptakan dengan menambahkan cahaya. Menggabungkan R+G+B pada intensitas penuh = putih (semua cahaya). Ini berlawanan dengan model warna pengurangan (pigmen/print), di mana menggabungkan semua warna = hitam.

Warna komplementer dalam RGB berada di sisi lain dari roda warna. Merah (FF0000) dan Cyan (00FFFF) adalah komplementer — perhatikan bahwa Cyan RGB adalah invers bit dari Merah (0,255,255 vs 255,0,0). Demikian pula, Biru dan Kuning, Hijau dan Magenta. Pasangan komplementer menciptakan kontras maksimum dan getaran visual ketika ditempatkan di sisi lain.

Harmoni warna mengarah pada pilihan warna yang bekerja sama: analog (berada di sisi lain roda), triadik (tiga warna yang sama jaraknya), split-komplementer, dan tetradik (empat warna yang membentuk persegi panjang). Keterhubungan ini membantu desainer menciptakan palet yang terasa sengaja dan seimbang secara visual.

Keamanan aksesibilitas: Pedoman Aksesibilitas Konten Web (WCAG) memerlukan rasio kontras minimal antara teks dan latar belakang: 4,5:1 untuk teks normal, 3:1 untuk teks besar. Rasio kontras dihitung dari luminansi relatif nilai RGB. Banyak alat online memeriksa kinerja WCAG — hal ini sangat penting bagi pengguna dengan penglihatan rendah atau buta warna.

Spasial Warna di Luar RGB: HSL, HSB, CMYK

RGB bukanlah sistem yang paling intuitif untuk memilih warna. Spasial warna alternatif dapat lebih berguna untuk kasus penggunaan yang berbeda:

HSL sangat berguna bagi desainer: warna memilih warna (0°=merah, 120°=hijau, 240°=biru), kekentalan mengontrol seberapa jelas warna itu (0% adalah abu-abu, 100% adalah warna murni), dan kecerahan mengontrol kecerahan (0% adalah hitam, 50% adalah warna murni, 100% adalah putih). Mengubah hanya kecerahan sambil menjaga warna dan kekentalan tetap konstan menciptakan skala warna yang kohesif — sangat berguna untuk menciptakan negara hover, negara tidak aktif, dan nuansa/tint warna merek.

Perbandingan Aksesibilitas Warna dan Rasio Kontras

Pedoman aksesibilitas web (WCAG 2.1) menetapkan rasio kontras minimum antara teks dan warna latar untuk memastikan keterbacaan bagi pengguna dengan penglihatan rendah atau kebutaan warna. Sekitar 8% laki-laki memiliki bentuk kebutaan warna, membuat pilihan warna yang aksesibel menjadi keharusan etis dan hukum untuk desain web profesional.

Rasio kontras antara dua warna dihitung dari luminans relatif: rasio kontras = (L1 + 0.05) / (L2 + 0.05), di mana L1 adalah luminans warna yang lebih terang dan L2 adalah warna yang lebih gelap. Luminans relatif dihitung dari nilai RGB melalui formula koreksi gamma: untuk setiap nilai kanal 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.

Kebutuhan kontras minimum: tingkat AA memerlukan 4,5:1 untuk teks normal (di bawah 18pt atau 14pt tebal) dan 3:1 untuk teks besar. Tingkat AAA memerlukan 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Kesalahan paling umum adalah teks abu-abu terang pada latar belakang putih (#999999 pada putih hanya memiliki rasio 2,85:1, gagal pada tingkat AA) dan teks gelap pada latar belakang gelap.

Membangun Sistem Warna: Dari HEX ke Desain Sitem

Sistem warna profesional biasanya mencakup warna utama merek, warna akhir sekunder, abu-abu netral, dan warna semantik (hijau keberhasilan, kuning peringatan, merah kesalahan, biru informasi). Setiap warna dasar memerlukan beberapa gradasi untuk keadaan UI yang berbeda.

Mulai dari warna merek seperti #3B82F6 (biru-500 Tailwind), Anda dapat mendapatkan skala 10 gradasi dengan menyesuaikan kecerahan di ruang HSL: biru-50 (#EFF6FF, sangat terang), biru-100 (#DBEAFE), hingga biru-900 (#1E3A5F, sangat gelap). Token desain kemudian menerjemahkan gradasi-gradasi ini ke penggunaan semantik: primary-button-bg = biru-600, primary-button-hover = biru-700, primary-button-text = putih, dll.

Untuk membangun sistem warna merek, pertimbangkan: aturan 60-30-10 — 60% warna dominan (biasanya netral), 30% warna sekunder, 10% akhir. Pastikan semua kombinasi teks memenuhi kebutuhan kontras WCAG AA. Uji warna di bawah kondisi pencahayaan yang berbeda dan layar perangkat. Pertimbangkan mode gelap (yang mungkin memerlukan nilai gradasi yang berbeda untuk mempertahankan kontras). Sistem warna yang baik dalam kode adalah 8-15 nilai HEX yang menutupi semua kasus secara konsisten.

Psikologi Warna dalam Desain dan Pemasaran

Warna dapat menimbulkan respons psikologis dan emosional, sehingga pemilihan warna merupakan keputusan strategis dalam branding dan desain UI. Penelitian psikologi warna (meskipun kadang-kadang diperkuat dalam budaya populer) memberikan pedoman umum yang berguna untuk mendesain pengalaman visual yang efektif.

Merah (#FF0000 range): Energi, kebutuhan darurat, pasion, bahaya. Digunakan untuk penjualan ("Tanda 'Sale!' biasanya merah"), peringatan darurat, tanda berhenti, dan merek makanan (Coca-Cola, McDonald's, KFC — merah memicu rasa lapar dan menciptakan kebutuhan darurat). Merah kontras tinggi sangat baik untuk panggilan aksi ketika Anda ingin tindakan pengguna segera.

Biru (#0000FF range): Kepercayaan, profesionalisme, stabilitas, tenang. Warna dominan dalam branding keuangan dan teknologi (Facebook, Twitter/X, LinkedIn, PayPal, IBM, Samsung). Studi menunjukkan bahwa biru adalah warna yang disukai secara global di berbagai budaya. Biru cerah menunjukkan kebukaan dan keakraban; biru navy gelap menunjukkan otoritas dan keahlian.

Hijau (#00FF00 range): Alam, kesehatan, pertumbuhan, kesuksesan (uang di AS). Digunakan secara luas dalam merek kesehatan/keseimbangan, aplikasi keuangan (hasil positif ditampilkan dalam hijau), organisasi lingkungan, dan "tanda pergi". Tonal tengah seperti #28A745 (hijau kesuksesan Bootstrap) menandakan keadaan positif dalam UI tanpa menunjukkan agresivitas.

Warna Kuning/Oranye: Optimisme, energi, kreativitas, peringatan. Kuning sangat terlihat (tanda konstruksi, taksi) tetapi sulit dibaca sebagai teks pada putih. Oranye (#FFA500 range) sering digunakan untuk panggilan aksi — itu terlihat dan energik tanpa konotasi kebutuhan darurat/bahaya merah.

Bekerja dengan Warna dalam Alat Desain Populer

Setiap alat desain utama memiliki alur warna sendiri. Memahami cara bekerja dengan HEX dan RGB secara efisien dalam alat Anda dapat menghemat waktu yang signifikan dalam pekerjaan desain profesional.

Figma: Klik elemen yang diisi → Panel Properti menampilkan warna isi → Klik swatch warna untuk membuka pilih warna. Anda dapat mengetik nilai HEX secara langsung atau beralih ke mode RGB, HSL, atau HSB. Figma juga mendukung ketiadaan kejelasan melalui bidang kejelasan terpisah dan notasi RGBA. Salin kode HEX antara Figma dan CSS tanpa perlu konversi.

Adobe Photoshop: Buka Pilih Warna (bidang warna depan/tembakan). Bagian bawah pilih warna menampilkan kode HEX dalam bidang teks. Klik kanan swatch warna untuk menambahkannya ke palet Anda. Alat penggaris mata menyalin warna apa pun di layar — hover untuk melihat kode HEXnya di panel informasi.

DevTools Browser: Inspeksi elemen apa pun → Panel gaya menampilkan nilai-nilai CSS warna → Klik swatch warna di samping sifat warna apa pun untuk membuka pilih warna inline. DevTools dapat menampilkan warna sebagai HEX, RGB, HSL, atau nama — klik tampilan warna untuk berpindah format. Ini sangat berharga untuk merekam keputusan desain dari situs web yang ada.

VS Code: Dekorasi warna (bidang persegi warna) muncul di samping nilai-nilai HEX dan RGB dalam file CSS. Hover menampilkan pilih warna. Ekstensi warnai menambahkan tampilan warna untuk semua format warna. Singkatan Emmet seperti c:f memperluas ke color: #fff; untuk warna umum.

Menggunakan Konverter RGB ke HEX

Masukkan nilai kanal merah, hijau, dan biru (setiap nilai antara 0 dan 255). Konverter menampilkan kode warna HEX siap dipaste ke CSS, HTML, atau alat desain lainnya. Nilai di luar 0-255 akan diatur secara otomatis. Konverter juga menampilkan operasi sebaliknya: masukkan kode HEX untuk mendapatkan pembalikannya. Gunakan alat ini ketika alat desain memberikan nilai RGB tetapi stylesheet CSS Anda menggunakan format HEX, atau ketika menyalin warna antara aplikasi yang berbeda yang menggunakan format yang berbeda. Kode HEX keluaran termasuk simbol # di awal untuk dipaste langsung ke properti warna CSS. Semua kombinasi 16,7 juta warna RGB mewakili kode HEX unik 6 karakter tanpa ambiguitas atau pengaturan.