Konversi kode warna HEX apa pun ke RGB di peramban Anda — HEX 3 digit, 6 digit, dan 8 digit dengan alpha semuanya didukung. Gratis, instan, tanpa daftar, warna Anda tidak pernah meninggalkan halaman.
Tints
Shades
Tones
Harmonies
— — — — — Konverter HEX ke RGB adalah utilitas kecil yang mengubah kode warna hex (`#FF5733`) menjadi tiga nilai integer kanal yang direpresentasikannya (`rgb(255 87 51)`). HEX dan RGB adalah dua format yang menjadi fondasi setiap stylesheet web, alat desain, dan pipeline piksel-gambar sejak akhir 1990-an, dan konversi di antara keduanya adalah operasi paling umum di tooling warna. Hex adalah format copy-paste yang ringkas yang diekspor secara default oleh Figma, Sketch, Photoshop, dan setiap PDF panduan brand — string basis-16 6 karakter yang muat dengan nyaman di properti kustom CSS dan terbaca dalam sekilas begitu mata Anda mempelajari polanya. RGB adalah format yang dialamatkan-kanal yang diharapkan oleh API perangkat keras, panggilan gambar canvas, manipulasi buffer gambar, atribut warna OpenGL, dan sebagian besar SDK grafis — tiga integer terpisah 0-255 (atau float ternormalisasi 0-1) yang memetakan langsung ke subpiksel merah, hijau, dan biru LCD atau fosfor CRT. Mengonversi antara keduanya bersifat mekanis: pecah hex menjadi tiga pasangan 2 digit dan baca setiap pasangan sebagai angka basis-16. Alat ini menjalankan konversi itu secara langsung saat Anda mengetik, tanpa tombol "Konversi" untuk diklik, dan memunculkan setiap format warna umum lainnya (HSL, OKLCH, OKLAB, HSV, HWB, CMYK, ditambah 148 nama warna CSS) berdampingan dengan output RGB secara gratis.
**Format RGB sendiri layak dilihat lebih dekat.** sRGB 24-bit standar mengkodekan setiap kanal sebagai integer unsigned 8-bit dari 0 hingga 255 — 256 nilai per kanal, 16.777.216 warna total (256³). Standar referensi adalah IEC 61966-2-1, spesifikasi sRGB 1996 yang berlabuh pada primer fosfor CRT yang mendominasi layar pada masa itu. CSS mengekspos RGB melalui fungsi `rgb()` dalam tiga rasa sintaksis. Bentuk CSS 1 asli menggunakan pemisah koma: `rgb(255, 87, 51)`. CSS Color 4 (W3C Candidate Recommendation sejak 2022) menambahkan bentuk dipisah-spasi modern: `rgb(255 87 51)`, dengan kanal alpha opsional setelah slash: `rgb(255 87 51 / 0.5)`. Kedua bentuk dapat dipertukarkan dan dirilis di setiap peramban evergreen. RGB juga menerima kanal persentase: `rgb(100% 33% 20%)` setara dengan `rgb(255 87 51)`, kadang lebih disukai di stylesheet yang ditulis tangan untuk keterbacaan. Alpha secara khusus memiliki fungsi `rgba()` terpisah untuk dukungan warisan — `rgba(255, 87, 51, 0.5)` adalah bentuk kanonik yang bekerja di mana-mana hingga IE 9. CSS Color 4 juga menambahkan sintaks `color(srgb 1 0.341 0.2)` untuk pengalamatan sRGB eksplisit, dan fungsi paralel `color(display-p3 ...)` dan `color(rec2020 ...)` untuk nilai gamut luas yang tidak dapat dikodekan hex.
Matematika konversi berjalan kedua arah secara bersih. **HEX ke RGB**: urai hex 6 digit `#RRGGBB` sebagai tiga angka basis-16 2 digit melalui `parseInt(hex.slice(1, 3), 16)`, `parseInt(hex.slice(3, 5), 16)`, `parseInt(hex.slice(5, 7), 16)`. Untuk singkatan 3 digit `#RGB`, kembangkan setiap digit dengan menggandakannya (`#F73` → `#FF7733`) sebelum diurai — ini *bukan* left-pad. Untuk alpha 8 digit `#RRGGBBAA`, urai pasangan akhir dengan cara yang sama dan bagi dengan 255 untuk mendapatkan float alpha 0-1. Untuk singkatan alpha 4 digit `#RGBA`, kembangkan setiap digit terlebih dahulu (`#F738` → `#FF773388`). **RGB ke HEX** adalah inversnya: untuk setiap kanal, panggil `value.toString(16).padStart(2, '0')` untuk mendapatkan pasangan hex 2 digit (`padStart` itu penting — tanpanya, nilai kanal 5 akan diserialisasi sebagai `'5'` alih-alih `'05'`, menghasilkan hex tidak valid), lalu gabungkan. Kedua arah bersifat bit-eksak di kedua arah: 16² = 256, persis cocok dengan rentang byte 0-255 yang ditempati setiap kanal, sehingga round-trip HEX → RGB → HEX menghasilkan input asli secara harfiah tanpa pergeseran float.
**Mengapa hex versus RGB?** Hex lebih pendek, native-alat-desain, dan format yang dipelajari mata Anda seiring waktu — sebagian besar developer front-end dapat mengidentifikasi `#3b82f6` sebagai Tailwind blue-500 dalam sekilas. RGB adalah pengalamatan-kanal eksplisit, lebih mudah untuk dihitung di JavaScript, dan satu-satunya dari keduanya yang menerima alpha dan persentase dengan bersih. Kedua format hidup berdampingan karena mereka memecahkan masalah yang berbeda. Stylesheet web dan panduan brand condong ke hex karena biaya copy-paste mendominasi. Panggilan gambar canvas, pemrosesan gambar, API LED perangkat keras, dan kode apa pun yang melakukan aritmatika per-kanal condong ke RGB karena mengindeks ke dalam tuple mengalahkan memotong string. Pergeseran di antaranya terjadi puluhan kali dalam proyek web tipikal — tempel hex dari Figma, konversi ke integer RGB untuk panggilan `ctx.fillStyle = ...`, konversi kembali ke hex untuk definisi variabel CSS.
Alur kerja HEX → RGB alat ini adalah satu arah dari keluarga 5-spoke yang semuanya berbagi konverter warna terpadu yang mendasarinya. Konverter warna terpadu khusus adalah hub-nya — ia menunjukkan semua 9 format yang dapat diedit secara bersamaan dan merupakan alat yang tepat ketika alur kerja Anda membutuhkan lebih dari sekadar hex dan RGB. Spoke arah-tunggal menargetkan intent pencarian Google tertentu: konverter RGB ke hex kebalikan untuk arah invers, konverter HEX ke HSL untuk ruang kognitif-desainer warisan, konverter HEX ke OKLCH untuk sistem desain seragam-perseptual modern (Tailwind v4 dan shadcn keduanya defaultnya OKLCH sekarang), dan konverter HEX ke CMYK untuk aproksimasi persiapan cetak. Kelima spoke dan hub berbagi mesin parsing yang sama dan matematika konversi yang sama, sehingga hasilnya dijamin identik di seluruh keluarga. Setiap konversi berjalan secara lokal di peramban Anda — kode hex Anda tidak pernah diunggah, tidak pernah dicatat, dan nol permintaan jaringan berjalan saat Anda mengetik. Verifikasi di DevTools.
// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
let h = input.trim().replace(/^#/, '');
// Expand 3-digit and 4-digit shorthand by duplicating each digit
if (h.length === 3 || h.length === 4) {
h = h.split('').map(c => c + c).join('');
}
if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
throw new Error(`Invalid hex: ${input}`);
}
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
return [r, g, b, a];
}
console.log(parseHex('#FF5733')); // [255, 87, 51, 1]
console.log(parseHex('#F73')); // [255, 119, 51, 1]
console.log(parseHex('#FF573380')); // [255, 87, 51, 0.5019607843137255] 3 digit `#F73`, alpha 4 digit `#F738`, 6 digit `#FF5733`, alpha 8 digit `#FF5733CC`, ditambah varian tanpa `#` untuk masing-masing (`F73`, `FF5733`, dst.). Parser menormalkan semuanya menjadi tuple RGB internal yang sama sebelum ditampilkan, sehingga Anda dapat menempelkan bentuk apa pun yang digunakan sumber tanpa memperluas singkatan secara manual terlebih dahulu. Kapitalisasi juga dinormalkan — `#ff5733` dan `#FF5733` menghasilkan output yang identik.
Bidang RGB memunculkan nilai dalam bentuk modern CSS Color 4: `rgb(255 87 51)` untuk warna opak, `rgb(255 87 51 / 0.5)` untuk yang membawa alpha. Kedua bentuk bekerja di setiap peramban evergreen (Chrome 65+, Safari 13+, Firefox 52+). Bentuk koma warisan `rgb(255, 87, 51)` hanya satu replace mekanis jika target Anda membutuhkannya; sintaks modern lebih disukai di kode baru karena selaras dengan sintaks fungsional lainnya CSS Color 4.
HEX → RGB adalah matematika integer-ke-integer: `parseInt(hex, 16)` mengembalikan nilai 0-255 yang eksak dengan nol keterlibatan float. Arah sebaliknya (`.toString(16).padStart(2, '0')`) sama eksaknya. Round-trip HEX → RGB → HEX → RGB → HEX menghasilkan input asli secara harfiah, tanpa batas. Source-of-truth internal OKLCH berarti bahkan rantai yang lebih panjang HEX → RGB → HSL → OKLAB → HEX tetap bit-stabil, yang tidak dijamin konverter warisan yang mengalir melalui HSL.
Hex 8 digit dan 4 digit dengan alpha (`#RRGGBBAA` dan `#RGBA`) diurai dengan benar. Pasangan akhir memetakan ke float alpha 0-1: `00` → 0, `80` → 0,502, `FF` → 1. Output menggunakan sintaks slash CSS Color 4 (`rgb(255 87 51 / 0.5)`) secara default; bentuk warisan `rgba(255, 87, 51, 0.5)` hanya satu replace. Berguna untuk migrasi token desain di mana nilai alpha mungkin telah terkubur di dalam kode hex 8 digit.
Hex yang sama yang Anda tempel juga menggerakkan HSL, HSV, HWB, OKLCH, OKLAB, CMYK, dan nama warna CSS terdekat — semuanya terlihat dalam sekilas di halaman yang sama. Anda tidak pernah terkunci hanya pada hex → RGB. Jika rekan tim membutuhkan triple OKLCH untuk token Tailwind v4, nama warna terdekat untuk prosa dokumentasi, atau aproksimasi CMYK untuk penawaran cetak, nilainya sudah ada di sana dengan tombol Salin masing-masing.
Lewatkan sebuah hex dan baris kontras langsung menilainya terhadap putih dan hitam menggunakan WCAG 2.1 (lantai regulasi: 4,5:1 untuk teks badan, 7:1 untuk AAA) dan APCA Lc (penerus WCAG 3 yang diusulkan: target `|Lc| ≥ 75` untuk teks badan). Berguna ketika Anda baru saja mengonversi hex brand ke RGB dan ingin memverifikasi bahwa hex itu benar-benar terbaca sebagai warna teks badan sebelum mengirimnya.
Di bawah pemilih, bagian Salin sebagai kode mengubah warna saat ini menjadi snippet siap-tempel untuk lima platform: properti kustom CSS (`--color-brand: rgb(255 87 51)`), token `@theme` Tailwind v4, literal SwiftUI `Color(red:green:blue:)`, konstanta Jetpack Compose `Color(0xFFFF5733)`, Flutter `Color(0xFFFF5733)`. Sintaks yang persis diharapkan setiap platform, siap dijatuhkan ke katalog aset iOS, file tema Android, atau `ThemeData` Flutter.
Semua parsing hex, konversi RGB, penilaian kontras, dan generasi palet berjalan secara lokal di peramban Anda. Kode hex Anda tidak pernah ditransmisikan, tidak pernah dicatat di server mana pun, tidak pernah dianalisis. Nol permintaan jaringan saat Anda mengetik — verifikasi di DevTools. Aman untuk palet brand yang belum diumumkan, token desain internal, mockup draf di bawah NDA, dan pekerjaan warna rahasia lainnya.
Warna saat ini dikodekan ke hash URL sebagai `#hex=ff5733` secara otomatis pada setiap perubahan. Salin URL, tempel ke thread Slack atau isu GitHub, dan siapa pun yang membukanya mendarat pada hex yang sama dengan hasil RGB yang sama. Hash hanya hidup di address bar Anda dan tidak pernah ditransmisikan ke server (peramban tidak menyertakan fragmen URL dalam permintaan HTTP), sehingga bahkan membagikan tautan tidak membocorkan warna ke pihak ketiga mana pun.
Hasil Google default untuk "hex to rgb" — formulir arah-tunggal dengan hex masuk, RGB keluar, tidak ada format lain yang terlihat. Berguna untuk pencarian sekali pakai saat datang dari pencarian. Kekurangan OKLCH, pemeriksaan kontras, deteksi gamut, penanganan alpha, dan tampilan bersamaan multi-format. Alat ini menang di setiap sumbu kecuali kasus konversi-tunggal yang minimalis.
Halaman SEO per-warna yang berjalan lama dengan metadata mendalam: konversi, palet, harmonies, gradien untuk hex apa pun yang Anda kueri. UI sudah ketinggalan zaman (awal 2010-an), tanpa dukungan OKLCH, tanpa kontras APCA, tanpa penanganan gamut luas. Kuat untuk penemuan SEO hex tertentu melalui Google; lebih lemah untuk alur kerja konversi aktif di mana mengetik ke dalam UX bidang-bersatu lebih cepat.
Toggle HEX/RGB/HSL ramah-pemula di halaman fokus-pengajaran, ada di mana-mana di hasil pencarian. Tanpa OKLCH, tanpa penanganan alpha di luar rgba, tanpa fitur lanjutan. Berguna sebagai referensi di samping konten penjelas W3Schools. Alat ini menang di setiap sumbu lain: lebih banyak format, matematika perseptual, fitur gamut + kontras + CVD, ekspor kode modern untuk Tailwind v4 / SwiftUI / Compose / Flutter.
DevTools Chrome, Firefox, dan Safari semuanya mengirim pemilih warna yang mengonversi hex ke RGB secara inline ketika Anda mengklik sampel warna di panel CSS. Gratis, tanpa instal, selalu tersedia. Kekurangan OKLCH, kekurangan URL yang dapat dibagikan, kekurangan ekspor kode untuk platform non-web (SwiftUI, Compose). Gunakan DevTools ketika Anda sudah men-debug CSS; gunakan alat ini ketika Anda membutuhkan output lintas-platform.
Dibundel dengan setiap Mac sejak OS X — hover di atas piksel mana pun dan baca nilai RGB / hex / linear. Sangat baik untuk mengambil sampel warna piksel dari aplikasi mana pun di layar. Tidak mengonversi nilai hex yang ditempel; ini adalah pengambil-sampel-layar, bukan konverter. Gunakan tombol EyeDropper di pemilih alat ini (hanya peramban Chromium) untuk kemampuan pengambilan-sampel-layar yang sama di dalam peramban.
Halaman SEO per-warna yang mencakup banyak ruang (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Kekurangan dukungan OKLCH modern dan UX pengeditan bidang-bersatu. Halaman konten yang dihasilkan otomatis terasa seperti content-farm tetapi data konversinya benar. Bagus untuk menggali metadata warna individu melalui Google; alat ini lebih cepat untuk alur kerja aktif.
#FF5733
Output RGB: `rgb(255 87 51)`. Kasus klasik — seorang desainer menjatuhkan warna brand ke Figma, Anda menangkap layarnya, eyedropper memberi Anda hex, dan sekarang Anda membutuhkan integer kanal untuk panggilan gambar canvas, strip LED perangkat keras, atau matematika piksel terhadap buffer gambar. Sintaks dipisah-spasi CSS Color 4 yang ditampilkan adalah bentuk modern; bentuk koma warisan `rgb(255, 87, 51)` identik dalam makna dan didukung di setiap peramban sejak IE 3.
#3b82f6
Output RGB: `rgb(59 130 246)`. Pemilih Color Adobe (di Photoshop, Illustrator, dan InDesign) menerima integer RGB dalam rentang 0-255 sebagai input native-nya — tempel 59 / 130 / 246 ke tiga kotak kanal dan Anda telah mencocokkan `blue-500` Tailwind dengan persis. Berguna ketika seorang desainer perlu membuat mockup warna web di aplikasi tata letak yang sadar-cetak, atau ketika Anda mengambil sampel warna brand ke pustaka sampel warna untuk pengeditan gambar.
#FF573380
Output RGB: `rgb(255 87 51 / 0.5)`. Pasangan terakhir (`80`) didekodekan sebagai `128/255 ≈ 0.502`, dimunculkan sebagai kanal alpha melalui sintaks slash CSS Color 4. Bentuk warisan yang setara adalah `rgba(255, 87, 51, 0.5)`, yang masih didukung di mana-mana dan yang diharapkan preprocessor lama. Hex 8 digit dirilis native di semua peramban evergreen pada 2018; sebelum itu, alpha harus diekspresikan melalui fungsi `rgba()`.
#F73
Output RGB: `rgb(255 119 51)`. Spesifikasi CSS mendefinisikan hex 3 digit sebagai singkatan di mana setiap digit digandakan untuk membentuk ekuivalen 6 digit: `#F73` berkembang menjadi `#FF7733`, sehingga R = `FF` = 255, G = `77` = 119, B = `33` = 51. Ini *bukan* left-pad — `#F73` **bukan** `#000F73`. Banyak pemula salah memahami ini; perilaku ekspansi alat ini membuat aturan terlihat dalam sekilas.
Tabel referensi dari 10 kode hex yang paling banyak dikonversi dan ekuivalen RGB-nya — primer murni, sekunder murni, dan dua warna brand dunia nyata dari palet Tailwind.
Hitam murni. Ketiga kanal pada nol — ketiadaan cahaya yang dipancarkan. Triple RGB (0, 0, 0).
#000000 → rgb(0 0 0) Hitam murni di layar jarang merupakan pilihan desain yang tepat — coba `#111` atau OKLCH lightness 0,1-0,15 untuk teks badan yang lebih lembut.
Butuh OKLCH sebagai gantinya? Coba konverter HEX ke OKLCH khusus untuk output yang seragam-perseptual.
Putih murni. Ketiga kanal pada nilai maksimumnya (255). Warna paling cerah di sRGB.
#FFFFFF → rgb(255 255 255) Latar belakang putih murni dapat menyebabkan ketegangan mata di lingkungan gelap — pertimbangkan `#fafafa` atau OKLCH 0,98 untuk alternatif yang lebih hangat.
Butuh OKLCH sebagai gantinya? Coba konverter HEX ke OKLCH khusus untuk output yang seragam-perseptual.
Merah murni. Kanal R pada maksimum, G dan B pada nol. Yang pertama dari tiga primer sRGB.
#FF0000 → rgb(255 0 0) Merah murni sangat jenuh dan jarang cocok dengan palet brand — sebagian besar warna brand "merah" duduk lebih dekat ke #DC2626 atau #E53935.
Butuh OKLCH sebagai gantinya? Coba konverter HEX ke OKLCH khusus untuk output yang seragam-perseptual.
Hijau murni. Kanal G pada maksimum, R dan B pada nol. Nama warna CSS `lime` (bukan `green`, yang #008000).
#00FF00 → rgb(0 255 0) Kata kunci CSS `green` resolusi ke #008000 (setengah-terang), bukan #00FF00 — sumber kebingungan yang sering. Gunakan `lime` untuk hijau RGB murni.
Butuh OKLCH sebagai gantinya? Coba konverter HEX ke OKLCH khusus untuk output yang seragam-perseptual.
Biru murni. Kanal B pada maksimum, R dan G pada nol. Primer sRGB ketiga.
#0000FF → rgb(0 0 255) Biru murni di latar putih gagal kontras WCAG AA (3,7:1) — pertimbangkan biru brand yang lebih gelap seperti #1D4ED8 (Tailwind blue-700) untuk teks badan.
Butuh OKLCH sebagai gantinya? Coba konverter HEX ke OKLCH khusus untuk output yang seragam-perseptual.
Cyan — hijau dan biru pada maksimum, merah pada nol. Salah satu dari tiga sekunder sRGB. Nama warna CSS `cyan` (atau setara `aqua`).
#00FFFF → rgb(0 255 255) Cyan dan aqua adalah sinonim persis di CSS — keduanya resolusi ke #00FFFF. Pilih satu dan tetap konsisten di stylesheet Anda.
Butuh OKLCH sebagai gantinya? Coba konverter HEX ke OKLCH khusus untuk output yang seragam-perseptual.
Magenta — merah dan biru pada maksimum, hijau pada nol. Nama warna CSS `magenta` (atau setara `fuchsia`).
#FF00FF → rgb(255 0 255) Magenta dan fuchsia adalah sinonim persis di CSS — keduanya resolusi ke #FF00FF. Umum di pola tes dan overlay alat developer.
Butuh OKLCH sebagai gantinya? Coba konverter HEX ke OKLCH khusus untuk output yang seragam-perseptual.
Kuning — merah dan hijau pada maksimum, biru pada nol. Yang paling cerah dari tiga sekunder sRGB berdasarkan luminansi yang dipersepsikan.
#FFFF00 → rgb(255 255 0) Kuning adalah warna non-putih dengan luminansi tertinggi di layar — teks kuning pada latar putih hampir tidak terlihat, meskipun hex terlihat baik-baik saja di atas kertas.
Butuh OKLCH sebagai gantinya? Coba konverter HEX ke OKLCH khusus untuk output yang seragam-perseptual.
Warna brand blue-500 default Tailwind CSS — "web blue" kanonik pertengahan-2020-an. Digunakan di dasbor, situs pemasaran, dan alat admin yang tak terhitung jumlahnya.
#3b82f6 → rgb(59 130 246) Tailwind v4 mendefinisikan ulang blue-500 di OKLCH (`oklch(0.629 0.193 263.4)`) untuk ramp yang seragam-perseptual — hex tetap sama sebagai fallback.
Butuh OKLCH sebagai gantinya? Coba konverter HEX ke OKLCH khusus untuk output yang seragam-perseptual.
rose-500 default Tailwind CSS — merah-muda saturasi-tinggi yang umum digunakan untuk tombol aksen, status peringatan, dan kontras brand.
#f43f5e → rgb(244 63 94) Rose-500 lulus WCAG AA (4,6:1) terhadap putih untuk teks besar tetapi gagal untuk teks badan — pasangkan dengan rose-600 (#e11d48) atau lebih gelap untuk salinan badan di atas putih.
Butuh OKLCH sebagai gantinya? Coba konverter HEX ke OKLCH khusus untuk output yang seragam-perseptual.
Jatuhkan nilai hex apa pun ke input HEX — dengan atau tanpa `#` di depan, dalam singkatan 3 digit (`#F73`), bentuk lengkap 6 digit (`#FF5733`), singkatan alpha 4 digit (`#F738`), atau bentuk lengkap alpha 8 digit (`#FF5733CC`). Alat menormalkan kelima bentuk input ke warna kanonik yang sama secara internal. Kapitalisasi tidak penting (`#ff5733` dan `#FF5733` diurai secara identik). Karakter tidak valid atau jumlah digit salah menghasilkan error inline yang tenang; hex yang valid memperbarui setiap bidang format lainnya secara waktu nyata.
Bidang RGB di bawah bidang HEX menunjukkan nilai `rgb()` yang cocok dalam sintaks dipisah-spasi modern CSS Color 4: `rgb(255 87 51)` untuk warna opak, `rgb(255 87 51 / 0.5)` untuk yang membawa alpha. Setiap kanal adalah integer 0-255; alpha dinormalkan ke 0-1. Nilai-nilai bersifat bit-eksak — `parseInt('FF', 16)` mengembalikan 255, tanpa aritmatika float yang terlibat, sehingga round-trip kembali ke hex menghasilkan input asli secara harfiah.
Setiap kartu format memiliki tombol Salin di sebelah kanan. Satu klik dan nilai mendarat di clipboard Anda — label tombol sebentar berkedip "Disalin!" sehingga Anda tahu. String yang disalin adalah sintaks kanonik CSS Color 4 (`rgb(255 87 51)`); jika target Anda membutuhkan bentuk koma warisan, konversinya bersifat mekanis (ganti spasi dengan `, `). Untuk output spesifik-platform (SwiftUI, Compose, Flutter, Tailwind v4), gunakan bagian Salin sebagai kode di bawah pemilih.
Hex yang sama yang Anda tempel juga menyalakan bidang format lainnya — HSL untuk CSS warisan, OKLCH dan OKLAB untuk sistem desain yang seragam-perseptual, HSV dan HWB untuk alur kerja pemilih warna desainer, CMYK untuk estimasi cetak, dan nama warna CSS terdekat untuk dokumentasi dan prosa. Anda tidak pernah terkunci hanya pada hex → RGB; jika Anda juga membutuhkan triple OKLCH untuk dijatuhkan ke blok `@theme` Tailwind v4, itu sudah ada di bidang OKLCH dengan tombol Salin-nya sendiri.
Di bawah grid format adalah kotak SL + slider rona + slider alpha untuk eksplorasi visual. Seret kontrol mana pun dan setiap bidang teks diperbarui secara waktu nyata, termasuk HEX dan RGB yang Anda mulai. Pada peramban berbasis Chromium (Chrome, Edge, Brave), tombol EyeDropper mengaktifkan `EyeDropper` API native untuk mengambil sampel piksel mana pun di layar, termasuk di luar jendela peramban — berguna ketika Anda ingin menangkap hex dari UI aplikasi lain tanpa tangkapan layar terlebih dahulu.
Singkatan 3 digit `#RGB` berkembang dengan *menggandakan setiap digit*, bukan dengan left-padding dengan nol. `#F73` menjadi `#FF7733` (oranye terang), bukan `#000F73` (biru gelap). Ini adalah pojok sintaks warna CSS tunggal yang paling sering disalahpahami; pemula sering berasumsi singkatannya adalah semacam zero-pad dan berakhir dengan warna yang sangat salah. Aturan yang sama berlaku untuk singkatan alpha 4 digit `#RGBA` — setiap digit digandakan untuk membentuk ekuivalen 8 digit.
Asumsi #F73 left-pads menjadi #000F73: diharapkan: biru gelap rgb(0, 15, 115) sebenarnya: oranye terang rgb(255, 119, 51)
Singkatan 3 digit menggandakan setiap digit: #F73 → #FF7733 → rgb(255, 119, 51) Diverifikasi oleh ekspansi langsung alat saat Anda mengetik.
Mengonversi RGB kembali ke hex memerlukan `toString(16)` setiap kanal di-left-pad menjadi 2 digit. Tanpa `padStart(2, '0')`, nilai kanal satu-digit menghasilkan hex tidak valid: `rgb(5, 87, 51)` akan diserialisasi sebagai `#55733` (5 karakter) alih-alih `#055733` (6 karakter). Banyak konverter ad-hoc melewatkan pad dan menghasilkan output rusak untuk kanal apa pun di bawah 16. Idiom standar adalah `value.toString(16).padStart(2, '0')` untuk masing-masing R, G, B.
Lewati padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Menghasilkan hex 5-karakter yang tidak valid. Gunakan padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Hex 6-karakter yang valid; bekerja dengan benar untuk semua nilai kanal 0-255. Hex CSS 8 digit adalah `#RRGGBBAA` — alpha adalah pasangan *terakhir*. Beberapa pustaka warna (terutama `Color.parseColor()` Android lama) menggunakan urutan terbalik `#AARRGGBB` dengan alpha sebagai pasangan *pertama*, yang tidak kompatibel dengan hex CSS. Hex web `#FF573380` (oranye pada alpha 50%) diinterpretasikan sebagai `#AARRGGBB` menjadi alpha=255, R=87, G=51, B=128 — cyan gelap pada opasitas penuh. Selalu verifikasi urutan alpha platform target sebelum melakukan round-trip hex 8 digit.
Tempel hex CSS 8 digit ke Android Color.parseColor() warisan: #FF573380 diinterpretasikan sebagai #AARRGGBB → warna salah dan alpha sepenuhnya salah.
Gunakan format yang didokumentasikan platform target: untuk Android Compose: Color(0xFFFF5733) dengan alpha sebagai byte pertama untuk CSS: #FF573380 dengan alpha sebagai byte terakhir Jangan cross-paste antara keduanya tanpa menyusun ulang.
Kanal RGB bersifat gamma-encoded, bukan linear. Merata-ratakan dua nilai RGB memberikan titik-tengah yang salah secara perseptual. `(255, 0, 0)` dirata-ratakan dengan `(0, 255, 0)` menghasilkan `(127, 127, 0)`, zaitun gelap yang berlumpur, bukan titik-tengah kuning terang yang Anda harapkan dari pencampuran cahaya merah dan hijau. Untuk blending yang benar, dekode ke linear-RGB terlebih dahulu melalui fungsi transfer sRGB (CSS Color 4 §11.2), rata-rata di ruang linear, lalu enkode-ulang. Atau bekerja di OKLAB / OKLCH di mana jarak perseptual seragam.
Rata-ratakan RGB gamma-encoded secara langsung: (rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0) Terlihat seperti zaitun gelap, bukan kuning terang.
Rata-ratakan di linear-RGB: dekode → linear-RGB → rata-rata → enkode-ulang → rgb(188, 188, 0) Kuning terang yang terlihat, cocok dengan apa yang dihasilkan pencampuran cahaya fisik.
Alat Konversi
Konversi antara biner, hex, desimal, oktal, dan basis apa pun (2-36) secara instan. Presisi BigInt, output siap kode. Gratis, privat — tanpa pendaftaran.
Alat Konversi
Konversi HEX ke RGB, HSL, OKLCH, OKLAB, dan CMYK di peramban Anda — salin format apa pun dengan satu klik. Gratis, tanpa daftar, warna Anda tidak pernah meninggalkan halaman.
Alat Konversi
Konversi warna HEX ke CMYK di peramban Anda. Aproksimasi naif berbasis sRGB untuk pratinjau cetak. Gratis, tanpa daftar, warna Anda tetap lokal.
Alat Konversi
Konversi warna hex apa pun ke HSL di peramban Anda — 3 digit, 6 digit, dan 8 digit dengan alpha semuanya didukung. Gratis, instan, tanpa daftar, warna Anda tidak pernah meninggalkan halaman.
Alat Konversi
Konversi HEX ke OKLCH untuk token desain Tailwind v4. Output seragam-perseptual langsung dengan peringatan gamut Display P3. Gratis, hanya di peramban.
Alat Konversi
Kompres JPEG, PNG & WebP hingga 80% lebih kecil di browser, tanpa upload. Batch 20 gambar, atur kualitas, bandingkan sebelum & sesudah. Gratis & privat.