Apa itu Konverter Warna?
Color Converter adalah alat yang tidak tergantikan untuk pengembang web, desainer grafis, dan siapa pun yang bekerja dengan warna digital. Alat ini menyediakan konversi instan dan akurat antara tiga format warna yang paling banyak digunakan: HEX (heksadesimal), RGB (merah-hijau-biru), dan HSL (hue-saturasi-kecerahan). Notasi HEX, ditulis sebagai # diikuti enam digit heksadesimal seperti #FF5733, adalah format standar untuk CSS dan desain web. Format RGB, diekspresikan sebagai rgb(255, 87, 51), mendefinisikan warna dengan menentukan intensitas kanal cahaya merah, hijau, dan biru. Format HSL, ditulis sebagai hsl(11, 100%, 60%), mendeskripsikan warna dalam hal hue, saturasi, dan kecerahan.
Kapan Menggunakan Kalkulator Ini
- Saat mengonversi spesifikasi warna desainer.
- Saat membangun sistem desain.
- Saat membuat palet warna menggunakan HSL.
- Saat memeriksa kontras warna untuk kepatuhan WCAG.
- Saat mengonversi nilai warna lama.
- Saat debug masalah warna CSS.
Langkah-langkah:
- Masukkan nilai warna dalam format apa pun.
- Pilih format input menggunakan tab.
- Lihat nilai yang dikonversi.
- Salin hasilnya.
- Periksa lencana kontras WCAG.
Rumus
HEX → RGB: pisahkan #RRGGBB menjadi nilai desimal
RGB → HSL: normalisasi RGB → temukan hue/saturation/lightness
HSL → RGB: konversi melalui rumus kroma
HEX: #RRGGBB (0-255 masing-masing)
RGB: rgb(R, G, B) (0-255)
HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)
Kasus Penggunaan
- Mengonversi nilai warna CSS
- Membuat skema warna dari warna dasar
- Mencocokkan warna sistem desain
- Memahami hubungan warna melalui HSL
Manfaat Utama
- Konversi warna instan antara format HEX, RGB, dan HSL
- Lihat pratinjau warna langsung
- Periksa rasio kontras WCAG dengan lencana AA dan AAA
- Akses riwayat konversi
- Salin format apa pun dengan satu klik
- Bekerja sepenuhnya di browser tanpa mengirim data
Tips Profesional
- Gunakan HSL saat Anda ingin membuat variasi warna.
- Selalu gunakan HEX untuk CSS dan HTML.
- Verifikasi pilihan warna Anda terhadap persyaratan kontras WCAG.
- Tentukan palet dasar Anda di HSL.
- Nilai HEX tidak peka huruf besar-kecil.
Kesalahan Umum yang Harus Dihindari
- Lupa awalan # saat memasukkan warna HEX.
- Menggunakan nilai RGB di atas 255 atau di bawah 0.
- Mencampuradukkan rentang hue HSL (0-360) dengan RGB (0-255).
- Menganggap kecerahan HSL dan kecerahan RGB setara.
Istilah Kunci Dijelaskan
- HEX: Notasi warna heksadesimal yang digunakan dalam CSS dan desain web.
- RGB: Model warna merah-hijau-biru.
- HSL: Model warna hue-saturasi-kecerahan.
- Ruang warna: Model matematika untuk mengorganisir dan mewakili warna.
- Rasio kontras WCAG: Ukuran numerik perbedaan luminans.
Konsep Terkait
- Konverter Unit CSS: Konversi antara px, rem, em, vw, dan unit CSS lainnya
- Pengodek/Dekode Base64: Encode dan decode string Base64
- Pembentuk JSON: Format dan validasi data JSON
- Penguji Regex: Uji ekspresi reguler terhadap teks sampel
- Pengodek/Dekode URL: Encode dan decode string URL-safe
Contoh
Masukan: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Masukan: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
Interpretasi Hasil Anda
Konverter menampilkan warna Anda dalam ketiga format secara bersamaan. HEX adalah format yang paling umum. RGB memberi Anda kontrol langsung atas kanal warna individu. HSL adalah format yang paling intuitif untuk pemahaman manusia.