Konverter Kode Warna Semua Format

Selamat datang di Konverter Kode Warna Semua Format, alat online gratis yang mengonversi nilai warna apa pun ke dalam setiap format umum sekaligus. Tempelkan kode HEX, triplet RGB, definisi HSL atau HSV, kuartet CMYK, atau bahkan nama warna CSS — dan langsung baca nilai yang setara, lihat pratinjau swatch langsung, periksa kontras aksesibilitas WCAG, dan jelajahi palet desainer yang dihasilkan dari komplementer, triadik, analog, tint, dan shade.

Mengapa menggunakan konverter warna serbaguna?

Sebagian besar konverter warna online hanya menangani satu arah (HEX ke RGB, atau RGB ke CMYK), memaksa Anda untuk menggunakan beberapa alat saat membutuhkan gambaran lengkap. Konverter ini menerima setiap format umum dalam satu kolom, mendeteksi secara otomatis format yang Anda ketik, dan mengembalikan kelimanya sekaligus dengan pratinjau langsung — menghemat beberapa langkah saat Anda menjembatani antara web, seluler, cetak, dan alat desain.

Format input yang didukung

Apa perbedaan antara model warna HSL dan HSV?

Baik HSL maupun HSV mendeskripsikan warna melalui tiga saluran intuitif — Hue, Saturation, dan nilai ketiga yang terkait dengan kecerahan — tetapi keduanya berbeda pada saluran ketiga tersebut.

• HSL — Hue, Saturation, Lightness: kecerahan berkisar dari 0% (hitam murni) melalui 50% (versi hue paling hidup) hingga 100% (putih murni). HSL lebih disukai di CSS karena membuat pencerahan atau penggelapan warna menjadi simetris dan dapat diprediksi.
• HSV / HSB — Hue, Saturation, Value (Brightness): nilai berkisar dari 0% (hitam murni) hingga 100% (versi hue yang paling penuh dan paling jenuh). HSV adalah model di balik pemilih warna di Photoshop, Figma, dan sebagian besar alat desain desktop.

Sebagai contoh, merah yang jenuh penuh adalah hsl(0, 100%, 50%) dalam HSL tetapi hsv(0, 100%, 100%) dalam HSV. Warna yang sama dalam dua model mental yang berbeda — keduanya berguna, tergantung pada apakah Anda berpikir sebagai penulis CSS atau sebagai pelukis.

Mengapa nilai CMYK saya terlihat sedikit berbeda dari perangkat lunak cetak?

RGB adalah model aditif yang digunakan oleh layar, sementara CMYK adalah model subtraktif yang digunakan oleh printer. Konversi matematis yang dilakukan alat ini adalah perkiraan cepat yang tidak menyertakan profil warna ICC, batas cakupan tinta, atau penyesuaian khusus kertas. Untuk pekerjaan cetak produksi, selalu andalkan profil CMYK yang dikelola warna pada perangkat lunak desain Anda (seperti US Web Coated SWOP v2 atau Coated FOGRA39). Gunakan konverter ini sebagai referensi cepat saat Anda hanya membutuhkan kuartet CMYK yang \"cukup dekat\" untuk percakapan desain tahap awal.

Bagaimana cara kerja pemeriksaan kontras WCAG?

Pedoman Aksesibilitas Konten Web (WCAG) menetapkan rasio kontras antara dua warna berdasarkan luminansi relatifnya — model kecerahan perseptual yang memberi bobot lebih besar pada hijau daripada merah, dan merah lebih besar daripada biru. Rasio berkisar dari 1:1 (tidak ada kontras sama sekali) hingga 21:1 (hitam murni di atas putih murni).

• AAA — rasio ≥ 7:1, memenuhi tingkat aksesibilitas paling ketat untuk teks bodi
• AA — rasio ≥ 4.5:1, minimum untuk teks bodi di sebagian besar peraturan
• AA Large — rasio ≥ 3:1, cukup untuk teks besar (18pt+ atau 14pt tebal) dan elemen UI grafis
• Fail — rasio < 3:1, jangan gunakan kombinasi ini untuk teks

Alat ini menghitung kontras terhadap putih murni dan hitam murni, lalu menyoroti pilihan yang lebih baik sebagai warna teks default Anda saat hue ini digunakan sebagai latar belakang.

Apakah konverter ini menghasilkan palet warna?

Ya. Setelah setiap konversi, alat ini membangun palet desainer dari hue yang sama, termasuk:

• Komplementer — warna yang tepat berseberangan pada roda warna (rotasi hue 180°), berguna untuk aksen kontras tinggi
• Triadik — dua warna yang berjarak sama 120°, seimbang dan cerah
• Analog — hue tetangga pada ±30°, berguna untuk gradien dan latar belakang yang harmonis
• Tint — tiga variasi yang lebih terang (hue sama, lightness lebih tinggi)
• Shade — tiga variasi yang lebih gelap (hue sama, lightness lebih rendah)

