Heks ke RGB Konverter

Cara kerja konversi HEX ke RGB

Warna HEX menggunakan string heksadesimal enam digit (#RRGGBB) di mana setiap pasang mewakili saluran merah, hijau, dan biru. Nilai berkisar dari 00 (0) hingga FF (255).

RGB menggunakan tiga angka desimal (0 hingga 255) untuk setiap saluran. Misalnya, #2b7190 dipecah menjadi R:43, G:111, B:142.

Pertanyaan umum

Bagaimana cara mengonversi HEX ke RGB secara manual?

Pisahkan kode hex menjadi tiga pasang (mis. #FF8800 → FF, 88, 00), lalu konversi setiap pasangan dari basis 16 ke basis 10: FF = 255, 88 = 136, 00 = 0. Hasilnya adalah rgb(255, 136, 0).

Bagaimana dengan kode HEX 3 digit?

HEX 3 digit adalah singkatan di mana setiap digit digandakan: #F80 = #FF8800. Konverter ini menangani kedua format secara otomatis.

Kapan menggunakan HEX atau RGB?

HEX lebih kompak dan populer di CSS. RGB lebih disukai saat Anda perlu memanipulasi saluran secara individual dalam kode atau menggunakan rgba() untuk transparansi.

Apa itu notasi hex sebenarnya

Warna hex adalah representasi basis 16 dari warna RGB 24-bit. Enam digit setelah #, tiga pasangan: merah, hijau, biru. Setiap pasangan adalah angka dari 00 hingga ff: satu byte (8 bit) per saluran, tiga saluran, total 24 bit. Itu tepat cukup untuk mengkodekan salah satu dari 2²⁴ = 16.777.216 warna diskrit. Rentang «true colour» / «jutaan warna» yang telah menjadi dasar layar konsumen sejak akhir tahun 1990-an.

Tanda hash bukan bagian dari nilai, melainkan awalan sintaks yang memberi tahu parser CSS «yang berikut adalah warna hex, bukan nama variabel.» Tanpanya, string seperti ff0000 bisa ambigu bagi lexer. Digit 0-9 mempertahankan makna desimalnya; huruf A-F (tidak peka huruf besar-kecil dalam CSS) mewakili desimal 10-15. Jadi f adalah 15, ff adalah 15 × 16 + 15 = 255.

Matematikanya, dengan contoh yang dikerjakan

Setiap pasangan hex dua digit dipetakan ke desimal 0-255 dengan rumus (high_digit × 16) + low_digit, di mana setiap digit diinterpretasikan sebagai 0-15 (A=10 hingga F=15):

• FF → (15 × 16) + 15 = 255
• 88 → (8 × 16) + 8 = 136
• 00 → 0
• 2B → (2 × 16) + 11 = 43 (saluran merah dari swatch #2b7190 default di atas)
• 71 → (7 × 16) + 1 = 113
• 90 → (9 × 16) + 0 = 144

Dalam JavaScript, seluruh penguraian muat dalam dua baris. const n = parseInt(hex.slice(1), 16); diikuti oleh const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];: itulah pada dasarnya kode substantif dari setiap konverter hex-ke-RGB di web. Arah sebaliknya adalah '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').

Singkatan 3-digit, 4-digit, dan 8-digit

CSS memungkinkan bentuk singkatan ketika salurannya simetris:

• 3-digit (#RGB), setiap digit diduplikasi untuk membentuk kode 6-digit yang setara. #F00 → #FF0000; #FFF → #FFFFFF; #369 → #336699. Bentuk ini praktis untuk warna «round» yang ramah desainer tetapi hanya dapat mengungkapkan 4.096 nilai unik, bukan 16,7 juta; tidak ada singkatan untuk #778899 karena pasangannya berbeda.
• 8-digit (#RRGGBBAA): sama seperti 6-digit ditambah pasangan alpha. 00 = sepenuhnya transparan, FF = sepenuhnya buram, 80 ≈ 50% opasitas. Fungsional identik dengan rgba(255, 0, 0, 0.5) tetapi lebih ringkas.
• 4-digit (#RGBA), singkatan duplikasi dari bentuk 8-digit. #F00A → #FF0000AA.

Singkatan 3-digit sudah ada di CSS Level 1 (1996). Bentuk alpha 4-digit dan 8-digit hadir jauh kemudian di CSS Color Module Level 4, dengan ketersediaan lintas browser yang luas sejak sekitar pertengahan 2015.

Warna bernama dan kisah rebeccapurple

Sebelum hex menjadi idiom web default, warna bernama adalah norma. HTML 4.01 (Desember 1999) menentukan 16 warna bernama, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua: berdasarkan 16 warna standar dari palet VGA Windows. CSS 2.1 menambahkan orange sebagai yang ke-17. CSS Color Module Level 3 kemudian secara resmi mengadopsi sekitar 130 nama tambahan dari file rgb.txt X11 (yang diwarisi Mosaic dan Netscape awal dari akar X Window System mereka), sehingga totalnya menjadi sekitar 147-148 tergantung cara Anda menghitung alias seperti cyan/aqua dan gray/grey.

CSS Color Module Level 4 menambahkan satu lagi, dengan cerita di baliknya. Rebecca Meyer adalah putri berusia enam tahun dari Eric A. Meyer, otoritas CSS awal dan peserta W3C. Dia meninggal akibat kanker otak pada 7 Juni 2014, pada hari ulang tahunnya yang keenam. Eric menulis di blognya pada minggu yang sama: «Dia berhasil mencapai usia enam tahun. Selama hampir dua belas jam, dia berusia enam tahun.» Seorang anggota komunitas mengusulkan penambahan warna favoritnya, ungu terung yang dalam, hex #663399: sebagai beccapurple; Eric menerima dengan satu syarat: harus rebeccapurple, bukan beccapurple, karena Rebecca sendiri baru-baru ini mengumumkan bahwa dia sudah terlalu besar untuk nama bayi itu. CSS Working Group menyetujui perubahan tersebut pada 22 Juni 2014, dua minggu setelah kematiannya. WebKit dan mesin browser lainnya menghadirkan dukungan dalam hitungan hari. Ini adalah satu-satunya warna CSS yang dinamai dari nama seseorang, sebuah memorial yang tenang di setiap browser modern.

sRGB: ruang warna yang tersirat dari setiap kode hex

Saat Anda menulis #FF5733 dalam CSS, Anda tidak hanya menentukan angka, Anda menentukannya dalam ruang warna sRGB. Ini bersifat implisit; browser akan menginterpretasikan nilai hex Anda sebagai sRGB kecuali Anda menggunakan salah satu fungsi color() baru untuk menentukan sebaliknya.

sRGB diusulkan bersama oleh Hewlett-Packard dan Microsoft pada tahun 1996 dan diadopsi sebagai IEC 61966-2-1:1999, sebuah ruang warna tunggal yang independen dari perangkat yang dirancang berdasarkan kurva respons monitor CRT tipikal pada era itu. Ruang warna ini berbagi kromatisitas primer dengan ITU-R BT.709 (standar HDTV) pada titik putih D65 (6500 K). W3C secara eksplisit mendefinisikan sRGB sebagai ruang warna default untuk web; semua kode hex, semua nilai rgb(), semua JPEG klasik dan gambar PNG tanpa tag diinterpretasikan sebagai sRGB.

Keterbatasan yang jujur: sRGB mencakup sekitar 35,9% dari diagram warna CIE 1931 yang terlihat. Ada warna yang ada di alam, dapat ditampilkan oleh layar ponsel OLED modern, tetapi tidak dapat ditentukan dalam notasi hex, hijau zamrud jenuh, nuansa oranye-merah matahari terbenam yang hidup, cat fluoresen. CSS Color Module Level 4 memperkenalkan ruang baru untuknya, dapat diakses melalui fungsi color(): Display P3 (digunakan oleh layar Apple sejak iPhone 7 dan iMac akhir 2015, sekitar 25% lebih lebar dari sRGB) dan Rec. 2020 (standar siaran 4K/8K, sekitar 75% dari CIE 1931). Di perangkat sRGB lama, browser mundur dengan mulus.

Alternatif modern: HSL, HWB, OKLCH

Hex ringkas tetapi tidak ramah manusia, Anda tidak bisa melihat #3DE7C9 dan menebak ronanya. CSS secara bertahap telah menambahkan notasi fungsional yang cocok dengan cara manusia berpikir tentang warna:

• HSL: rona, saturasi, kecerahan. Rona adalah sudut 0-360°. Diperkenalkan di CSS Color Module Level 3 (2011). Slider intuitif, tetapi kecerahan tidak seragam secara perseptual, kuning pada L=50% terlihat jauh lebih terang dari biru pada kecerahan yang sama.
• HWB: rona, keputihan, kehitaman. Lebih mudah untuk model mental seorang pelukis («biru dengan sedikit putih dan sentuhan hitam»). Gamut yang sama dengan HSL.
• LCH / Lab: seragam secara perseptual; perubahan numerik yang sama sesuai dengan perubahan yang dirasakan sama. Mendukung gamut lebar P3+.
• OKLCH: pendatang terbaru, diperkenalkan oleh Björn Ottosson pada Desember 2020. Memperbaiki distorsi rona CIELAB dan masalah gradien warna gelap. Angka kecerahan yang sama terlihat sama terangnya di semua rona. Interpolasi linear dalam OKLCH menghasilkan gradien yang mulus secara visual tanpa titik tengah abu-abu kusam yang Anda dapatkan dari linear-gradient(red, green) dalam sRGB. Tailwind CSS v4.0 (Januari 2025) memindahkan seluruh palet warna defaultnya dari rgb() ke oklch(). Dukungan browser telah luas sejak sekitar 2023.

OKLCH adalah arah jangka panjang untuk warna CSS, tetapi kode hex akan tetap menjadi lingua franca dari perkakas desain, spesifikasi merek, dan cuplikan yang disalin-tempel; kode itu pendek, aman untuk salin-tempel di media teks apa pun, dan dipahami secara universal.

Asal usul RGB aditif pada tahun 1861

Model RGB dapat dilacak ke teori trikomatis Young-Helmholtz tentang penglihatan (awal abad ke-19), yang mengusulkan bahwa mata manusia memiliki tiga jenis reseptor warna yang bersesuaian dengan merah, hijau, dan biru. James Clerk Maxwell mendemonstrasikan ini secara eksperimental pada 17 Mei 1861 di Royal Institution di London. Dia memproyeksikan tiga foto hitam-putih dari pita tartan (satu diambil melalui filter merah, satu hijau, satu biru) melalui tiga proyektor yang dilengkapi dengan filter berwarna yang sama; gambar yang digabungkan kembali di layar menampilkan pita dalam warna yang kira-kira penuh. Ini umumnya dikreditkan sebagai foto berwarna pertama. Prinsip RGB aditif yang sama menggerakkan setiap layar CRT, LCD, OLED, dan plasma yang pernah dibuat: setiap piksel adalah tiga serangkai subpiksel merah, hijau, dan biru dengan kecerahan yang dapat diatur secara independen, dan retina Anda mencampurnya menjadi warna yang dirasakan.

Pertanyaan lainnya

Apakah hex peka huruf besar-kecil?

Tidak. #abcdef dan #ABCDEF identik bagi parser. Spesifikasi CSS eksplisit: nilai warna hex tidak peka huruf besar-kecil. Huruf campuran seperti #FfAa00 juga legal, meskipun jarang dalam kode produksi. (Jangan dikacaukan dengan fragment URL, di mana hash terdepan adalah konsep sintaks yang sama sekali berbeda.)

Mengapa merata-ratakan dua kode hex menghasilkan abu-abu kusam?

Karena nilai hex dikodekan gamma (fungsi transfer sRGB diterapkan), dan merata-rata dalam ruang gamma tidak sama dengan merata-rata dalam cahaya linear. Contoh klasik adalah linear-gradient(red, green) yang menghasilkan titik tengah olive kusam, matematikanya benar dalam ruang yang dikodekan gamma tetapi secara visual salah. Fungsi warna modern seperti OKLCH mengatasi ini dengan menginterpolasi dalam ruang yang seragam secara perseptual, itulah mengapa mereka menghasilkan gradien yang lebih mulus.

Mengapa tidak ada kode hex untuk warna «neon» atau «fluoresen»?

Karena notasi hex secara implisit adalah sRGB, dan sRGB hanya mencakup sekitar 36% dari warna yang dapat dilihat mata manusia. Banyak warna yang hidup (hijau zamrud jenuh, oranye-merah cerah, cat fluoresen) ada di alam dan dapat ditampilkan di layar wide-gamut modern tetapi berada di luar kubus sRGB. Untuk mencapainya Anda memerlukan color(display-p3 …), color(rec2020 …), atau oklch() dengan nilai chroma tinggi. Warna-warna tersebut tidak memiliki padanan hex.

Apa itu «palet web-safe»?

Pada akhir tahun 1990-an, ketika banyak monitor terbatas pada 256 warna, desainer berpegang pada palet 216, irisan palet sistem Windows dan Mac OS. Angka 216 berasal dari kubus 6×6×6: masing-masing R, G, dan B hanya mengambil nilai 00, 33, 66, 99, CC, FF. Lynda Weinman mempopulerkannya dalam bukunya tahun 1996 Designing Web Graphics. Ini menjadi usang sekitar tahun 2000 ketika warna 24-bit hadir di perangkat keras konsumen. Hari ini ini adalah keingintahuan historis murni, terkadang masih terlihat dalam kode hex antik seperti #CC0033 atau #993366.

Apakah ada yang dikirim ke server?

Tidak. Hex-ke-RGB adalah dua baris aritmatika JavaScript fungsi murni. Konversi berjalan secara lokal; tidak ada tentang warna yang Anda masukkan yang diunggah ke mana pun; halaman ini bekerja secara offline setelah dimuat.

Alat terkait