Konverter RGB ke HEX

Apa Itu Konverter RGB ke HEX?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

Fitur Utama

Alternatif Konverter RGB ke HEX

Contoh RGB ke HEX

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

Konversi RGB → HEX yang Umum

Tabel referensi dari 10 tuple RGB yang paling banyak dikonversi dan ekuivalen hex-nya — primer murni, sekunder murni, dan dua warna brand dunia nyata dari palet Tailwind.

Cara Menggunakan Konverter RGB ke HEX

1. 1

   Ketik atau tempel tuple RGB ke bidang RGB

   Jatuhkan nilai `rgb()` apa pun ke input RGB — dipisah-spasi modern `rgb(255 87 51)`, koma warisan `rgb(255, 87, 51)`, dengan alpha melalui slash `rgb(255 87 51 / 0.5)` atau melalui bentuk `rgba(255, 87, 51, 0.5)`, atau kanal persentase `rgb(100% 34% 20%)`. Alat menormalkan semua bentuk input ke tuple RGB internal yang sama sebelum menghitung hex. Karakter tidak valid, integer di luar rentang, atau sintaks yang salah bentuk menghasilkan error inline yang tenang; RGB yang valid memperbarui setiap bidang format lainnya secara waktu nyata.

2. 2

   Baca kode hex dari bidang HEX

   Bidang HEX di atas bidang RGB menunjukkan nilai hex yang cocok: `#FF5733` untuk warna opak, `#FF573380` untuk yang membawa alpha (bentuk 8 digit). Output menggunakan digit hex huruf besar secara default untuk konsistensi dengan sebagian besar panduan brand; huruf kecil (`#ff5733`) hanya satu replace mekanis dan sama-sama CSS yang valid. Konversinya bersifat bit-eksak — round-trip RGB → HEX → RGB memulihkan tuple asli secara harfiah tanpa pergeseran float.

3. 3

   Klik Salin untuk mengambil string hex

   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 termasuk `#` di depan sehingga tertempel langsung ke aturan CSS, bidang warna Figma, ekstensi hex SwiftUI, atau `colors.xml` Android. Untuk sintaks spesifik-platform (SwiftUI `Color(red:green:blue:)`, Compose `Color(0xFF...)`, token `@theme` Tailwind v4), gunakan bagian Salin sebagai kode di bawah pemilih.

4. 4

   Juga terlihat: HSL, OKLCH, OKLAB, CMYK, nama warna

   RGB 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 RGB → hex; jika Anda juga membutuhkan triple OKLCH untuk blok `@theme` Tailwind v4, itu sudah ada di bidang OKLCH dengan tombol Salin-nya sendiri.

5. 5

   Gunakan pemilih untuk tweak visual

   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 RGB dan HEX 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 tuple RGB dari UI aplikasi lain tanpa tangkapan layar terlebih dahulu, lalu langsung membaca hex.

Kesalahan RGB / HEX yang Umum

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.

Lewati pembulatan:
(0.5 * 255).toString(16) → '7f.8'
Menghasilkan hex yang tidak valid dengan titik desimal.

Bulatkan ke integer terlebih dahulu:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Pasangan hex 2 digit yang valid; cocok dengan normalisasi CSS Color 4.

Pancarkan hex alpha-awal Android ke CSS:
rgb(255 87 51 / 0.5) → #80FF5733 (format Android)
CSS mengurai sebagai alpha=128, R=255, G=87, B=51 — warna yang sepenuhnya salah.

Gunakan format yang didokumentasikan platform target:
untuk CSS: #FF573380 (alpha sebagai byte terakhir)
untuk Android Compose: Color(0x80FF5733) (alpha sebagai byte pertama)
Jangan cross-paste antara keduanya tanpa menyusun ulang.

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.

Siapa yang Menggunakan RGB ke HEX

Developer Frontend Mengonversi RGB Canvas ke Hex CSS

Fungsi gambar Canvas API melaporkan dan menerima warna sebagai tuple RGB (`ctx.fillStyle = 'rgb(255 87 51)'`), tetapi stylesheet CSS di sekitarnya menginginkan variabel hex (`--color-fill: #FF5733`). Menempelkan RGB sekali menghasilkan hex yang cocok, siap dijatuhkan ke properti kustom CSS. Berguna ketika mengekstrak warna brand dari grafik yang di-render-canvas atau visualisasi data untuk digunakan kembali di UI statis.

Desainer Mengonversi RGB Photoshop ke Hex Figma

