CodeKitHubApakah alat ini?
Warna di web ditulis dalam beberapa format yang setara, semuanya ditakrifkan oleh CSS Color spec on MDN. HEX (#4f46e5) ialah bentuk padat yang digunakan di mana-mana dalam CSS dan penyerahan reka bentuk. RGB (rgb(79, 70, 229)) menyatakan komponen merah, hijau dan biru secara terus, yang selalu diperlukan oleh kod. HSL (hsl(243, 75%, 59%)) menerangkan hue, saturation dan lightness — format paling intuitif untuk melaraskan warna, seperti menjadikannya lebih gelap atau kurang tepu.
Ketiga-tiganya menerangkan warna yang sama; alat ini menukar antara mereka dengan tepat dan menunjukkan pratonton supaya anda boleh mengesahkan ia warna yang anda maksudkan.
Kenapa guna alat ini?
- Menerima mana-mana format sebagai input — HEX (3 atau 6 digit), RGB atau HSL — dan memberikan semua format sebagai output.
- Swatch pratonton langsung supaya anda melihat warna, bukan sekadar nombor.
- Pemilih warna visual apabila anda lebih suka memilih dengan mata.
- Salin sekali klik untuk setiap format, sedia untuk CSS atau kod.
- Percuma, segera, tiada muat naik.
Cara menggunakannya
- Taip atau tampal warna: #4f46e5, rgb(79, 70, 229) atau hsl(243, 75%, 59%) semuanya berfungsi.
- Atau klik pemilih warna dan pilih secara visual.
- Baca ketiga-tiga format dalam hasil dan semak swatch pratonton.
- Klik "Copy" di sebelah format yang anda perlukan.
Contoh
Input
#4f46e5Hasil
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Tiga notasi, satu warna yang sama persis.
Format mana yang patut anda guna?
Ketiga-tiganya menerangkan warna yang sama persis — pilihannya tentang mana satu paling mudah digunakan untuk tugas berkenaan, bukan tentang ketepatan.
| Format | Terbaik untuk | Kenapa |
|---|---|---|
| HEX (#4f46e5) | CSS, penyerahan reka bentuk, salin-tampal pantas | Paling ringkas untuk ditaip dan ditampal; format sejagat dalam alat reka bentuk seperti Figma. |
| RGB (rgb(79,70,229)) | Kod yang memanipulasi saluran secara terus, kerja canvas/imej | Sepadan dengan cara API grafik dan data piksel imej sebenarnya menyimpan warna. |
| HSL (hsl(243,75%,59%)) | Melaraskan warna — lebih cerah, lebih gelap, lebih/kurang tepu | Lightness dan saturation adalah nombor berasingan yang boleh anda laraskan terus, berbeza dengan HEX/RGB di mana setiap saluran berubah. |
Kegunaan biasa
- Memilih warna secara visual dalam alat reka bentuk, kemudian menukarnya kepada nilai HEX atau RGB tepat yang diperlukan dalam CSS atau kod.
- Menjana set warna berkaitan (varian lebih cerah/lebih gelap) dengan menukar kepada HSL, melaraskan lightness, dan menukar semula.
- Menyepadankan warna jenama merentasi alat berbeza yang masing-masing mengharapkan format berbeza — fail logo dalam RGB, panduan gaya dalam HEX, pemboleh ubah CSS yang memerlukan HSL untuk penggayaan tema.
- Mengesahkan warna yang diambil daripada tangkapan skrin atau fail reka bentuk (selalunya diberikan sebagai RGB) sepadan dengan nilai HEX dalam helaian gaya.
Soalan lazim
Bilakah saya patut guna HSL berbanding HEX atau RGB?
Apabila anda mahu menaakul tentang warna. Menjadikan warna 10% lebih gelap dalam HSL bermaksud menurunkan lightness sebanyak 10 mata; dalam HEX atau RGB anda perlu mengira semula semua saluran. Sistem reka bentuk selalunya mentakrifkan palet dalam HSL atas sebab inilah.
Adakah alat ini menyokong HEX 3-digit seperti #fff?
Ya. #fff adalah singkatan untuk #ffffff — setiap digit digandakan dua. Kedua-dua bentuk diterima dan output menunjukkan bentuk 6-digit penuh.
Bagaimana pula dengan alpha (ketelusan)?
Alat ini menukar warna legap (nilai RGB/HSL). Jika anda memerlukan ketelusan, tambahkan alpha sendiri: rgba(79, 70, 229, 0.5) atau #4f46e580 — bahagian warna kekal sama.
Kenapa nilai HSL saya berbeza sebanyak 1 berbanding alat lain?
Pembundaran. Penukaran HSL↔RGB menghasilkan nilai pecahan, dan alat berbeza membundarkan secara berbeza. Perbezaan ±1 dalam hue atau peratus tidak dapat dilihat dan adalah normal.
Adakah nama warna seperti 'red' disokong?
Tidak dalam Fasa 1 — alat ini memberi tumpuan kepada tiga format berangka yang paling kerap ditukar oleh pembangun. Masukkan nilai HEX/RGB/HSL warna, atau pilihnya secara visual dengan pemilih.
Bilakah saya patut guna HEX, RGB atau HSL?
Jika anda memerlukan ketelusan, gunakan HEX 8-digit (#RRGGBBAA) atau rgba() — HEX 6-digit tiada saluran alpha. Jika anda mahukan varian lebih cerah atau lebih gelap bagi warna yang sama, HSL paling mudah: kekalkan hue dan saturation tetap dan hanya ubah nombor lightness. Untuk salin-tampal biasa ke dalam CSS atau alat reka bentuk, HEX 6-digit kekal bentuk yang paling diterima secara universal.