Konverter Kode Warna Massal

Tempel daftar kode warna atau CSS, dan hanya warnanya yang diubah sekaligus

Konverter Kode Warna Massal adalah alat yang mencari warna di dalam teks yang Anda tempel, lalu mengubah semuanya sekaligus ke format pilihan Anda: HEX, RGB, HSL, atau OKLCH. Daftar dengan satu warna per baris dapat langsung dimasukkan, begitu pula teks yang warnanya bercampur dengan nama dan simbol, seperti berkas CSS, SCSS, atau JSON token desain. Jika contoh di atas diubah ke RGB, nilai variabel --brand, yaitu #3498DB, menjadi rgb(52, 152, 219), sedangkan #00000080 yang memiliki alfa menjadi rgba(0, 0, 0, 0.5). Dengan hasil "Teks asli", nama variabel, komentar, dan indentasi tetap ada dan hanya nilai warnanya yang diganti. Dengan "Nilai per baris", alat ini menulis nilai warna yang ditemukan sebagai daftar.

Di kolom input, setiap baris diberi contoh warna yang ditemukan di sisi kiri, dan baris yang tidak terbaca diberi tanda seru. Palet di bagian atas menampilkan semua warna yang ditemukan sekaligus, sedangkan kartu warna di bawahnya menampilkan nilai HEX, RGB, HSL, dan OKLCH dari satu warna dan dapat disalin dengan satu ketukan. Jika urutan diganti menjadi urut rona atau urut terang, atau jika "Gabung duplikat" diaktifkan, contoh warna di palet bergeser ke posisi barunya sehingga warna yang berulang dan warna yang mirip mudah terlihat. Teks dan file yang Anda masukkan tidak dikirim ke server dan hanya diproses di peramban ini.

Kapan perlu mengubah kode warna sekaligus

• Memindahkan warna Tailwind CSS v4 ke HEX: Tailwind CSS v4 mendefinisikan palet warna bawaannya dengan nilai oklch(). Jika warna yang sama harus dipakai di tempat yang hanya menerima HEX atau RGB, seperti templat email, dokumen, atau alat desain lama, tempel saja baris variabel tema apa adanya lalu ubah ke HEX.
• Menyerahkan tabel warna dari desain ke kode: Kadang warna merek yang diberikan desainer dalam daftar HEX perlu dipakai pengembang sebagai rgb() atau hsl(), atau sebaliknya, nilai rgb() di kode perlu dimasukkan ke alat desain sebagai HEX. Baris yang memiliki nama tetap mempertahankan namanya, sehingga Anda tidak bingung warna itu milik variabel yang mana.
• Mengubah CSS lama ke OKLCH: OKLCH menulis warna dengan kecerahan, kroma, dan sudut rona, sehingga lebih mudah menyamakan kecerahan beberapa warna atau membuat warna bertingkat. Jika berkas CSS ditempel lalu diubah ke OKLCH, selektor dan properti tetap sama dan hanya nilainya yang berganti ke penulisan baru.
• Merapikan warna yang tersebar: Stylesheet yang diubah banyak orang sering berisi warna yang sama dengan penulisan berbeda, seperti #3498db, #3498DB, dan rgb(52, 152, 219). Jika "Gabung duplikat" diaktifkan, Anda bisa melihat berapa kali warna itu muncul dan di baris mana, dan jika diurutkan menurut rona, warna yang nyaris sama berdampingan sehingga kandidat untuk digabungkan mudah dipilih.
• Mengubah tiga kolom R, G, dan B di spreadsheet: Jika tiga sel R, G, dan B disalin dari tabel lalu ditempel, satu baris berisi tiga angka yang dipisahkan tab. Baris ini juga dibaca sebagai warna, sehingga daftar HEX dapat langsung dibuat.

Aturan pencarian warna

