Apa Iki Page?
Page iki minangka alat hex-color-from-image sing ngidini sampeyan njupuk werna persis saka gambar kanthi format hex. Beda karo page sadulur sing fokus ing RGB fungsional utawa HSL, kaca iki menehi hex minangka output utama. Ing CSS lan piranti desain web, hex (kayata #1E90FF) minangka standar kanggo color, background-color, lan property liyane. Ora mbutuhake kurung utawa sintaks tambahan – cukup salin banjur dempul.
Apa sing nggawe kaca iki unik? Hex ora duwe saluran alpha (transparency) ing wangun enem digit. Yen piksel gambar semi-transparan, kaca iki nglaporake alpha kanthi kapisah: "Alpha ‹n›% – piksel iki rada transparan." Dadi, sampeyan ora bakal bingung antarane hex murni lan nilai karo alpha. Kaca sadulur sing nangani RGBA nganggo fungsi kanggo nyathet alpha, nanging ing kene, transparency diwenehi minangka persentase tambahan.
Page iki uga dirancang kanggo presisi. Sampeyan kudu milih piksel siji-siji liwat kursor utawa keyboard (tombol panah kanggo mindhah crosshair, Shift+panah kanggo lompat 10 piksel, Enter utawa Space kanggo nyimpen). Ana magnifier (view sing luwih gedhe) kanggo mbantu sampeyan ndeleng piksel sing arep dipilih, utamané ing area sing anti-aliased utawa kompresi.
Cara Kerja: Input lan Output
Input: Sampeyan kudu milih siji file gambar kanthi format: PNG, JPG, WebP, GIF, AVIF, HEIC. MIME types sing ditampa: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Yen sampeyan nyoba nyopot file sing ora didhukung, bakal muncul pesen: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” Yen gambar ora bisa dibukak amarga rusak: “That image could not be opened. It may be corrupted or in an unsupported format.”
Yen gambar nduweni sisih paling dawa ngluwihi 4096 piksel, gambar bakal di-skalane kanthi otomatis. Iki kanggo njaga kinerja alat ing browser.
Output: Sawise gambar dimuat, warna koordinat tengen langsung ditampilake. Sampeyan banjur bisa mindhah pointer liwat gambar kanggo njupuk warna piksel kanthi real-time. Nalika sampeyan klik gambar, warna sing lagi disampel bakal disimpen. Output utama yaiku:
- HEX: Kode heksadesimal enem digit (contone
#1E90FF) – iki sing padha karo standar CSS. - RGB: Angka Red, Green, Blue (0–255).
- HSL: Hue, Saturation, Lightness (derajat, persentase).
- Alpha (yen transparan): Persentase opacity, contone "Alpha 50% – this pixel is partly transparent."
- Dimensions: Lebar × dhuwur gambar.
- Coordinates: (x, y) saka piksel sing lagi di-sampel.
Sampeyan uga bisa ngakses sejarah warna sing disimpen – nganti 12 item. Saben item disimpen minangka warna sing beda, sanajan RGB padha nanging alpha beda. Klik swatch kanggo mbukak warna kasebut maneh.
Format Warna: HEX, RGB, lan HSL
Nalika sampeyan duwe piksel, sampeyan bisa ndeleng nilai ing telung format sekaligus. Nanging hex minangka format utama kaca iki. Geneya? Amarga ing web, hex minangka cara paling kompak kanggo nyathet warna RGB tanpa alpha. Contone, #ff6347 padha karo rgb(255, 99, 71). Ora perlu kurung, koma, utawa aksara liyane.
HEX diwakili dening enem digit heksadesimal: loro digit pisanan kanggo Red, loro kanggo Green, loro kanggo Blue. Saben digit saka 0 nganti F (0–15). Dadi #FF = 255, #00 = 0. Rong digit saben saluran.
RGB minangka nilai integer saka 0 nganti 255 saben saluran. Iki gampang dimangerteni dening desainer grafik.
HSL ngusulake warna liwat hue (0°–360°), saturation (0%–100%), lan lightness (0%–100%). Iki migunani kanggo nggawe palet warna sing harmonis.
Yen piksel semi-transparan, hex ora bisa nyathet alpha. Mula, alat iki nampilake alpha minangka persentase sing kapisah. Penting: nilai hex sing ditampilake yaiku werna piksel dhewe, ora nyampur karo latar mburi. Dadi yen sampeyan kerep ngrakit overlay, piksel alpha = 50% bakal nuduhake werna sing luwih cerah, nanging nilai hex tetep murni kanggo konten gambar asli.
Edge Cases lan Aturan
Alat iki duwe sawetara aturan kanggo ngatasi kasus-kasus khusus:
-
Piksel semi-transparan: Kaya sing wis diterangake, alpha dilaporke minangka persentase. Yen piksel iku transparan (alpha = 0%), warna isih bakal diwenehi adhedhasar data saluran RGB, nanging alpha 0% bakal penting. Ing sampel, kita nyathet "Alpha 0% – this pixel is fully transparent." Nanging saka papan lumayan, sampeyan bisa uga ora bisa ndeleng apa-apa, nanging warna isih ana ing data gambar.
-
Sejarah warna: Nganti 12 warna bisa disimpen. Yen sampeyan nyimpen luwih saka 12, sing lawas bakal ilang? Ora, miturut faktasheet, otomatis mung 12 sing katon. Ora disebutake yen otomatis mbusak sing lawas, nanging kemungkinan iku sing paling sadurunge bakal ilang.
-
Kompresi lan anti-aliasing: Yen gambar JPEG utawa screenshot, nilai piksel bisa uga ora pas karo warna asli amarga kompresi bakal ngowahi. Alat iki mung nuduhake nilai sing ana ing file – ora dikoreksi.
-
Kopi nilai warna: Klik sembarang nilai HEX, RGB, utawa HSL bakal nyoba nyalin menyang clipboard. Yen browser ngalangi akses clipboard, bakal muncul pesen: “Could not copy — your browser blocked clipboard access.” Biasane amarga pengaturan privasi.
-
Ukuran gambar: Yen gambar duwe sisih paling dawa > 4096 piksel, bakal di-skalane mudhun. Iki ditindakake ing browser supaya ora keganggu kinerja.
-
Tombol "Start over": Ngilangi gambar, ngosongake sejarah warna, lan ngreset alat menyang kahanan awal.
Sapa Sing Mbutuhake Tools Iki?
Desainer kerep kudu njupuk warna tepat saka gambar referensi kanggo nggawe antarmuka panganggo (UI). Contone, yen sampeyan duwe mockup ing Photoshop utawa screenshot saka situs, sampeyan kudu nemtokake warna tombol #4A90D9. Alat iki ngidini sampeyan nyelidiki saben piksel.
Pengembang mbutuhake nilai hex sing persis kanggo CSS. Yen sampeyan nggawe situs lan arep niru warna sing ana ing logo utawa foto, mung seret gambar menyang browser, pilih piksel, salin hex, banjur dempul ing stylesheet. Ora perlu alat pihak katelu.
Content creators sing nggawe thumbnail, branding, utawa grafis media sosial bisa njupuk warna saka gambar dhasar kanggo nggawe palet sing konsisten.
Sapa wae sing butuh code warna saka gambar – kayata kanggo nyocokake karo warna merek – uga bisa nggunakake.
FAQ
1. Apa bedane alat iki karo alat color picker biasa?
Alat iki difokusake ing format hex minangka output utama. Bedane utama: hex ora ngandhut alpha, dadi transparency dilaporke kapisah. Sampeyan uga bisa nggunakake keyboard kanggo milih piksel kanthi presisi, lan ana magnifier.
2. Kenapa warna hex sing dipilih beda karo warna asli ing layar?
Amarga kompresi gambar (utamané JPEG) lan anti-aliasing bisa ngowahi nilai piksel. Alat iki maca nilai persis saka file, dudu apa sing katon ing layar amarga gaman moniter.
3. Cara nyimpen warna luwih saka 12?
Sejarah mung bisa nyimpen 12 warna. Yen sampeyan butuh luwih akeh, sampeyan kudu nyalin nilai hex kanthi manual utawa nyimpen ing cathetan liyane. Bisa uga sampeyan bisa nggunakake fitur "Start over" lan miwiti maneh.
4. Apa sing kedadeyan yen gambar semi-transparan?
Hex bakal nuduhake nilai RGB tanpa nyathet alpha. Alpha bakal ditampilake minangka persentase. Contone, piksel kanthi alpha 30% bakal diwenehi "Alpha 30% – this pixel is partly transparent."
5. Bisa nganggo keyboard kanggo mindhah crosshair?
Ya, sampeyan bisa nggunakake tombol panah kanggo mindhah crosshair siji piksel. Sambil menekan Shift, lompat 10 piksel. Tombol Enter utawa Space kanggo nyimpen warna.
6. Kenapa alat iki ora bisa mbukak gambar HEIC?
HEIC didhukung yen file kasebut duwe MIME type image/heic utawa image/heif. Nanging ora kabeh browser ndhukung decoding HEIC langsung. Yen ora bisa mbukak, coba konversi menyang PNG utawa JPEG.