Konverter Format Warna
Konversi warna antara HEX, RGB, HSL, HSV, CMYK, dan named CSS colors. Swatch langsung + cek rasio kontras WCAG. Color picker. Salin format apa pun. 100% offline.
Tentang tools ini
Taman bermain warna yang lengkap. Pilih warna dengan color picker native, geser slider RGB, atau tempel string HEX/RGB/HSL/HSV/CMYK ke salah satu input format — kelima format lain update secara real time. Swatch besar menampilkan warna saat ini dan berfungsi ganda sebagai target picker. Bagian kontras menunjukkan seberapa mudah dibaca warna ketika dipakai sebagai teks di putih, di hitam, di warna itu sendiri, dan di surface tema saat ini — dengan rasio kontras aktual (formula WCAG 2.1) dan badge AAA/AA/AALarge/FAIL pada yang lebih baik dari putih vs hitam. Grid named-CSS memunculkan 12 nama warna paling umum (merah, oranye, kuning, hijau, cyan, biru, ungu, pink, hitam, putih, abu-abu, coklat) untuk pemilihan satu ketukan, dan field input di bawah swatch menunjukkan named CSS color terdekat kalau ada. Semua konversi adalah JS murni, tanpa library eksternal. Berfungsi sepenuhnya offline.
Detail
- Kategori
- developer
- Versi
- 1.0.0
- Ukuran
- 17 KB
- Diperbarui
- Jun 2026
Pertanyaan Umum
Apa beda HSL, HSV, dan HSL/H?
HSL (Hue, Saturation, Lightness) dan HSV (Hue, Saturation, Value) keduanya pakai model warna silinder tapi berbeda di axis ketiga. L=50% HSL adalah hue murni pada saturasi penuh; V=100% HSV adalah hue murni. HSL adalah yang dipakai CSS (hsl() dan hsla()), dan itulah yang dipikirkan kebanyakan desainer. HSV adalah yang ditampilkan kebanyakan color picker dan software editing gambar. HSL adalah standar untuk kode; HSV adalah standar untuk picking visual. Tool menampilkan keduanya supaya kamu bisa salin mana pun yang toolchain kamu mau.
Apa itu CMYK dan kapan saya memakainya?
CMYK (Cyan, Magenta, Yellow, Key/hitam) adalah model warna subtraktif yang dipakai di percetakan. RGB adalah aditif (cahaya) dan itulah yang dipancarkan layar; CMYK adalah subtraktif (tinta) dan itulah yang diserap kertas. Konversi dari RGB ke CMYK adalah pendekatan — warna cetak aktual tergantung profil printer, kertas, dan tinta. Angka yang ditampilkan adalah formula standar; untuk pekerjaan cetak produksi, pakai tool yang sadar profil seperti Adobe Illustrator. Pakai field CMYK tool ini ketika kamu butuh spec cetak pendekatan.
Apa itu rasio kontras WCAG dan kenapa penting?
WCAG 2.1 mendefinisikan formula rasio kontras (L1 + 0.05) / (L2 + 0.05) di mana L adalah luminance relatif. Threshold-nya adalah 4.5:1 untuk teks body AA, 3:1 untuk teks AA Large (≥18pt atau bold 14pt+), dan 7:1 untuk AAA. Tool menampilkan rasio vs putih dan vs hitam, dan satu badge untuk yang terbaik dari keduanya. Bidik AA minimal untuk teks body; AAA lebih disukai untuk interface yang kritis terhadap aksesibilitas. Badge adalah ringkasan yang lebih mudah di-scan; angka rasio adalah untuk pelaporan persis.
Kenapa beberapa nama warna tidak ada di daftar named?
Grid memunculkan 12 keluarga warna paling berguna untuk picking cepat. Set 147 warna named CSS lengkap tersedia dengan menempel nama ke field input mana pun — "rebeccapurple", "papayawhip", "dodgerblue" semuanya bekerja. Input inline di bawah swatch juga menampilkan kecocokan named terdekat kalau ada; pencocokan adalah persis pada hex 6-digit, jadi "#FF0000" → red, "#000080" → navy, "#FFD700" → gold.
Apakah data saya privat?
Ya. Semua matematika warna berjalan di browser. Tabel named-color dan formula kontras adalah JS murni yang di-inline di HTML. Tidak ada panggilan jaringan dan tidak ada CDN. Picker adalah input type=color native browser. Kamu bisa bereksperimen dengan warna brand atau cek aksesibilitas untuk pekerjaan klien yang sensitif tanpa apa pun meninggalkan device kamu.
