Konverter Warna
Konversi antara format warna HEX, RGB, dan HSL dengan pengeditan dua arah — ubah nilai apa pun dan nilai lainnya akan diperbarui secara instan. Pemilih warna bawaan browser menyediakan seleksi visual, sementara input numerik yang presisi memungkinkan spesifikasi warna yang tepat. Salin format siap CSS langsung untuk pekerjaan pengembangan web dan desain.
Apa yang dilakukan alat ini?
Konverter Warna menyediakan konversi dua arah antara tiga format warna utama web. HEX (heksadesimal) menggunakan format #RRGGBB atau #RGB dengan nilai 00-FF per saluran. RGB (Merah, Hijau, Biru) menggunakan nilai desimal 0-255 per saluran, umumnya ditulis sebagai rgb(255, 0, 128). HSL (Hue, Saturation, Lightness) menggunakan hue dalam derajat (0-360) dan saturation/lightness sebagai persentase (0-100%), ditulis sebagai hsl(300, 50%, 50%). Swatch warna langsung menampilkan warna saat ini, dan tombol salin menyediakan format siap CSS untuk penggunaan segera di stylesheet.
Cara kerjanya
Nilai warna dikonversi menggunakan matematika ruang warna standar. HEX ke RGB: setiap pasangan digit heksadesimal dikonversi ke desimal 0-255. RGB ke HSL: nilai RGB dinormalisasi ke 0-1, max dan min menentukan lightness, saturation bergantung pada rentang lightness, dan hue dihitung dari komponen RGB terbesar menggunakan rumus trigonometri. HSL ke RGB membalikkan proses ini. Saat Anda mengedit bidang apa pun, warna diparsing, dikonversi ke ketiga representasi, dan ditampilkan. Input warna bawaan browser menyediakan pemilih warna terintegrasi OS pada platform yang didukung.
Fitur
- HEX ↔ RGB ↔ HSL — edit nilai apa pun, nilai lainnya diperbarui
- Integrasi pemilih warna bawaan browser
- Pratinjau swatch warna langsung
- Salin format CSS rgb(...) atau hsl(...) dengan satu klik
- Referensi Hex8 (dengan alpha) untuk alat desain
- Konversi real-time dua arah
- Memvalidasi rentang input untuk setiap format
Cara menggunakan
- 1
Pilih atau masukkan warna
Gunakan pemilih warna bawaan, tempel kode heksadesimal, atau masukkan nilai RGB/HSL langsung. Semua nilai warna valid diterima.
- 2
Haluskan dengan slider atau angka
Sesuaikan slider R/G/B untuk kontrol saluran warna yang presisi, atau ubah nilai H/S/L untuk menggeser hue atau menyesuaikan saturation dan kecerahan.
- 3
Salin format CSS
Klik Salin CSS pada format pilihan Anda — hex untuk ringkas, rgb untuk keterbacaan, atau hsl untuk penyesuaian intuitif.
- 4
Gunakan Hex8 untuk alat desain
Bidang Hex8 menampilkan format #RRGGBBAA dengan alpha. Salin ini untuk alat desain seperti Figma atau Photoshop yang mendukung heksadesimal dengan transparansi.
Kasus penggunaan umum
Pengembangan web
Konversi warna mockup desain ke nilai CSS, sesuaikan warna palet secara matematis melalui HSL, dan salin kode hex tepat untuk implementasi.
Desain grafis
Terjemahkan warna antara alat desain yang menggunakan format berbeda, dan verifikasi akurasi warna di representasi HEX, RGB, dan HSL.
Eksplorasi skema warna
Gunakan HSL untuk membuat variasi: sesuaikan hue untuk warna komplementer, saturation untuk kontrol intensitas, lightness untuk tint dan shade.
Pemeriksaan aksesibilitas
Konversi warna untuk memverifikasi rasio kontras dan pastikan desain memenuhi standar aksesibilitas WCAG untuk visibilitas warna.
Tips & praktik terbaik
- HSL lebih intuitif untuk penyesuaian warna daripada RGB — ubah hue tanpa mempengaruhi kecerahan, atau sesuaikan saturation tanpa mengubah warna dasar
- HEX paling ringkas untuk CSS (7 karakter vs 16+ untuk rgb/hsl), tetapi rgb() dan hsl() lebih mudah dibaca dan mendukung operasi CSS calc()
- Gunakan pemilih warna bawaan (klik input warna) untuk seleksi visual — terintegrasi dengan pemilih warna OS pada macOS dan Windows
- Untuk warna abu-abu, gunakan HSL dengan saturation 0% — nilai hue apa pun berfungsi, hanya L (lightness) yang mempengaruhi hasil