Konverter Warna – HEX, RGB, HSL, CMYK & Lainnya

Konversi dan visualisasikan warna secara instan. Mendukung berbagai format dan opsi lanjutan untuk penggunaan profesional.

INPUT

Opsi Lanjutan

Aktifkan Mode Batch

Sertakan "#" di HEX

Tampilkan RGB sebagai persentase

Tampilkan Harmoni Warna

Tampilkan Pratinjau Gradien

Opasitas 100%

Konverter Warna Gratis kami membantu desainer, developer, marketer, dan pembuat konten mengonversi warna dengan cepat dan akurat. Baik Anda bekerja dengan HEX, RGB, HSL, atau CMYK, alat ini memberikan pratinjau visual instan dan konversi yang akurat. Berbagai format input didukung, termasuk mode batch untuk proyek besar, sehingga mudah bekerja dengan palet warna, desain web, materi cetak, dan grafis digital. Alat ini juga memastikan aksesibilitas dengan pemeriksaan kontras dan menghasilkan harmoni warna untuk panduan kreatif.

Dengan menggunakan Konverter Warna, Anda dapat menghemat waktu dan mengurangi kesalahan dalam perhitungan manual. Antarmuka yang ramah pengguna, pratinjau langsung, dan opsi lanjutan menjadikannya ideal untuk alur kerja profesional sekaligus tetap gratis dan berbasis browser.

Fitur Lanjutan untuk Profesional

Konversi batch untuk beberapa warna sekaligus
Pembuatan gradien dengan cuplikan kode CSS
Dukungan alpha/opasitas
Perhitungan rasio kontras untuk aksesibilitas
Saran harmoni warna

Mengapa Konversi Warna Itu Penting

Konversi warna yang akurat sangat penting dalam desain, branding, dan konten digital. Warna yang konsisten memastikan tampilan grafis yang profesional, rendering web yang benar, dan desain yang aksesibel. Alat ini menghilangkan tebakan dan perhitungan manual sekaligus memberikan wawasan tambahan untuk proyek kreatif dan pemasaran.

Pertanyaan yang Sering Diajukan

Konversi kode warna antara HEX, RGB, HSL, dan CMYK secara instan. Penting bagi developer frontend dan desainer.

Alat ini mendukung HEX, RGB, RGBA, HSL, HSLA, CMYK, dan nama warna standar CSS.

Ya, konversi batch memungkinkan Anda memasukkan beberapa warna yang dipisahkan dengan koma, spasi, atau baris baru.

Ya, Anda dapat menyertakan nilai alpha dengan format RGBA/HSLA dan bahkan mengekspor HEX dengan alpha (HEX 8-digit).

Masukkan dua warna atau lebih dan alat ini akan menampilkan pratinjau gradien beserta cuplikan kode CSS yang siap disalin.

Tidak. Semua pemrosesan terjadi secara lokal di browser Anda, dan tidak ada data yang disimpan atau dikirim.

Cara Menggunakan Konverter Warna

