CodeKitHubApakah alat ini?
Pemilih warna menukar pilihan visual — warna biru ini, piksel tepat itu dalam logo — kepada kod berangka yang difahami perisian. Warna yang sama mempunyai beberapa notasi setara: HEX (#3b82f6) mendominasi CSS dan penyerahan reka bentuk, RGB (59, 130, 246) sepadan dengan cara skrin dan kod mewakili warna, dan HSL (217°, 91%, 60%) menerangkan hue, saturation dan lightness dengan cara yang boleh ditaakul oleh manusia.
Separuh kedua alat ini ialah eyedropper imej. Muat naik tangkapan skrin, logo atau foto dan klik mana-mana titik untuk mengambil sampel warna di bawah kursor — cara standard untuk menjawab "apakah warna sebenar ini?". Di mana pelayar menyokong EyeDropper API, kanta pembesar native digunakan; dalam pelayar lain, alat ini membaca nilai piksel daripada salinan canvas imej. Dalam kedua-dua kes, pemprosesan berlaku secara tempatan: imej tidak pernah dimuat naik.
Kenapa guna alat ini?
- Tiga format serentak: setiap warna yang dipilih ditunjukkan sebagai HEX, RGB dan HSL secara serentak, masing-masing dengan butang salin sekali klik — tiada langkah penukaran berasingan.
- Pilih daripada imej: muat naik mana-mana gambar dan klik untuk mengambil sampel warna piksel tepat — sesuai untuk mengekstrak warna jenama daripada logo atau menyepadankan warna yang dilihat dalam tangkapan skrin.
- Menggunakan EyeDropper native pelayar dengan kanta pembesar apabila tersedia, dan kembali kepada pembacaan piksel canvas yang tepat di tempat lain.
- Swatch pratonton langsung menunjukkan warna semasa sekilas pandang, supaya anda boleh sahkan pilihan sebelum menyalin.
- Percuma, segera dan sepenuhnya tempatan: warna dikira dan imej dibaca dalam pelayar anda — tiada apa dimuat naik, disimpan atau dilog.
Cara menggunakannya
- Pilih warna dengan medan warna, atau tampal/edit nilai secara terus.
- Untuk mengambil sampel daripada gambar, muat naik imej dan klik titik yang warnanya anda mahu.
- Baca nilai HEX, RGB dan HSL, ditunjukkan bersama swatch pratonton langsung.
- Klik butang salin di sebelah format yang anda perlukan — HEX untuk CSS, RGB atau HSL untuk kod.
Contoh
Input
Mengklik kawasan biru pada logo yang dimuat naikHasil
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Ketiga-tiga baris menerangkan warna yang sama persis. Gunakan HEX dalam helaian gaya dan alat reka bentuk, RGB apabila kod mengharapkan nilai saluran, dan HSL apabila anda mahu menghasilkan varian lebih cerah atau lebih gelap dengan hanya menukar nombor terakhir.
Format warna mana untuk tugas mana
CSS moden menerima ketiga-tiganya di mana-mana warna dibenarkan, jadi pilihannya tentang aliran kerja, bukan keserasian. Pasukan biasanya menyeragamkan pada HEX dalam token reka bentuk, kemudian menggunakan HSL semasa meneroka variasi — ubah lightness sebanyak 10–15 mata untuk mendapatkan keadaan hover yang boleh digunakan tanpa mengubah hue.
| Format | Contoh | Terbaik untuk |
|---|---|---|
| HEX | #3b82f6 | CSS, alat reka bentuk, berkongsi warna dalam sembang dan spesifikasi |
| RGB | rgb(59, 130, 246) | Kod yang memanipulasi saluran, lukisan canvas, ketelusan rgba() |
| HSL | hsl(217, 91%, 60%) | Membuat varian lebih cerah/lebih gelap/hover, membina palet |
Dari warna yang dipilih kepada CSS siap
Mengambil sampel warna biasanya langkah pertama tugas penggayaan. Jika anda memerlukan warna yang sama dalam notasi lain — CMYK untuk cetakan atau nilai OKLCH untuk CSS gamut lebar — Color Converter meneruskan dari mana pemilih ini berhenti.
Warna yang dipilih selalunya terus digunakan dalam kesan visual: Box Shadow Generator menerima nilai HEX untuk bayang realistik, dan kad bulat yang dibina dengan Border Radius Generator melengkapkan rupa itu.
→ Penukar Warna · Penjana CSS Box-Shadow · Penjana CSS Border-Radius
Soalan lazim
Apakah perbezaan antara HEX, RGB dan HSL?
Ia adalah tiga notasi untuk model warna yang sama. HEX memampatkan saluran merah, hijau dan biru ke dalam enam digit heksadesimal (#3b82f6) dan merupakan bentuk paling biasa dalam CSS dan alat reka bentuk. RGB menyenaraikan tiga saluran yang sama sebagai nombor perpuluhan dari 0 hingga 255. HSL menyatakan semula warna sebagai hue (0–360°), saturation dan lightness — jauh lebih intuitif apabila anda mahu "warna yang sama, cuma lebih cerah". Menukar antara mereka tidak pernah mengubah warna itu sendiri.
Bagaimana pemilihan warna daripada imej berfungsi?
Imej yang dimuat naik dilukis ke atas canvas tidak kelihatan dalam pelayar anda. Apabila anda klik, alat ini membaca nilai merah, hijau dan biru piksel pada kedudukan tepat itu dan menukarnya kepada HEX, RGB dan HSL. Dalam pelayar yang menyokong EyeDropper API (Chrome dan Edge pada desktop), kanta pembesar native dibuka sebaliknya supaya anda boleh pilih dengan ketepatan piksel di mana-mana pada skrin.
Adakah imej saya dimuat naik ke mana-mana?
Tidak. Imej dibuka terus oleh pelayar anda dan dibaca secara tempatan daripada canvas; tiada fail dan tiada data warna dihantar atau disimpan. Anda boleh muatkan halaman, pergi luar talian, dan kedua-dua pemilih dan eyedropper imej terus berfungsi — menjadikannya selamat untuk reka bentuk yang belum dikeluarkan dan tangkapan skrin dalaman.
Kenapa warna yang dipilih tidak sepadan tepat dengan apa yang saya lihat pada skrin?
Dua sebab biasa. Anti-aliasing: piksel pada tepi teks dan bentuk dicampur dengan latar belakang, jadi mengklik satu piksel tersasar memberikan warna pertengahan — ambil sampel daripada bahagian tengah pejal kawasan itu sebaliknya. Pengurusan warna: fail JPG/PNG dengan profil warna luar biasa boleh dipaparkan sedikit berbeza merentasi paparan; alat ini melaporkan nilai piksel seperti yang disimpan dalam fail, iaitu nilai yang anda perlukan untuk kerja reka bentuk.
Format mana yang patut saya salin untuk CSS?
HEX adalah pilihan lalai paling selamat — setiap pelayar dan alat menerimanya. Gunakan HSL apabila anda merancang untuk membuat varian hover atau mod gelap, kerana melaraskan hanya komponen lightness mengekalkan hue dan saturation konsisten. RGB terutamanya berguna apabila kod membina warna daripada saluran berangka, atau apabila menambah ketelusan, di mana rgba(59, 130, 246, 0.5) lebih jelas dibaca berbanding HEX lapan-digit.