Pemilih Color Adobe (di Photoshop, Illustrator, dan InDesign) melaporkan RGB sebagai tiga integer 0-255 di tiga kotak kanal. Figma, sebaliknya, menampilkan nilai warna sebagai hex secara default di panel desainnya. Tempel tiga integer Photoshop sebagai `rgb(...)` di sini, salin output hex, jatuhkan ke bidang warna Figma. Mencocokkan warna Photoshop asli dengan persis tanpa jalan memutar tangkapan-layar-dan-eyedropper.

Hardware Dev Mengonversi RGB Sensor LED ke Hex Web

Strip LED yang dapat dialamatkan, sensor warna, dan kamera RGB perangkat keras semuanya melaporkan nilai kanal sebagai integer 0-255. Ketika pembacaan perlu menggerakkan dasbor web ("lampu saat ini bersinar warna ini"), kode hex yang cocok adalah apa yang diharapkan atribut `style="background: ..."` CSS. Tempel triple RGB sensor, salin hex, colokkan ke markup dasbor.

Game Dev Mengekspor Color Unity ke Mockup Web

Konstruktor `Color` Unity dan `FLinearColor` Unreal mengambil float ternormalisasi 0-1; mengalikan masing-masing dengan 255 memberikan integer RGB yang cocok. Tempel `rgb(...)` yang dihasilkan di sini, salin hex, jatuhkan ke mockup web atau situs pemasaran yang perlu mencocokkan warna aksen dalam-game dengan persis. Tampilan OKLCH bersamaan juga memunculkan kecerahan perseptual sehingga palet mockup dapat disetel-tangan untuk mencocokkan tingkat kecerahan game.

Insinyur Aksesibilitas Mengaudit Warna Brand Photoshop

Ketika panduan gaya brand melaporkan warna sebagai triple integer RGB ("oranye brand adalah RGB 255 / 87 / 51") tetapi alat audit WCAG menginginkan kode hex, konverter ini adalah jembatannya. Tempel triple RGB, salin hex, jalankan melalui audit. Badge kontras WCAG dan APCA di alat ini juga memunculkan vonis dalam satu langkah, sehingga Anda tidak perlu memantul antara tiga alat terpisah.

Email Dev Memigrasikan rgba() ke Hex 8 Digit

HTML klien-email modern mendukung hex 8 digit (`#FF573380`) untuk warna yang membawa alpha, tetapi template warisan sering menyimpan nilai yang sama sebagai `rgba(255, 87, 51, 0.5)`. Menempelkan rgba() di sini dan membaca output hex 8 digit membuat migrasi bersifat mekanis. Bidang HEX menunjukkan `#FF573380` untuk kasus alpha 50%; bentuk warisan `rgba()` tetap di bidang RGB untuk konteks fallback yang masih membutuhkannya.

Developer Mendokumentasikan Token Brand dengan Kedua Format

Dokumentasi token desain sering menunjukkan warna yang sama dalam kedua bentuk RGB dan hex: hex untuk blok kode CSS, RGB untuk anotasi prosa ("oranye brand adalah `#FF5733`, setara dengan RGB 255 / 87 / 51"). Memiliki keduanya terlihat berdampingan memungkinkan penulis dokumen menyalin masing-masing dalam satu kali jalan alih-alih menjalankan dua alat terpisah. Hash URL yang dapat dibagikan juga memungkinkan pembaca mengklik melalui ke warna persis yang sedang dibahas.

Insinyur QA Menegaskan Warna Piksel Terhadap Spesifikasi Hex

Tes regresi visual kadang menangkap warna piksel sebagai integer RGB (`expect(pixel).toMatchRgb([255, 87, 51])`), sementara spesifikasi yang mendasarinya diberikan dalam hex ("tombol harus di-render sebagai `#FF5733`"). Menempelkan RGB yang ditangkap di sini menghasilkan hex yang cocok, yang dapat dibandingkan insinyur QA langsung dengan spesifikasi. Bit-eksaktitas konversi berarti perbandingan tidak akan flake pada perbedaan pergeseran float.

Matematika & Serialisasi RGB ke HEX

toString(16).padStart(2, '0') Adalah Implementasi Satu-Baris