1. Jika satu baris penuh adalah satu nilai: Alat ini membaca HEX dengan # (3, 4, 6, atau 8 digit), rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(), dan nama warna CSS (148 nama seperti tomato dan rebeccapurple). Jika seluruh teks adalah daftar dengan satu nilai per baris (tanpa kurung kurawal, kurung siku, titik dua, tanda sama dengan, dan titik koma), HEX tanpa "#" dan R, G, B juga diterima. HEX tanpa "#" diterima untuk 3 dan 6 digit, sedangkan 8 digit hanya diterima jika memuat setidaknya satu huruf a sampai f. Delapan digit yang hanya berupa angka, seperti 20241020, mungkin sebuah tanggal sehingga tidak dianggap warna. Tiga bilangan bulat seperti 12, 34, 56 atau yang dipisahkan tab dibaca sebagai R, G, dan B.
2. Jika warna tercampur di dalam teks: Alat ini mencari semua HEX yang diawali # dan semua fungsi warna di dalam baris. Walaupun ada bersama nilai lain, seperti border: 1px solid #ddd;, hanya bagian warnanya yang diubah, dan jika satu baris memuat dua warna atau lebih, masing-masing diubah. Nama warna diubah jika hanya nama itu yang ada di dalam tanda kutip, seperti "danger": "crimson", atau jika berupa kata di dalam sebuah nilai, seperti border: 1px solid red !important;. Kata di dalam komentar, kunci JSON, dan bagian dari kata lain seperti .red-button tidak diubah.
3. Hanya posisi nilai yang diubah: Selektor ID yang hanya terdiri dari huruf HEX, seperti #add, #bad, dan #face, bentuknya sama dengan warna. Karena itu, pada teks yang memuat kurung kurawal (CSS, SCSS, JSON, dan berkas konfigurasi), hanya nilai # di posisi nilai yang diubah. Posisi nilai berarti ada titik dua (:) atau tanda sama dengan (=) setelah {, }, atau ; terdekat di depannya. Selektor dan bagian awal @media yang langsung bersambung ke { tanpa titik dua, serta nilai di dalam url(#…), dibiarkan. Pada a:hover #add { color: #fff; } hanya #fff yang berubah.
4. Pemberian nama: Jika ada nama di awal baris, seperti --brand: …, $brand: …, "brand": …, atau brand = …, nama itu ditulis di kartu warna dan tabel. Nama properti CSS seperti color, background, dan border bukan nama warna sehingga tidak ditulis.
5. Baris yang tidak terbaca: HEX dengan jumlah digit yang salah (#12345), angka R, G, B di luar rentang (256, 0, 0), dan fungsi dengan jumlah nilai atau satuan yang salah di dalam kurung ditandai sebagai kesalahan, dan teks aslinya dibiarkan di hasil. Jika seluruh teks adalah daftar, baris pendek berisi satu atau dua kata tanpa simbol kode juga ditandai sebagai nilai yang salah tulis. Pada teks yang bercampur dengan kode (CSS, JSON), baris @import, komentar, dan baris tanpa warna seperti margin: 0; tidak dianggap kesalahan dan dilewati begitu saja.

Cara penulisan tiap format

RGB dan HSL ditulis dengan penulisan lama yang dipisahkan koma. CSS terbaru juga membaca penulisan dengan spasi seperti rgb(52 152 219), tetapi penulisan dengan koma dapat dibaca juga oleh peramban lama dan sebagian besar alat desain. Nol di belakang dihapus, sehingga ditulis seperti hsl(32, 100%, 50%).

HSL dan OKLCH tidak dibulatkan ke bilangan bulat, karena bila ditulis sebagai bilangan bulat, warnanya sering kembali menjadi warna yang berbeda dari aslinya. Misalnya, jika #3498DB ditulis sebagai hsl(204, 70%, 53%) lalu dibaca lagi, hasilnya adalah #3398DB. Dengan jumlah digit seperti pada tabel di atas, seluruh 16.777.216 warna sRGB 8 bit kembali menjadi HEX yang sama dengan semula saat dibaca ulang. Jika C pada OKLCH hanya ditulis sampai desimal keempat, 94 dari 140.608 warna sampel bergeser satu tingkat, sehingga C ditulis sampai desimal kelima.

Contoh: sepuluh baris di layar awal diubah ke RGB

Pada contoh ini ditemukan 9 warna, dan karena baris 2 dan 9 berwarna sama, warna yang berbeda ada 8. Jika "Gabung duplikat" diaktifkan, #3498DB hanya tersisa satu kali di palet dan kartu warna, dengan tambahan ×2 serta nomor baris 2 dan 9. Jika hasil diubah menjadi "Nilai per baris", baris komentar dan nama variabel hilang, dan hanya tersisa 9 nilai rgb() (8 jika digabung).

Warna di luar sRGB disesuaikan ke warna terdekat

HEX dan RGB hanya dapat menulis nilai dalam ruang warna sRGB. Warna yang ditulis dengan OKLCH, lab(), atau color(display-p3 …) dapat mencakup rentang yang lebih luas daripada sRGB, sehingga warna yang sangat cerah tidak dapat dipindahkan ke HEX apa adanya. Saat warna seperti itu dikeluarkan sebagai HEX, RGB, atau HSL, alat ini mengikuti metode pemetaan gamut W3C CSS Color 4. Di OKLCH, kecerahan dan sudut rona dibiarkan, hanya kroma yang diturunkan dengan pencarian biner, dan proses berhenti ketika selisih dengan warna yang dipotong ke nilai batas sRGB (deltaEOK) lebih kecil dari 0.02, yaitu selisih yang nyaris tidak terlihat oleh mata. Cara ini menggeser sudut rona lebih sedikit daripada sekadar memotong setiap kanal ke 0~255.

Warna di luar sRGB diberi tanda "Luar sRGB" di kartu warna, dan contoh warnanya diisi warna asli di bagian atas dan warna yang disesuaikan di bagian bawah. Di layar yang mendukung gamut lebar, bagian atas terlihat lebih cerah. Saat diubah ke OKLCH, warna tidak disesuaikan dan nilai aslinya ditulis apa adanya. Karena itu, agar warna gamut lebar tidak hilang, cara yang aman adalah memakai hasil OKLCH dan menyimpan HEX sebagai nilai cadangan untuk layar sRGB.

Alfa dipindahkan ke HEX 8 digit dan rgba()

Dua digit terakhir pada HEX 8 digit dan satu digit terakhir pada HEX 4 digit adalah alfa (opasitas). Nilai 00 berarti sepenuhnya transparan dan FF berarti buram penuh. Alat ini menyesuaikan alfa ke tingkat 0~255, lalu memilih angka yang ditulis di rgba(), hsla(), dan oklch() sesuai ketentuan CSS Color 4. Jika ada bilangan bulat 0~100 yang menghasilkan tingkat itu saat dikalikan 2,55 dan dibulatkan, bilangan itu dibagi 100 lalu ditulis, dan jika tidak ada, angkanya ditulis sampai desimal ketiga. Karena itu, 80 (tingkat 128) ditulis sebagai 0.5, bukan 0.50196….

Kesalahan yang sering terjadi

• Mengisi depan HEX 3 digit dengan 0: #f80 bukan #000F80, melainkan #FF8800 karena tiap digit ditulis dua kali. #f808 yang 4 digit juga menjadi #FF880088 dengan cara yang sama.
• Memotong HSL menjadi bilangan bulat: Seperti terlihat di atas, hsl(204, 70%, 53%) bukan #3498DB, melainkan #3398DB. Jika nilai HSL bilangan bulat dari alat lain disalin apa adanya, HEX-nya bisa berbeda satu atau dua tingkat.
• Nilai rgb() di luar rentang: CSS tidak menganggap rgb(300, 0, 0) sebagai nilai yang salah, melainkan memotongnya ke 255 dan menggambarnya sebagai rgb(255, 0, 0). Alat ini mengubahnya dengan cara yang sama dan menampilkan "Terpotong" di kartu warna. Tiga angka yang ditulis dengan koma (256, 0, 0) bukan sintaks CSS sehingga tidak dipotong dan diperlakukan sebagai kesalahan.
• Angka tanpa "#": Empat atau delapan digit yang hanya berupa angka, seperti 2024, tidak dibaca sebagai warna. Untuk memakai HEX 4 digit, tambahkan #, misalnya #2024. Karena HEX tanpa "#" hanya dibaca dalam daftar, angka seperti 640 di dalam teks JSON tidak diubah menjadi warna.
• Nama warna di dalam kata: red dan blue di dalam .red-button atau /* blue */ tidak diubah. Nama warna hanya diubah jika berupa satu baris penuh atau kata di posisi nilai.
• Menempel hasil tanpa baris yang salah: Hasil "Nilai per baris" tidak memuat baris yang tidak terbaca, sehingga jumlah barisnya berbeda dari tabel asli. Jika baris harus sejajar, lihat nomor baris di status lalu perbaiki dahulu, atau pakai "Teks asli".

Batasan dan hal yang perlu diperhatikan

• Sekali proses dapat mengubah hingga 100.000 karakter dan 1.000 warna. Untuk berkas yang lebih besar, masukkan secara terpisah. "Buka file" hanya membaca file teks UTF-8.
• var(--brand) dan color-mix() bergantung pada nilai lain, sehingga dibiarkan. Warna yang ditulis langsung di dalam color-mix(), seperti #fff, diubah satu per satu, sedangkan warna relatif seperti rgb(from …) dan fungsi warna yang memuat var() atau calc() ditandai sebagai nilai yang tidak terbaca. Kata kunci seperti currentColor dan inherit juga dibiarkan.
• color() hanya membaca ruang warna srgb, srgb-linear, display-p3, dan xyz (xyz-d65 dan xyz-d50). a98-rgb, prophoto-rgb, dan rec2020 ditandai sebagai kesalahan.
• Nilai HEX, RGB, dan HSL adalah warna yang dibulatkan ke sRGB 8 bit (0~255). Walaupun HEX-nya sama, tampilannya dapat berbeda tergantung pengaturan warna dan kecerahan layar.
• HEX untuk warna di luar sRGB yang telah disesuaikan adalah nilai yang dihitung dengan metode CSS Color 4. Nilainya bisa berbeda satu atau dua tingkat dari cara peramban menggambar warna itu di layar gamut lebar atau cara alat lain memotongnya.
• CMYK untuk cetak dan profil ICC tidak didukung. Untuk warna yang akan dicetak, gunakan konverter RGB ke CMYK, dan untuk melihat satu warna secara rinci, gunakan konverter HEX ke RGB.
• Hasil HEX selalu ditulis dengan huruf kapital. Sel contoh warna di file Excel diwarnai tanpa alfa, dan alfanya ditulis di kolom catatan. CSV menaruh apostrof (') sebelum sel yang diawali =, +, - atau @ agar tidak dijalankan sebagai rumus, sehingga nama seperti --brand ditulis sebagai '--brand. Gunakan file Excel untuk mempertahankan nama persis seperti aslinya.
• Ekspor CSV memakai titik koma (;) sebagai pemisah, sehingga aplikasi spreadsheet yang memakai koma sebagai pemisah desimal membukanya dalam kolom yang benar.

Nilai dalam tabel artikel ini dihitung dengan alat ini pada 20 Oktober 2026. Rumus konversi dan pemetaan gamut mengikuti W3C CSS Color 4 Candidate Recommendation Draft (versi 9 Oktober 2026) dan tidak berubah dari tahun ke tahun. Nilai warna Tailwind diperiksa di dokumentasi Tailwind CSS pada hari yang sama, sehingga bisa berbeda jika Tailwind mengubah paletnya.

Sumber

• 01W3C — CSS Color Module Level 4§5.1 nilai rgb() di luar rentang dipotong ke nilai batas, §5.2 HEX 3, 4, 6, dan 8 digit, §6.1 148 nama warna, §9.4 acuan persen pada oklch(), §14.2.2 pemetaan gamut (JND 0.02), §16.1.1 serialisasi alfa
• 02MDN — <hex-color>Empat penulisan #RGB, #RGBA, #RRGGBB, dan #RRGGBBAA; nilai satu digit diulang dua kali
• 03MDN — oklch()Cara menulis kecerahan, kroma, sudut rona, dan alfa, serta sintaks warna relatif
• 04Tailwind CSS — Tailwind CSS v4.0Palet warna P3 baru untuk layar gamut lebar
• 05Tailwind CSS — ColorsWarna bawaan didefinisikan sebagai variabel tema oklch(), misalnya red-500 oklch(63.7% 0.237 25.331)
• 06Björn Ottosson — A perceptual color space for image processingTujuan perancangan ruang warna Oklab dan rumus konversinya

Pertanyaan yang sering diajukan

Alat yang bisa dipakai bersama