Klik swatch palet mana saja untuk langsung memuatnya ke dalam konverter sebagai titik awal baru — sempurna untuk iterasi cepat pada warna merek, set ikon, atau tema UI.

Cara menggunakan alat ini

1. Masukkan atau pilih warna — ketik nilai apa pun (HEX, RGB, HSL, HSV, CMYK, atau nama warna CSS) ke dalam kolom input, atau klik swatch warna kecil untuk membuka pemilih warna asli browser Anda.
2. Konversi — klik tombol Konversi. Alat ini secara otomatis mendeteksi format yang Anda berikan dan menghitung setiap format lainnya.
3. Salin yang Anda butuhkan — klik tombol salin sekali ketuk di samping nilai format. Tombol tersebut secara singkat menunjukkan tanda centang untuk mengonfirmasi nilai ada di clipboard Anda.
4. Periksa aksesibilitas — tinjau rasio kontras WCAG terhadap putih murni dan hitam murni untuk mengonfirmasi apakah warna tersebut dapat dibaca sebagai teks atau latar belakang.
5. Jelajahi palet — klik swatch mana pun di bagian palet desainer untuk mengonversinya, memperluas eksplorasi desain Anda tanpa meninggalkan halaman.

Kasus penggunaan praktis

Untuk pengembang web

• Konversi HEX dari desain Figma menjadi hsl() untuk digunakan dengan properti khusus CSS dan sistem tema modern
• Hasilkan nilai rgba() untuk hamparan transparan langsung dari warna HEX merek
• Verifikasi bahwa warna merek memenuhi WCAG AA pada latar belakang putih sebelum dirilis

Untuk desainer grafis

• Terjemahkan warna CSS dari situs web ke dalam perkiraan CMYK untuk mockup cetak
• Bangun skala tonal (tint dan shade) dari satu hue awal
• Temukan aksen komplementer atau triadik tanpa meninggalkan browser

Untuk desainer UI & produk

• Beralih antara HSV (pemilih Figma) dan HSL (CSS) saat mendokumentasikan token desain
• Identifikasi warna teks terbaik (hitam vs putih) secara otomatis untuk latar belakang apa pun
• Tandai atau bagikan warna yang dikonversi dengan cepat melalui URL halaman hasil

Tips untuk hasil terbaik

• Gunakan pemisah secara fleksibel — parser menerima koma, spasi, atau garis miring di dalam tanda kurung, jadi rgb(79 70 229) berfungsi sama baiknya dengan rgb(79, 70, 229).
• Gunakan persentase jika sesuai — rgb(31%, 27%, 90%) valid; alat ini mengonversi persentase menjadi 0–255 secara internal.
• Coba nama warna CSS — lebih dari 140 nama berfungsi, termasuk tambahan modern seperti rebeccapurple.
• Baca batang saluran — perincian visual saluran merah/hijau/biru dan CMYK memudahkan untuk melihat tinta mana yang mendominasi versi cetak dari warna tersebut.
• Anggap CMYK hanya sebagai panduan — buka hasilnya di perangkat lunak cetak yang dikelola warna untuk nilai akhir yang akurat.

Pertanyaan yang sering diajukan

Apakah saya perlu menyertakan simbol # saat memasukkan nilai HEX?

Tidak. Baik #4f46e5 maupun 4f46e5 diterima. Simbol # di depan bersifat opsional.

Apakah nilai HEX 4-digit dan 8-digit (dengan alfa) didukung?

Parser akan menerimanya, tetapi saluran alfa dibuang selama konversi karena RGB, HSL, HSV, dan CMYK dalam bentuk klasiknya tidak membawa alfa. Alat ini berfokus pada bagian warna saja.

Dapatkah saya membagikan atau menandai warna yang telah dikonversi?

Ya. Formulir dikirim melalui GET, sehingga URL berisi warna yang Anda konversi. Salin URL halaman setelah konversi untuk membagikan atau menandai halaman hasil yang tepat.

Mengapa beberapa nilai HEX ditampilkan dalam huruf besar?

Output menormalkan HEX ke huruf besar (misal #4F46E5) yang merupakan konvensi yang digunakan dalam banyak panduan desain dan gaya merek. Anda dapat menempelkannya kembali dalam huruf kecil jika mau — keduanya setara.

Apakah ini berfungsi di perangkat seluler?

Ya. Antarmuka sepenuhnya responsif dan formulir, palet, serta kartu kontras akan berubah menjadi tata letak satu kolom pada layar yang lebih kecil untuk pengalaman sentuh yang nyaman.

Sumber daya tambahan

• HSL dan HSV - Wikipedia
• Model warna CMYK - Wikipedia
• Persyaratan Kontras (Minimum) WCAG 2.1