Cara Mendapatkan Kod Warna Hex Daripada Imej (2026)

Anda ada imej dan anda perlukan satu nombor daripadanya: kod hex bagi warna tertentu. Mungkin ia logo yang spesifikasi jenamanya sudah lama hilang, tangkapan skrin tapak yang birunya anda mahu padankan, atau foto dengan warna yang anda mahu guna semula. Menaip apa yang anda fikir warna itu tidak berfungsi — mata anda tidak boleh membaca #3A7BD5 daripada skrin, dan warna yang kelihatan betul biasanya beberapa digit tersasar. Inilah cara membaca nilai sebenar terus daripada piksel.

Mengapa meneka tidak pernah betul

Satu "biru" pada skrin sebenarnya sebaran biru yang hampir serupa, dan kecerahan serta penentukuran monitor anda menyasarkannya lagi. Pilih dengan mata dan anda mendarat hampir tetapi salah — cukup hampir sehingga ketidaksepadanan menjengkelkan tetapi tidak jelas, jadi anda membakar sepuluh minit tertanya mengapa butang tidak sepadan dengan pengepala. Pembaikannya ialah berhenti meneka dan baca nombor yang piksel sebenarnya simpan.

Dapatkan kod dalam tiga langkah

Cara boleh dipercayai ialah mengsampel piksel terus dengan pemilih warna.

1. Muatkan imej. Letakkan logo, tangkapan skrin, atau foto yang anda tarik daripadanya.
2. Tuding ke piksel tepat. Loup pembesar mengikut kursor anda dan membesarkan kawasan di bawahnya, jadi pada tepi keras anda boleh melihat piksel mana warna jenama rata dan mana campuran anti-alias dua warna.
3. Klik untuk menyimpan, kemudian salin. Setiap klik mengekalkan warna sebagai swatch menunjukkan HEX, RGB dan HSLnya, setiap satu dengan butang salin sendiri. Klik HEX dan ia pada papan klip anda.

Mendarat pada piksel yang betul

Loup lebih penting daripada bunyinya. Di mana warna bertemu warna lain — huruf terhadap latar belakang, tepi ikon — piksel di antaranya adalah anti-alias: campuran licin dua warna, bukan mana-mana satu. Sampel di situ dan anda dapat nilai keruh yang sepadan tiada apa. Sasarkan kawasan rata beberapa piksel di dalam bentuk, di mana warna pejal, dan paparan zum membiarkan anda mengesahkan anda berada padanya sebelum anda klik.

Pada logo bersih atau UI rata ini mudah — warna seragam merentasi kawasan luas. Pada foto ia mengambil lebih berhati-hati, kerana bintik dan pemampatan bermakna piksel bersebelahan benar-benar berbeza. Pilih daripada kawasan tenang bercahaya sekata dan ambil beberapa sampel untuk menyemak ia bersetuju.

HEX, RGB atau HSL — ambil yang muat

Setiap swatch memberi anda ketiga-tiganya sekali gus, jadi anda salin mana pun yang destinasi anda mahu:

• HEX (#3A7BD5) — lalai web. CSS, Figma, Canva, dokumen jenama. Salin ini melainkan anda ada sebab untuk tidak.
• RGB (rgb(58, 123, 213)) — nilai saluran, berguna apabila alat memintanya atau anda perlukan ketelusan melalui rgba.
• HSL (hsl(215, 65%, 53%)) — rona, ketepuan, kecerahan. Terbaik apabila anda mahu melaraskan warna: cerahkannya untuk keadaan tuding, redamkannya untuk varian, atau bina skala daripadanya.

Kerana setiap swatch membawa ketiga-tiganya, anda tidak pernah sampel semula sekadar untuk menukar format.

Mengambil beberapa warna sekali gus

Logo jarang satu warna. Klik utama, aksen, dan warna teks dalam satu pusingan — setiap satu bertindan dalam senarai supaya anda boleh membandingkannya dan menyalinnya satu demi satu, dan bukan memuatkan imej tiga kali berasingan.

Jika anda mahu ringkasan warna keseluruhan imej dan bukan piksel tertentu — palet keseluruhan yang foto dibina daripadanya — itu kerja berbeza, dan alat palet berasingan img.diy mengekstrak warna dominan secara automatik untuk anda. Guna pemilih ini apabila anda tahu tempat tepat yang anda mahu; guna alat palet apabila anda mahu imej dicirikan untuk anda.

Ia kekal pada peranti anda

Imej dibaca secara setempat dalam pelayar anda daripada kanvas — tiada yang dimuat naik, tiada pendaftaran, dan selepas muatan pertama ia berfungsi luar talian. Jadi mokap belum dikeluarkan atau aset peribadi pelanggan tidak pernah meninggalkan mesin anda hanya kerana anda perlukan satu kod hex daripadanya.

Muatkan imej, tuding ke piksel, klik, dan salin kod.