Konverter HEX ke RGB (dan RGB ke HEX)

Konverter HEX ke RGB — Kode Warna Jadi Sederhana

Setiap warna di layar adalah campuran cahaya merah, hijau, dan biru, tetapi warna yang sama ditulis dalam beberapa cara berbeda. Desainer menyalin kode hex seperti #1B98E0 dari Figma atau Canva, CSS sering memakai rgb(27, 152, 224), beberapa tool menginginkan HSL, percetakan meminta CMYK, dan API mungkin mengharapkan satu bilangan desimal. Konverter HEX ke RGB gratis ini menerjemahkan di antara semuanya seketika, dua arah. Ketik kode hex, ketik nilai RGB, atau sekadar pilih warna, dan setiap format diperbarui bersamaan.

Konverter juga menjawab pertanyaan yang diajukan desainer tepat setelah memilih warna: apakah teks akan terbaca di atasnya? Konverter menghitung rasio kontras WCAG 2 teks putih dan hitam pada warna Anda dan menilai masing-masing AA, AAA, atau gagal, sehingga Anda bisa memilih warna teks yang tepat untuk tombol, banner, thumbnail, dan slide. Semuanya terjadi di browser Anda.

Cara Memakai Konverter

1. Masukkan kode HEX seperti #1B98E0, 1b98e0, bentuk pendek #F80, atau kode 8 digit dengan transparansi seperti #1B98E080.
2. Atau masukkan RGB dalam gaya umum apa pun: rgb(27, 152, 224), rgba(27, 152, 224, 0.5), 27 152 224, atau persentase.
3. Atau pilih warna dengan pemilih warna; kolom lain terisi otomatis.
4. Baca tabel untuk HEX, RGB, HSL, CMYK perkiraan, baris variabel CSS siap tempel, dan nilai desimal.
5. Lihat swatch dan baris kontras untuk melihat teks putih dan hitam pada warna Anda, beserta rasio kontrasnya.
6. Salin HEX, RGB, atau semua format sekaligus.

Hubungan HEX dan RGB

Warna hex hanyalah tiga angka yang ditulis dalam heksadesimal (basis 16). Enam digit terbagi menjadi tiga pasang: pasangan pertama adalah merah, kedua hijau, ketiga biru. Setiap pasang berkisar dari 00 (0) hingga FF (255), yaitu persis rentang satu kanal RGB. Jadi konversinya adalah konversi basis 16 ke basis 10 yang dilakukan tiga kali.

HEX ke RGB: untuk #1B98E0, 1B = 1 × 16 + 11 = 27, 98 = 9 × 16 + 8 = 152, dan E0 = 14 × 16 + 0 = 224, menghasilkan rgb(27, 152, 224).

RGB ke HEX: untuk rgb(255, 87, 51), 255 = FF, 87 = 57 (5 × 16 + 7) dan 51 = 33 (3 × 16 + 3), menghasilkan #FF5733.

Konverter basis bilangan kami menampilkan aritmetika basis 16 yang sama untuk bilangan apa pun.

Kode hex pendek dan panjang

CSS mengizinkan singkatan 3 digit saat kedua digit setiap pasang identik: #F80 diperluas menjadi #FF8800, dan #FFF menjadi #FFFFFF. Kode 4 digit menambah digit alfa singkat. Kode 8 digit menaruh alfa sebagai pasangan terakhir: 80 hex adalah 128, dan 128 ÷ 255 ≈ 0.5, jadi #1B98E080 adalah biru dengan opasitas sekitar 50% — rgba(27, 152, 224, 0.5).

Contoh Perhitungan

Abu-abu #767676 adalah kasus batas yang terkenal: sekitar abu-abu paling terang yang masih lolos AA (4.54:1) sebagai teks di latar putih, dan yang paling gelap yang lolos dengan hitam — nyaris, di kedua sisi.

HSL: Format yang Ramah Desainer

HSL menggambarkan warna dengan hue, saturation, dan lightness. Hue adalah posisi di roda warna dalam derajat — 0° merah, 120° hijau, 240° biru. Saturation adalah seberapa hidup warna itu, dari abu-abu (0%) hingga warna penuh (100%). Lightness berjalan dari hitam (0%) melalui warna murni (50%) hingga putih (100%). Keunggulan besarnya adalah Anda bisa membuat status hover, tint, dan shade dengan mengubah satu angka: pertahankan hue dan saturation, lalu naikkan atau turunkan lightness. Semua browser modern menerima hsl() di CSS.

CMYK: Perkiraan untuk Cetak

Printer mencampur tinta cyan, magenta, kuning, dan hitam, yang mengurangi cahaya alih-alih menambahnya. Konverter memakai rumus sederhana standar — K = 1 − max(R, G, B), lalu C, M, dan Y dari nilai yang tersisa — yang cukup untuk panduan kasar. Warna cetak nyata bergantung pada kertas, tinta, dan profil warna ICC, dan banyak warna layar yang cerah, terutama biru dan hijau yang hidup, sama sekali tidak bisa dicetak persis. Untuk kartu nama, kemasan, atau apa pun yang mementingkan warna, minta proof dari percetakan Anda.

