Konverter Warna

Konversi warna antara HEX, RGB, HSL, HSV, CMYK, dan LAB — cukup edit satu kolom dan kolom lainnya akan langsung menyesuaikan.

Setiap konversi berjalan langsung di browser Anda. Tidak ada data yang Anda masukkan yang diunggah ke BroBroGo.

Tanya Jawab

Format warna apa saja yang dapat saya konversi?

HEX, RGB, HSL, HSV, CMYK, dan LAB. Masukkan nilai pada salah satu format, dan kelima format lainnya akan langsung diperbarui secara bersamaan, sehingga Anda bisa mengonversi dari dan ke format apa pun.

Apakah output CMYK ini siap untuk pencetakan profesional?

Anggap nilai tersebut sebagai estimasi terdekat di layar. Hasil cetak CMYK yang sebenarnya bergantung pada jenis kertas, tinta, dan profil printer, sehingga percetakan mungkin menghasilkan nilai yang sedikit berbeda dari hasil di sini.

Mengapa warna LAB atau CMYK sedikit berubah saat dikonversi kembali?

LAB dan CMYK dapat mendeskripsikan warna yang tidak dapat ditampilkan oleh layar monitor. Ketika suatu nilai berada di luar rentang RGB yang terlihat, nilai tersebut akan ditarik ke warna terdekat yang dapat ditampilkan, sehingga konversi kembali bisa sedikit bergeser.

Ditulis dan ditinjau oleh tim editorial BroBroGo.Terakhir diperbarui:

Cara Kerja dan Penggunaan Konverter Warna

Alat ini berfungsi untuk mengonversi nilai warna secara instan di antara berbagai format standar, yaitu HEX, RGB, HSL, HSV, CMYK, dan LAB. Anda dapat mengetikkan nilai warna ke dalam salah satu kolom input yang tersedia, dan sistem akan langsung memperbarui seluruh format warna lainnya agar sesuai dengan nilai tersebut. Selain mengetikkan nilai secara manual, Anda juga dapat memilih warna secara visual menggunakan fitur pemilih warna atau swatch yang tersedia.

Proses konversi ini sangat berguna bagi desainer, pengembang front-end, serta siapa saja yang perlu memindahkan nilai warna dari satu ruang warna ke ruang warna lainnya dalam pekerjaan desain grafis maupun pengembangan web.

Memahami Berbagai Model Warna Digital

Setiap model warna memiliki pendekatan matematis dan kegunaan yang berbeda dalam merepresentasikan warna pada layar maupun media cetak:

  • HEX: Representasi heksadesimal dari warna RGB. Format ini sangat umum digunakan dalam pengembangan web (HTML dan CSS). Contoh penulisannya adalah #4f46e5 atau format pendek #abc.
  • RGB (Red, Green, Blue): Model warna aditif yang mencampurkan cahaya merah, hijau, dan biru dengan intensitas tertentu untuk menghasilkan warna di layar digital. Nilainya terdiri dari tiga angka dengan rentang 0 hingga 255, misalnya 79, 70, 229.
  • HSL (Hue, Saturation, Lightness): Representasi silindris dari RGB yang mendefinisikan warna berdasarkan corak (hue 0–360), kejenuhan (saturation dalam persentase), dan kecerahan (lightness dalam persentase). Contoh formatnya adalah 243, 75%, 59%.
  • HSV (Hue, Saturation, Value): Mirip dengan HSL, namun menggunakan parameter nilai (value atau kecerahan emisi cahaya) sebagai dimensi ketiga. Dituliskan dengan format corak (0–360) dan dua persentase, seperti 243, 69%, 90%.
  • CMYK (Cyan, Magenta, Yellow, Key/Black): Model warna subtraktif yang digunakan dalam industri percetakan fisik. Warna dihasilkan dengan menyerap cahaya pada media putih menggunakan tinta. Format inputnya terdiri dari empat persentase dengan rentang 0 hingga 100, misalnya 66%, 69%, 0%, 10%.
  • LAB: Model warna berbasis persepsi manusia yang didefinisikan oleh Komisi Internasional tentang Penerangan (CIE). Parameter L mewakili tingkat kecerahan (0–100), sedangkan a mewakili sumbu hijau-merah, dan b mewakili sumbu biru-kuning. Contoh nilainya adalah 40.73, 50.63, -79.08.

Aturan Konversi dan Batasan Gamut Warna

Sistem konversi bekerja secara dua arah dan real-time. Mengubah satu kolom input akan langsung memicu pembaruan pada lima kolom lainnya. Namun, terdapat beberapa aturan teknis dan batasan fisik yang memengaruhi hasil konversi antar-ruang warna:

Batasan Gamut dan Penyesuaian Nilai

Ruang warna LAB dan CMYK memiliki cakupan warna (gamut) yang berbeda dengan ruang warna RGB yang biasa ditampilkan oleh layar monitor. Jika Anda memasukkan nilai warna LAB atau CMYK yang berada di luar jangkauan RGB yang dapat ditampilkan, alat ini secara otomatis akan menyesuaikan nilai tersebut ke warna terdekat yang masih masuk dalam jangkauan tampilan layar. Akibat dari penyesuaian ini, apabila Anda mengonversi kembali warna tersebut ke format asalnya, akan terjadi sedikit pergeseran nilai dari angka yang pertama kali Anda masukkan.

