Apakah Penukar Warna?
Penukar Warna adalah alat yang tidak ternilai untuk pembangun web, pereka grafik dan sesiapa yang bekerja dengan warna digital. Ia menyediakan penukaran segera dan tepat antara tiga format warna yang paling meluas digunakan: HEX (heksadesimal), RGB (merah-hijau-biru) dan HSL (ona-saturasi-kecerahan). Notasi HEX, ditulis sebagai # diikuti enam digit heksadesimal seperti #FF5733, adalah format standard untuk CSS dan reka web. Format RGB, diekspresikan sebagai rgb(255, 87, 51), mentakrifkan warna dengan menentukan intensiti kanal cahaya merah, hijau, dan biru. Format HSL, ditulis sebagai hsl(11, 100%, 60%), menerangkan warna dalam istilah ona (sudut roda warna 0-360 darjah), saturasi (seberapa jelas warna), dan kecerahan (seberapa terang atau gelap warna). Penukar ini juga termasuk pratinjau warna langsung, semakan kontras WCAG, dan sejarah penukaran.
Bila Menggunakan Kalkulator Ini
- Semasa menukar spesifikasi warna pereka.
- Semasa membina sistem reka bentuk.
- Semasa mencipta palet warna menggunakan HSL.
- Semasa menyemak kontras warna untuk pematuhan WCAG.
- Semasa menukar nilai warna lama.
- Semasa nyahpepijat masalah warna CSS.
Langkah:
- Masukkan nilai warna dalam mana-mana format.
- Pilih format input menggunakan tab.
- Lihat nilai yang ditukar.
- Salin hasilnya.
- Semak lencana kontras WCAG.
Rumus
HEX → RGB: asingkan #RRGGBB kepada nilai perpuluhan
RGB → HSL: normalkan RGB → cari hue/saturation/lightness
HSL → RGB: tukar melalui formula kroma
HEX: #RRGGBB (0-255 setiap satu)
RGB: rgb(R, G, B) (0-255)
HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)
Kes Penggunaan
- Menukar nilai warna CSS
- Mencipta skema warna dari warna asas
- Memadankan warna sistem reka bentuk
- Memahami hubungan warna melalui HSL
Faedah Utama
- Tukar warna serta-merta antara format HEX, RGB dan HSL
- Lihat pratonton warna langsung
- Semak nisbah kontras WCAG dengan lencana AA dan AAA automatik
- Akses sejarah penukaran
- Salin mana-mana format dengan satu klik
- Bekerja sepenuhnya dalam pelayar tanpa penghantaran data
Tips Pro
- Gunakan HSL apabila anda mahu membuat variasi warna.
- Sentiasa gunakan HEX untuk CSS dan HTML.
- Sahkan pilihan warna anda terhadap keperluan kontras WCAG.
- Takrifkan palet asas anda dalam HSL.
- Nilai HEX tidak sensitif huruf besar-kecil.
Kesilapan Biasa
- Lupa awalan # semasa memasukkan warna HEX.
- Menggunakan nilai RGB melebihi 255 atau di bawah 0.
- Mengelirukan julat ona HSL (0-360) dengan RGB (0-255).
- Menganggap kecerahan HSL dan kecerahan RGB setara.
Istilah Utama
- HEX: Notasi warna heksadesimal yang digunakan dalam CSS dan reka web.
- RGB: Model warna merah-hijau-biru.
- HSL: Model warna ona-saturasi-kecerahan.
- Ruang warna: Model matematik untuk menganjurkan dan mewakili warna.
- Nisbah kontras WCAG: Ukuran numerik perbezaan luminans.
Konsep Berkaitan
- Penukar Unit CSS: Tukar antara px, rem, em, vw, dan unit CSS lain
- Pengekod/Penyahkod Base64: Enkod dan nyahkod rentetan Base64
- Pemformat JSON: Format dan sahkan data JSON
- Penguji Regex: Uji ungkapan nalar terhadap teks sampel
- Pengekod/Penyahkod URL: Enkod dan nyahkod rentetan URL-safe
Contoh
Input: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Input: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
Mentafsir Hasil
Penukar menunjukkan warna anda dalam ketiga-tiga format secara serentak. HEX adalah format yang paling biasa. RGB memberikan anda kawalan langsung terhadap saluran warna individu. HSL adalah format yang paling intuitif untuk pemahaman manusia.