Apakah yang Membezakan Halaman Ini?
Halaman ini direka khusus untuk mengekstrak kod warna heksadesimal (hex) daripada imej. Berbanding dengan laman sesama yang memfokuskan kepada notasi RGB berfungsi atau HSL, halaman ini memberikan output utama dalam bentuk heksadesimal enam digit (atau tiga digit ringkas) — format piawai dalam CSS dan alat reka bentuk. Tiada saluran alfa dalam kod hex enam digit; sebarang ketelusan dilaporkan secara berasingan sebagai peratusan, misalnya "Alpha 45% — this pixel is partly transparent." Kerana hex adalah format yang padat dan bersedia-web, halaman ini menjadi pilihan utama apabila anda memerlukan nilai warna yang boleh terus digunakan dalam sifat CSS seperti color atau background-color tanpa kurungan atau sintaks tambahan. Inilah perbezaan asas yang menjadikan halaman ini unik dalam keluarga alat pengekstrak warna.
Cara Kerja Alat Pengekstrak Warna Heksadesimal
Apabila anda memuat naik imej dari peranti, alat ini segera memaparkan nilai warna dan koordinat piksel tengah imej. Anda kemudian boleh menggerakkan tetikus di atas imej untuk mengecap warna piksel demi piksel. Suatu paparan kaca pembesar membantu anda memilih piksel yang tepat, terutamanya di kawasan yang terkompress atau teranti-aliasing. Klik pada imej untuk menyimpan warna yang sedang dikesan ke dalam sejarah. Anda juga boleh menggunakan papan kekunci: anak panah menggerakkan palang silang piksel demi piksel, manakala Shift + anak panah menggerakkannya sebanyak 10 piksel. Tekan Enter atau Space untuk menyimpan warna yang dipilih. Cara ini memudahkan capaian tepat tanpa tetikus, sesuai untuk pengguna yang memerlukan aksesibiliti atau ketepatan piksel.
Input dan Output yang Tepat
Format Imej yang Disokong
Alat ini menerima satu fail imej dalam format berikut:
| Format | Jenis MIME |
|---|---|
| PNG | image/png |
| JPG | image/jpeg |
| WebP | image/webp |
| GIF | image/gif |
| AVIF | image/avif |
| HEIC | image/heic, image/heif |
Jika fail yang tidak disokong digugurkan, mesej ralat akan dipaparkan: "That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image." Sekiranya imej tidak dapat dibuka (mungkin rosak atau format tidak dikenali), anda akan melihat: "That image could not be opened. It may be corrupted or in an unsupported format."
Penskalaan Imej
Imej dengan sisi terpanjang melebihi 4096 piksel akan diskalakan turun agar sesuai. Ini memastikan prestasi pemprosesan yang lancar tanpa mengorbankan ketepatan warna pada tahap yang boleh diterima.
Output yang Dipaparkan
Selepas imej dimuatkan, alat menunjukkan:
- "Image ready — move over it to sample, click to save a color."
- Dimensi imej (lebar × tinggi)
- Koordinat piksel (x, y) bagi piksel yang sedang disampel
- HEX: kod warna heksadesimal (contoh:
#1E90FF) - RGB: nilai Merah, Hijau, Biru
- HSL: nilai Hue, Saturation, Lightness
- Jika piksel separa lutsinar: "Alpha ‹n›% — this pixel is partly transparent."
- Apabila anda klik: "Saved ‹hex› to your picks."
- Sejarah warna yang disimpan (maksimum 12 item) – mengklik pada swatch akan memuatkan semula warna tersebut.
Semua nilai warna (HEX, RGB, HSL) boleh disalin ke papan klip hanya dengan mengklik padanya. Jika penyemak imbas menyekat akses papan klip, mesej "Could not copy — your browser blocked clipboard access." akan dipaparkan.
Kes Tepi dan Peraturan Penting
Ketelusan dan Pengendalian Alfa
Kod hex enam digit tidak menyertakan saluran alfa. Oleh itu, sebarang ketelusan dilaporkan secara berasingan. Alat ini membaca nilai piksel tepat seperti yang disimpan dalam imej. Jika piksel separa lutsinar, maklumat ketelusan dipaparkan sebagai peratusan, misalnya "Alpha 30% — this pixel is partly transparent." Penting: alat ini tidak mempertimbangkan apa yang mungkin berada di belakang piksel; ia hanya membaca nilai piksel itu sendiri.
Kesan Mampatan dan Anti-aliasing
Jika imej adalah JPEG atau tangkapan skrin, mampatan dan anti-aliasing mungkin telah mengubah nilai piksel asal. Oleh itu, piksel di kawasan yang kelihatan rata boleh berbeza sedikit antara satu sama lain. Ini menjadikan pemilihan piksel yang tepat amat kritikal. Alat ini menggunakan pembesar untuk membantu anda memilih piksel yang dimaksudkan, bukan hanya piksel yang kelihatan hampir seragam.
Sejarah Warna yang Terhad
Sejarah boleh menyimpan sehingga 12 warna. Warna dengan nilai RGB yang sama tetapi nilai alfa berbeza disimpan sebagai entri berasingan. Apabila anda mencapai had 12, entri paling lama mungkin akan diganti (bergantung kepada pelaksanaan antara muka, tetapi had adalah tepat 12 item). Ini memastikan senarai tidak menjadi terlalu panjang dan anda boleh merujuk semula warna yang baru disimpan.
Butang "Start Over"
Butang "Start over" membersihkan imej, mengosongkan sejarah warna, dan menetapkan semula alat kepada keadaan awal. Ini berguna apabila anda ingin memulakan projek baru tanpa perlu memuat semula halaman.
Sekatan Papan Klip
Mengklik mana-mana nilai warna akan menyalinnya ke papan klip. Walau bagaimanapun, sesetengah penyemak imbas mungkin menyekat akses papan klip atas sebab keselamatan. Alat ini mengesan sekatan tersebut dan memaparkan mesej ralat yang jelas.
Siapa yang Memerlukan Alat Ini?
- Pereka UI yang perlu mengekstrak warna piksel tepat daripada imej rujukan untuk reka bentuk antara muka. Kod hex adalah format standard dalam Figma, Sketch, Adobe XD, dan alat reka bentuk lain.
- Pembangun web yang memerlukan nilai hex tepat untuk CSS (misalnya
#1E90FF) untuk memadankan mockup atau elemen jenama. - Pencipta kandungan yang mengambil sampel warna daripada imej untuk jenama, lakaran kecil, atau grafik media sosial.
- Sesiapa sahaja yang perlu menyalin kod warna heksadesimal daripada imej – misalnya, untuk memadankan warna dalam logo, foto, atau tangkapan skrin.
Alat ini amat berguna apabila anda bekerja dengan palet warna yang telah ditetapkan atau apabila anda perlu memastikan konsistensi warna merentas platform. Oleh kerana hex adalah format yang bebas peranti dan deterministik, ia memudahkan replikasi warna yang tepat.
Soalan Lazim
1. Apakah yang berlaku jika imej saya terlalu besar? Imej dengan sisi terpanjang melebihi 4096 piksel akan diskalakan turun secara automatik supaya muat dalam alat. Ini tidak menjejaskan ketepatan warna secara ketara, tetapi piksel yang sangat kecil mungkin hilang. Anda digalakkan menggunakan imej dengan resolusi munasabah untuk hasil terbaik.
2. Bolehkah saya menyalin nilai warna terus ke papan klip? Ya. Klik pada mana-mana nilai HEX, RGB, atau HSL yang dipaparkan dan ia akan disalin ke papan klip. Jika penyemak imbas anda menyekat akses papan klip, anda akan melihat mesej "Could not copy — your browser blocked clipboard access."
3. Mengapakah warna yang saya pilih berbeza daripada apa yang saya lihat dalam imej asal? Ini boleh berlaku kerana mampatan (terutamanya dalam JPEG) atau anti-aliasing. Piksel bersebelahan mungkin mempunyai nilai yang berbeza walaupun kelihatan seragam. Gunakan kaca pembesar untuk memastikan anda memilih piksel yang tepat.
4. Adakah alat ini menyokong imej dengan latar belakang lutsinar? Ya. Alat membaca piksel tepat, termasuk saluran alfa. Kod hex yang dipaparkan tidak mengandungi alfa, tetapi anda akan melihat peratusan ketelusan (misalnya "Alpha 50%") jika piksel separa lutsinar.
5. Berapa banyak warna yang boleh saya simpan dalam sejarah? Sejarah boleh menyimpan sehingga 12 warna. Warna dengan nilai RGB sama tetapi alfa berbeza dianggap entri berasingan. Apabila had dicapai, entri tertua mungkin akan diganti.
6. Bolehkah saya menggunakan papan kekunci untuk memilih warna? Ya. Anak panah menggerakkan palang silang satu piksel pada satu masa. Shift + anak panah menggerakkannya sepuluh piksel. Tekan Enter atau Space untuk menyimpan warna yang dipilih. Ini memudahkan capaian yang tepat tanpa tetikus.