Estimasi Warna Cetak (CMYK)

Output warna CMYK yang ditampilkan pada layar monitor merupakan estimasi visual saja. Karena monitor menggunakan pancaran cahaya aditif (RGB) sedangkan mesin cetak menggunakan tinta subtraktif (CMYK), hasil cetak fisik yang sebenarnya dapat berbeda. Perbedaan ini dipengaruhi oleh variasi jenis kertas, karakteristik tinta, serta profil warna yang digunakan oleh mesin printer profesional.

Validasi Input dan Pesan Kesalahan

Untuk memastikan konversi berjalan dengan akurat, setiap kolom input memiliki aturan penulisan yang ketat. Jika format yang Anda masukkan tidak sesuai, sistem akan menampilkan pesan kesalahan berikut:

  • HEX: "Masukkan kode warna hex seperti #4f46e5 atau #abc."
  • RGB: "Masukkan RGB sebagai tiga angka 0–255, seperti 79, 70, 229."
  • HSL: "Masukkan HSL sebagai hue 0–360 dengan dua persentase, seperti 243, 75%, 59%."
  • HSV: "Masukkan HSV sebagai hue 0–360 dengan dua persentase, seperti 243, 69%, 90%."
  • CMYK: "Masukkan CMYK dalam empat persentase 0–100, seperti 66%, 69%, 0%, 10%."
  • LAB: "Masukkan LAB sebagai L 0–100 dengan nilai a dan b, seperti 40.73, 50.63, -79.08."

Keamanan Data dan Pemrosesan Lokal

Seluruh proses konversi warna dilakukan secara lokal di dalam browser perangkat Anda. Tidak ada data input, nilai warna, atau aktivitas pencarian yang diunggah ke server luar. Pemrosesan langsung di sisi klien ini memastikan bahwa pekerjaan desain Anda tetap berada di perangkat Anda sendiri tanpa transmisi data eksternal.

Pertanyaan yang Sering Diajukan (FAQ)

Format warna apa saja yang dapat saya konversi? HEX, RGB, HSL, HSV, CMYK, dan LAB. Masukkan nilai pada salah satu format, dan kelima format lainnya akan langsung diperbarui secara bersamaan, sehingga Anda bisa mengonversi dari dan ke format apa pun.

Apakah output CMYK ini siap untuk pencetakan profesional? Anggap nilai tersebut sebagai estimasi terdekat di layar. Hasil cetak CMYK yang sebenarnya bergantung pada jenis kertas, tinta, dan profil printer, sehingga percetakan mungkin menghasilkan nilai yang sedikit berbeda dari hasil di sini.

Mengapa warna LAB atau CMYK sedikit berubah saat dikonversi kembali? LAB dan CMYK dapat mendeskripsikan warna yang tidak dapat ditampilkan oleh layar monitor. Ketika suatu nilai berada di luar rentang RGB yang terlihat, nilai tersebut akan ditarik ke warna terdekat yang dapat ditampilkan, sehingga konversi kembali bisa sedikit bergeser.

Pemilih Warna GambarPilih piksel mana saja dari gambar dan baca nilai HEX, RGB, dan HSL-nya, lengkap dengan kaca pembesar untuk pengambilan sampel yang presisi.Pemeriksa KontrasMasukkan warna teks dan latar belakang untuk melihat rasio kontras WCAG serta tingkat kelulusan AA dan AAA.Konverter Biner/HeksadesimalKonversi angka antara biner, heksadesimal, desimal, dan oktal — atau ubah teks menjadi byte.Konverter Format GambarKonversi gambar JPG, PNG, WebP, HEIC, dan AVIF langsung di browser Anda.Kompresor GambarPerkecil ukuran file JPEG, PNG, dan WebP langsung di browser Anda, tanpa mengubah ukuran piksel.Kalkulator Rasio AspekUbah lebar × tinggi apa pun menjadi rasio yang rapi seperti 16:9, atau pilih rasio dan lengkapi sisi yang hilang — untuk video, foto, dan layar.Generator FaviconUbah satu file PNG, JPG, atau SVG menjadi favicon.ico dan semua ukuran ikon yang dibutuhkan situs Anda, dikemas dalam format ZIP.Box Shadow GeneratorGeser slider untuk membentuk box-shadow, tumpuk beberapa lapisan untuk efek kedalaman, dan salin kode CSS instan.Gradient GeneratorBuat gradien linear, radial, atau conic, tambahkan color stops dan tentukan arahnya, lalu salin kode CSS dalam sekali klik.Border Radius GeneratorBulatkan setiap sudut dengan slider, buat bentuk blob organik dengan mode elips, dan salin CSS secara instan.Flexbox GeneratorAtur kontainer flex dan item di dalamnya dengan kontrol visual, lihat perubahan tata letak secara langsung, dan salin kode CSS dalam sekali klik.CSS Beautifier & MinifierRapikan kembali CSS yang berantakan agar mudah dibaca, atau minify untuk memperkecil ukurannya — lengkap dengan mode aman yang tidak akan mengubah urutan aturan Anda.Konverter px ke rem & emKonversi antara px, rem, dan em menggunakan ukuran font root dan konteks Anda sendiri — cukup edit satu kolom dan dua kolom lainnya otomatis diperbarui.