Kontras Warna dan Aksesibilitas

Web Content Accessibility Guidelines (WCAG 2) mendefinisikan rasio kontras dari 1:1 (tanpa kontras) hingga 21:1 (hitam di atas putih). Dihitung dari luminansi relatif kedua warna. Ambang batasnya:

• AA, teks normal: minimal 4.5:1
• AA, teks besar (kira-kira 24 px reguler atau 18.66 px tebal ke atas): minimal 3:1
• AAA, teks normal: minimal 7:1

Kontras yang baik bukan hanya soal aturan aksesibilitas. Itu menentukan apakah judul thumbnail YouTube bisa dibaca di HP di bawah sinar matahari, apakah label tombol jelas, dan apakah penonton yang lebih tua bisa membaca slide Anda. Sejumlah mengejutkan biru dan oranye merek populer tampak tegas tetapi gagal dengan teks putih — periksa rasionya alih-alih memercayai mata di monitor yang terang.

Di Mana Setiap Format Dipakai

• HEX — CSS, HTML, Figma, Canva, Photoshop, panduan merek.
• RGB / rgba — CSS (terutama saat butuh transparansi), canvas JavaScript, tools video dan game.
• HSL — tema CSS dan design system tempat Anda membuat tint dan shade.
• CMYK — desain cetak: brosur, kartu, kemasan.
• Desimal — beberapa API dan aplikasi yang menyimpan warna sebagai satu integer, seperti warna embed chat.

Berapa Banyak Warna yang Bisa Digambarkan HEX dan RGB?

Setiap kanal punya 256 nilai yang mungkin (0 hingga 255), yaitu 8 bit. Tiga kanal membentuk 24 bit, jadi kode hex dan RGB standar bisa menggambarkan 256 × 256 × 256 = 16,777,216 warna — “16.7 juta warna” dalam spesifikasi monitor. Menambah kanal alfa membawanya ke 32 bit per piksel, yang cara kebanyakan gambar dan layar menyimpan warna di memori. Nilai desimal di tabel konverter hanyalah 24 bit itu dibaca sebagai satu bilangan: merah × 65,536 + hijau × 256 + biru. Untuk #1B98E0 itu 1,808,608.

CSS modern juga bisa mengekspresikan warna di luar rentang sRGB klasik ini, memakai fungsi baru untuk layar gamut lebar. Itu di luar cakupan konverter hex, dan format hex dan RGB yang familiar tetap menjadi pilihan yang paling luas didukung untuk web, dokumen, dan tools desain.

Kesalahan Umum dengan Kode Warna

• Menghilangkan #. Kebanyakan tool desain menambahkannya untuk Anda, tetapi di CSS color: 1B98E0 tidak valid. Konverter menerima kode dengan atau tanpa # dan selalu mengeluarkan bentuk #.
• Mengetik huruf O untuk nol. Digit hex hanya 0–9 dan A–F. #FFOOOO dengan huruf O bukan merah; konverter akan menolaknya agar Anda menyadarinya.
• Mencampur urutan 8 digit. CSS menaruh alfa di akhir (#RRGGBBAA), tetapi beberapa Android dan tool lama menaruhnya di awal (#AARRGGBB). Jika warna tampak salah setelah ditempel, periksa urutan mana yang diharapkan tool Anda.
• Menilai kontras dengan mata. Kecerahan layar dan profil warna sangat bervariasi antar perangkat. Andalkan angkanya.
• Mengharapkan warna layar di cetakan. Hijau RGB neon biasanya tampak lebih kusam di kertas; rencanakan itu sejak awal.

Tips Bekerja dengan Kode Warna

• Simpan daftar pendek warna merek Anda sebagai variabel CSS — konverter memberi baris --brand untuk ditempel.
• Bangun palet lengkap dari satu warna dasar dengan pembuat palet warna kami, dan campurkan warna dengan pembuat gradien CSS.
• Kode hex tidak peka huruf besar-kecil, tetapi pilih satu gaya dan konsisten agar cari-dan-ganti berfungsi.
• Saat butuh transparansi, pilih rgba() atau hex 8 digit daripada menurunkan opasitas seluruh elemen, yang juga memudarkan teks di dalamnya.
• Uji kontras untuk setiap kombinasi teks-di-atas-warna di desain Anda, bukan hanya yang utama.
• Saat warna merek gagal kontras dengan teks putih, coba gelapkan beberapa poin lightness di HSL alih-alih beralih ke warna yang sama sekali berbeda — merek tetap terasa sama, dan teks menjadi terbaca.
• Simpan tautan halaman bersama catatan Anda; konverter gratis dipakai kapan saja Anda perlu memeriksa kode lagi.

Konverter HEX ke RGB — Fakta Penting

Pertanyaan yang Sering Diajukan

Jelajahi Tools Prompt Minds Lainnya

Konverter HEX ke RGB sangat cocok dipakai bersama tools gratis kami yang lain. Setiap tool Prompt Minds berjalan sepenuhnya di browser Anda — tanpa daftar, tanpa unggahan, tanpa watermark. Jelajahi semua tools gratis.