Seluruh konversi RGB-ke-hex muat dalam satu ekspresi per kanal: `value.toString(16).padStart(2, '0')`. `toString(16)` JavaScript mengonversi integer desimal ke representasi string basis-16-nya. `padStart(2, '0')` adalah detail yang mudah dilupakan — tanpanya, nilai kanal 5 akan diserialisasi sebagai `'5'` alih-alih `'05'`, menghasilkan hex 5 karakter yang tidak valid seperti `#55733` ketika digabungkan dengan kanal lainnya. Idiom standar adalah `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')` diikuti dengan awalan `'#'`.

Normalisasi Persentase: × 255 / 100, Lalu Bulatkan

CSS Color 4 mengizinkan kanal persentase di `rgb()`: `rgb(100% 34% 20%)` setara dengan `rgb(255 87 51)`. Aturan normalisasinya adalah `Math.round(percent × 255 / 100)`. `50% × 255 / 100 = 127,5` dibulatkan menjadi 128 (banker's rounding menjauh dari ,5). Aturan yang sama berlaku untuk alpha ketika dinyatakan sebagai persentase (`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`). Bentuk integer dan persentase menghasilkan output hex yang identik setelah normalisasi; alat memunculkan bentuk integer kanonik di bidang RGB setelah re-normalisasi.

Alpha ke Hex: Kalikan dengan 255, Bulatkan, Enkode sebagai Pasangan Akhir

RGB yang membawa alpha (`rgb(255 87 51 / 0.5)`) memancarkan hex 8 digit dengan mengalikan alpha dengan 255, membulatkan ke integer terdekat, dan mengkodekan sebagai pasangan hex ke-4 yang ditambahkan setelah RGB. `0,5 × 255 = 127,5`, dibulatkan menjadi 128 = `0x80`, output `#FF573380`. Spesifikasi CSS Color 4 menggunakan banker's-rounding (round-half-to-even) untuk konversi ini, yang diikuti alat. Bentuk 8 digit kembali ke 6 digit ketika alpha tepat 1 untuk menghindari kebocoran pasangan `FF` di akhir ke stylesheet.

Input RGB: Dipisah-Spasi CSS Color 4 dan Koma Warisan Keduanya Diterima

Parser menerima baik bentuk modern CSS Color 4 `rgb(255 87 51)` maupun bentuk CSS 1 warisan `rgb(255, 87, 51)`. Bentuk modern selaras dengan notasi fungsional CSS Color 4 lainnya (`hsl()`, `lab()`, `oklch()`, `color()`) yang semuanya menggunakan pemisahan spasi dan slash-untuk-alpha. Bentuk koma warisan masih didukung di setiap peramban evergreen dan tetap umum di codebase yang lebih lama. Keduanya menghasilkan output hex yang identik; serializer hex alat tidak peduli bentuk input mana yang tiba.

Source-of-Truth Internal OKLCH untuk Stabilitas Round-Trip

Meskipun spoke ini menargetkan RGB → HEX secara spesifik, konverter yang mendasari yang dibagikan menahan warna kanonik sebagai triple OKLCH secara internal. Ini berarti RGB → HEX → HSL → OKLAB → CMYK → RGB round-trip tanpa pergeseran float per-langkah; konverter warisan yang mengalir melalui HSL atau sRGB sebagai pivotnya mengakumulasi error pembulatan di setiap konversi. Pilihan OKLCH (dibandingkan OKLAB) mempertahankan Hue sebagai sumbu yang stabil sehingga menyeret slider rona tidak secara tidak sengaja melintasi-fade melalui abu-abu. Per makalah OKLAB 2020 Björn Ottosson.

Pengkodean Kanal: Unsigned 8-Bit, Gamma-Encoded sRGB

Setiap kanal RGB adalah integer unsigned 8-bit (0-255), dikodekan di ruang warna sRGB yang didefinisikan oleh IEC 61966-2-1 (1996). Nilai-nilai bersifat *gamma-encoded* — artinya hubungan antara nilai kanal dan kecerahan yang dipersepsikan tidak linear, mengikuti fungsi transfer sRGB piecewise (kira-kira eksponen 2,4 dengan segmen linear kecil di dekat nol). Ini penting ketika Anda melakukan matematika warna: merata-ratakan dua nilai RGB dalam bentuk gamma-encoded memberikan titik-tengah perseptual yang salah. Untuk blending warna yang benar, dekode ke linear-RGB terlebih dahulu (CSS Color 4 §11.2), lalu rata-rata, lalu enkode-ulang. Model OKLCH internal alat membuatnya transparan.

Praktik Terbaik untuk Alur Kerja RGB / HEX

Pilih Hex Huruf Besar di Panduan Brand, Huruf Kecil di Kode

Panduan brand, PDF pemasaran, dan dokumentasi yang berorientasi-desainer biasanya menggunakan hex huruf besar (`#FF5733`) untuk konsistensi visual — tampilan semua-kapital terbaca sebagai pengidentifikasi brand. Kode (CSS, JSON, sumber JavaScript) biasanya menggunakan huruf kecil (`#ff5733`) berdasarkan konvensi karena huruf kecil lebih cepat diketik dan lebih umum di output linter yang dihasilkan otomatis. Keduanya valid CSS dan diurai secara identik; pilih satu untuk setiap konteks dan tetap konsisten. Alat memancarkan huruf besar secara default; satu replace mekanis berbalik ke huruf kecil.

Pancarkan Hex 8 Digit Hanya Ketika Alpha < 1

Ketika alpha sama dengan 1 (sepenuhnya opak), kembali ke bentuk 6 digit. Pasangan `FF` di akhir (`#FF5733FF`) adalah CSS yang sah tetapi secara visual mengacaukan stylesheet dan membingungkan beberapa parser warisan untuk salah-merender. Bentuk 8 digit harus muncul hanya ketika alpha benar-benar transparan secara berarti. Alat ini mengikuti aturan itu secara otomatis — warna opak memancarkan hex 6 digit, warna yang membawa alpha memancarkan hex 8 digit, dan cutoffnya eksak (alpha = 1,0 memancarkan 6 digit; alpha = 0,9999 memancarkan 8 digit untuk mempertahankan data).

Jangan Rata-Ratakan Kanal RGB Secara Langsung untuk Matematika Warna

Kanal RGB bersifat gamma-encoded — merata-ratakan dua nilai RGB memberikan titik-tengah perseptual yang salah. `(255, 0, 0)` dirata-ratakan dengan `(0, 255, 0)` menghasilkan `(127, 127, 0)`, zaitun gelap yang berlumpur, bukan titik-tengah kuning yang cerah secara visual yang Anda harapkan. Untuk blending warna yang benar, dekode ke linear-RGB terlebih dahulu (CSS Color 4 §11.2), lalu rata-rata, lalu enkode-ulang. Atau, lebih baik, bekerja di OKLAB atau OKLCH di mana jarak perseptual seragam — itulah yang dilakukan generator palet sistem desain.

Pilih Hex untuk Variabel CSS, RGB untuk Perangkat Keras

Ketika Anda menulis properti kustom CSS atau token konfigurasi Tailwind, pilih hex — lebih ringkas dan muat dengan bersih di JSON atau YAML. Ketika kode konsumsi melakukan aritmatika per-kanal (panggilan canvas, manipulasi gambar, driver LED perangkat keras, atribut warna OpenGL), bentuk integer RGB lebih cepat dikonsumsi. Kedua format menggambarkan warna yang sama; pilihannya murni tentang siapa yang membaca dan menulis, bukan tentang kebenaran. Tampilan bidang-bersamaan alat ini membuat keduanya sama-sama murah.

Validasi Rentang Alpha Sebelum Mengalikan dengan 255

Ketika mengimplementasikan konverter RGB → hex-8-digit Anda sendiri, validasi bahwa float alpha berada di dalam `[0, 1]` sebelum langkah `× 255`. Alpha di luar rentang (negatif, atau > 1) diam-diam menghasilkan pasangan hex yang tidak valid yang diterima beberapa parser dan ditolak beberapa lainnya — mode kegagalan yang rapuh. Clamp terlebih dahulu (`Math.max(0, Math.min(1, alpha))`), lalu kalikan, lalu bulatkan, lalu enkode-hex. Alat memunculkan error inline yang tenang untuk alpha di luar rentang alih-alih memancarkan string hex yang rusak.

Gunakan Hash URL untuk Berbagi Keputusan Warna Langsung

Setiap perubahan warna memperbarui hash URL sebagai `#hex=ff5733` secara otomatis. Salin URL ke thread Slack atau isu GitHub dan siapa pun yang membukanya mendarat pada warna yang sama dengan hex yang sama. Ini lebih andal daripada menempelkan tuple RGB di chat — penerima kadang salah ketik koma atau menjatuhkan kanal saat memasukkan nilai secara manual — dan memungkinkan thread review desain mereferensikan warna yang persis alih-alih "oranye yang kita bahas Selasa." Hash tidak pernah ditransmisikan ke server.

Pertanyaan yang Sering Diajukan