Masukkan nilai warna Anda
Ketik atau tempel nilai warna apa pun — HEX (#3b82f6), RGB (59, 130, 246), HSL (217, 91%, 60%), atau CMYK. Alat ini secara otomatis mendeteksi formatnya.
Lihat semua konversi secara instan
Semua format yang setara diperbarui secara real time: HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, dan custom property CSS. Salin nilai apa pun dengan satu klik.
Gunakan pemilih warna
Klik contoh warna atau gunakan pemilih warna bawaan browser untuk memilih warna secara visual dan mendapatkan semua padanan formatnya sekaligus.
Salin dan gunakan di proyek Anda
Klik tombol salin pada format mana pun untuk mengirimkannya ke clipboard. Tempel langsung ke CSS, Sass, konfigurasi Tailwind, Figma, atau alur kerja cetak.

Contoh Konversi

Warna biru yang sama diekspresikan dalam setiap format yang didukung:

Format	Nilai	Penggunaan
HEX	#3b82f6	CSS, HTML, Figma
RGB	rgb(59, 130, 246)	CSS, Canvas API
RGBA	rgba(59, 130, 246, 1)	CSS dengan opasitas
HSL	hsl(217, 91%, 60%)	CSS, design token
CMYK	C:76 M:47 Y:0 K:4	Cetak / offset
HSV	217°, 76%, 96%	Editor gambar

Kasus Penggunaan Umum

Desain Web & UI

Konversi warna HEX brand ke HSL untuk custom property CSS dan konfigurasi Tailwind, memastikan tema yang konsisten di mode terang dan gelap.

Cetak & Pra-cetak

Konversi warna RGB atau HEX di layar ke CMYK untuk produksi cetak — menghindari jebakan umum warna yang terlihat bagus di layar namun kusam saat dicetak.

Panduan Merek

Dokumentasikan palet merek lengkap dalam semua format — HEX untuk digital, CMYK untuk cetak, referensi Pantone — dari satu sumber kebenaran.

Pemeriksaan Aksesibilitas

Ambil nilai warna yang tepat untuk diuji dalam pemeriksa kontras, memastikan kombinasi teks dan latar belakang memenuhi persyaratan WCAG AA atau AAA.

Alur Kerja Developer

Terjemahkan warna dari alat desain (HEX Figma) dengan cepat ke variabel CSS HSL untuk pemberian tema dinamis dan manipulasi warna programatik.

Cara Kerjanya

Semua konversi berjalan secara instan di browser Anda tanpa keterlibatan server sama sekali.

Parsing Warna

Alat ini mengurai input Anda menjadi nilai RGB yang dinormalisasi (0–255 per kanal), lalu menerapkan rumus konversi standar ke setiap format target.

Konversi HEX ↔ HSL

HSL (Hue, Saturation, Lightness) diturunkan dari RGB dengan mencari kanal min/maks, menghitung lightness sebagai rata-ratanya, lalu menghitung saturasi dan sudut hue.

Aproksimasi CMYK

CMYK dihitung dari RGB melalui rumus: K = 1 - max(R,G,B); C = (1-R-K)/(1-K); dan seterusnya. Perlu diketahui bahwa RGB→CMYK bersifat tergantung perangkat — CMYK layar adalah aproksimasi, bukan profil cetak.

Untuk Siapa Alat Ini

Developer Frontend

Terjemahkan design token antar format CSS dan verifikasi nilai warna dengan cepat selama pengembangan.

Desainer UI/UX

Konversi swatch Figma atau Sketch ke format apa pun yang dibutuhkan oleh sistem desain atau framework CSS Anda.

Desainer Cetak

Konversi warna brand RGB ke CMYK sebelum mengirim materi ke percetakan, mencegah kejutan pergeseran warna.

Manajer Merek

Pertahankan satu palet merek dalam semua format — digital dan cetak — tanpa berpindah alat.

Penguji Aksesibilitas

Ekstrak nilai warna yang presisi untuk digunakan dalam pemeriksa kontras dan audit aksesibilitas.

Tips Bekerja dengan Warna

Gunakan HSL dalam custom property CSS (--color-primary: hsl(217, 91%, 60%)) sehingga Anda dapat menyesuaikan lightness dengan calc() untuk status hover dan disabled.
Selalu minta proof cetak saat menggunakan konversi CMYK dari RGB — pencocokan warna layar ke cetak memerlukan profil warna perangkat.
Gunakan pemilih warna browser untuk mengambil sampel warna langsung dari screenshot atau aset desain — tidak perlu menyalin nilai secara manual.
Setelah mengonversi, uji warna Anda dalam pemeriksa kontras untuk memastikan palet Anda memenuhi WCAG AA (4.5:1) untuk teks isi.
Simpan palet merek Anda dalam semua format (HEX, RGB, CMYK) di dokumentasi sistem desain Anda untuk menghilangkan konversi berulang.

Mengapa Konversi Warna yang Akurat Itu Penting

Nilai warna yang tidak konsisten antar tim desain dan pengembangan adalah salah satu penyebab utama inkonsistensi visual pada produk yang dirilis.
RGB dan CMYK menempati gamut yang berbeda — warna yang terlihat cerah di layar bisa tampak kusam saat dicetak tanpa konversi yang tepat.
CSS HSL membuat pemberian tema dinamis (mode terang/gelap, tint) jauh lebih mudah daripada HEX — tetapi memerlukan konversi HEX-ke-HSL yang akurat sebagai awal.
Audit kepatuhan merek memerlukan warna dalam berbagai format — satu konverter menghilangkan kesalahan manual dan menghemat berjam-jam bolak-balik.

Performa & Privasi

Setiap konversi warna berjalan sepenuhnya di browser Anda menggunakan JavaScript murni. Tidak ada nilai warna, palet, atau data penggunaan yang pernah dikirim ke server mana pun. Alat ini merespons dalam waktu kurang dari 10 ms per konversi, bekerja offline setelah kunjungan pertama, dan tidak memerlukan akun atau registrasi.

Catatan Edukasi: Penjelasan Ruang Warna

RGB (Aditif)

RGB mencampur cahaya merah, hijau, dan biru. Semua kanal pada 255 = putih; semua pada 0 = hitam. Digunakan oleh layar, kamera, dan browser web.

HEX (Singkatan Web)

HEX adalah RGB yang dikodekan dalam basis-16. #3b82f6 = R:59, G:130, B:246. Sama persis dengan RGB — hanya notasi yang lebih ringkas untuk CSS dan HTML.

HSL (Perseptual)

HSL memisahkan hue (sudut roda warna 0–360°), saturation (intensitas), dan lightness (kecerahan). Lebih mudah dipahami daripada RGB bagi desainer.

CMYK (Subtraktif)

CMYK mencampur tinta Cyan, Magenta, Yellow, dan Key (hitam). Warna ini mengurangi dari kertas putih. RGB layar memiliki gamut yang lebih luas — beberapa warna RGB cerah tidak dapat direproduksi dalam CMYK.

Pemecahan Masalah

Konversi layar-ke-CMYK bersifat aproksimasi secara matematis. Untuk cetak profesional, gunakan profil warna ICC yang terkalibrasi dalam program seperti Adobe Illustrator atau Photoshop.

Gunakan output RGBA sebagai gantinya. HEX 8-digit (#3b82f6cc) didukung oleh browser modern tetapi tidak semua alat — RGBA lebih aman dan lebih kompatibel secara luas.

Pemilih warna browser terbatas pada gamut sRGB. Warna gamut lebar (P3, Rec2020) akan dipetakan ke padanan sRGB terdekat.

Figma menggunakan HSB (juga disebut HSV), bukan HSL. Alat ini juga menampilkan HSV — periksa kolom tersebut untuk kecocokan langsung.

Tahukah Anda?

Notasi warna HEX diperkenalkan ke HTML pada tahun 1996 bersama spesifikasi HTML 3.2. Sebelum itu, browser hanya mengenali 16 warna bernama (seperti "red" dan "blue"). Palet warna web lengkap berkembang menjadi 140 warna bernama dengan CSS1, tetapi HEX tetap menjadi format dominan — dan masih begitu, lebih dari 25 tahun kemudian.

Satu-satunya Konverter Warna yang Anda Butuhkan

Baik Anda seorang developer yang menerjemahkan token Figma ke CSS, seorang desainer yang menjembatani layar dan cetak, atau seorang penguji aksesibilitas yang memverifikasi rasio kontras — alat gratis ini mengonversi antara semua format warna utama secara instan, tanpa panggilan server dan tanpa data yang disimpan. Masukkan warna Anda, salin format yang Anda butuhkan, dan kembali berkarya.