A hex kód kiemelése – miért ez a lap különbözik a többi színmintavételező lapunktól
Az azonos képből színeket gyűjtő rokon lapok (RGB, HSL) mindegyike a saját színmodelljére összpontosít. Ez a lap azért jött létre, mert a hexadecimális (hex) színkód a webes CSS-szabvány elsődleges jelölési formája – nincs szükség zárójelekre, függvényhívásokra vagy értelmező szintaxisra. Egy #1E90FF formátumú érték közvetlenül beilleszthető bármely color, background-color vagy border-color tulajdonságba, és a legtöbb tervezőszoftver (Figma, Photoshop, Sketch) is natívan támogatja.
A lap másik lényegi különbsége az alfa-csatorna kezelése. A hex jelölés hat számjeggyel (illetve három rövidített formában) az RGB-komponenseket kódolja, alfa-értéket nem tartalmaz. Ha a képpont részben átlátszó, a hex kód csak a színinformációt adja; az átlátszóság mértékét a lap külön, százalékos formában jeleníti meg: „Alpha ‹n›% – ez a pixel részben átlátszó.” Ez tisztább, mint egy 8-jegyű hex (RGBA) használata, amelyet a böngészők és tervezőeszközök eltérően értelmezhetnek.
A gyakorlatban ez azt jelenti, hogy ha egy dizájner egy olyan logóból vagy ikonból szeretne színt kivenni, ahol a pixel a háttérrel keveredik, a hex kód önmagában félrevezető lehet – a lap pontosan ezt a helyzetet kommunikálja az alfa-üzenettel.
Bemenetek és kimenetek – mit várhat a felhasználó
A lap a következő fájlformátumokat fogadja el: PNG, JPG, WebP, GIF, AVIF, HEIC. A támogatott MIME-típusok: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Egy nem támogatott fájl ejtésekor a következő hibajelzés jelenik meg: „Ez a fájltípus nem támogatott. Próbálkozz PNG, JPG, WebP, GIF, AVIF vagy HEIC formátummal.” Ha a fájl sérült vagy nyithatatlan: „A képet nem sikerült megnyitni. Lehet, hogy sérült vagy nem támogatott formátumú.”
A kép betöltése után a lap azonnal megjeleníti a kép méreteit (szélesség × magasság) és a középső képpont színértékeit – koordinátákkal együtt. A felhasználó ekkor látja a „Kép készen áll – mozogj rajta a mintavételhez, kattints a szín elmentéséhez.” üzenetet.
A kimeneti adatok négy csoportba rendeződnek:
| Mező | Leírás |
|---|---|
| HEX | Hatjegyű hexadecimális kód, pl. #1E90FF |
| RGB | Vörös, zöld, kék értékek 0–255 között |
| HSL | Színezet (0–360°), telítettség (0–100%), világosság (0–100%) |
| Alfa | Ha a pixel részben átlátszó: „Alpha ‹n›% – ez a pixel részben átlátszó.” |
Minden színérték (HEX, RGB, HSL) kattintható: egyetlen kattintással a vágólapra másolódik. Ha a böngésző blokkolja a vágólap-hozzáférést, a lap kiírja: „Nem sikerült másolni – a böngésződ blokkolta a vágólap elérését.”
Pontos színmintavétel – egér, billentyűzet és nagyító
A színmintavétel alapvetően egérrel történik: a kurzor mozgatásával a kép fölött a lap valós időben frissíti a színértékeket és a koordinátákat. A pontos pixel kijelöléséhez nagyított nézet segít, amely felnagyítja az aktuális pozíció környékét – elengedhetetlen egy 1 képpont vastag vonal vagy egy anti-aliasing érintette szél pontos beazonosításához.
Billentyűzetes navigáció is elérhető a kisegítő lehetőségek és a precíziós munka érdekében:
- A nyílbillentyűk mozgatják a célkeresztet egy képpontnyi léptékben.
- A Shift + nyílbillentyűk tíz képpontos ugrásokat tesznek lehetővé.
- Az Enter vagy szóköz billentyűvel elmenthető az aktuálisan éppen mintavételezett szín (megegyezik az egérkattintással).
A kattintás (vagy Enter/Space) hatására a lap hozzáadja a színt a mentett színek gyűjteményéhez, és megjeleníti az üzenetet: „‹hex› elmentve a kiválasztott színek közé.” A mentés csak akkor történik, ha a felhasználó explicit módon kattint – a színértékek böngészése közben nem tárol semmit automatikusan.
Az átlátszóság kezelése és a hex korlátai
A hexadecimális színkód hat számjegye (pl. #AABBCC) a vörös, zöld és kék csatorna 0–255 közötti értékét reprezentálja, minden csatornára két hexadecimális számjeggyel. Az alfa-csatorna (átlátszóság) nem része a szabványnak – a nyolcjegyű hex (#AABBCCDD) bár létezik (CSS Color Level 4), a gyakorlatban számos tervezőszoftver és régebbi böngésző nem támogatja megbízhatóan. Ezért a lap kizárólag a hatjegyű formátumot adja ki, és az alfa-értéket egy külön sorban közli százalékban.
Ha egy pixel alfa-értéke kisebb, mint 100%, a lap kiírja: „Alpha ‹n›% – ez a pixel részben átlátszó.” Ezt a pixel pontosan a fájlban tárolt értéke alapján olvassa be – nem veszi figyelembe a háttér színét. Ez fontos különbség: ha egy 50%-ban átlátszó piros pixel van egy fehér hátterű képen, a lap a #FF0000 hex kódot adja 50%-os alfával, nem pedig a vizuálisan tapasztalt halványabb rózsaszínt.
A mentett színek között azonos RGB-értékű, de eltérő alfa-értékű pixelek külön bejegyzésként szerepelnek – a lap megkülönbözteti őket, mert a hex kódjuk megegyezik, de az alfa-üzenet más. A gyűjtemény legfeljebb 12 elemet tárol; újabb szín mentésekor a legrégebbi eltűnik.
Képkorlátok és hibakezelés – amire érdemes figyelni
A lap teljes egészében a kliensoldalon (böngészőben) dolgozza fel a képet, így a fájl nem kerül feltöltésre szerverre. Ennek az az ára, hogy a memóriahasználatot korlátozni kell: ha a kép leghosszabb oldala meghaladja a 4096 képpontot, a képet arányosan kicsinyíti a lap. Ez azt jelenti, hogy egy 6000×4000 pixeles fotó mérete lecsökken, így a mintavételezett pixel nem feltétlenül egyezik meg az eredeti kép ugyanazon koordinátáin – a kicsinyítés során a szoftver átlagol vagy interpolál.
JPEG-fájlok és képernyőképek esetén a tömörítés és az anti-aliasing miatt a szomszédos pixelek értékei eltérhetnek. Egy látszólag egységes kék háttérben (pl. #1E90FF) a JPEG blokkos hibái vagy a képernyőkép élsimítása miatt előfordulhat, hogy a pixelek #1E90FE és #1E90FD értékeket mutatnak. A nagyító nézet itt segít pontosan kiválasztani azt a pixelt, amely a kívánt színt adja.
A „Kezdjük elölről” gomb törli a betöltött képet, kiüríti a színtörténetet, és visszaállítja a lapot a kezdeti állapotba.
Gyakori kérdések
Miért nem adja meg a lap a hex kódot alfával együtt?
Mert a hatjegyű hex (pl. #FF6600) nem tartalmaz alfa-csatornát. A nyolcjegyű hex (#FF6600CC) támogatása nem általános. A lap ezért külön sorban, százalékban közli az átlátszóságot.
Miért különböznek a szomszédos pixelek színértékei, ha a terület egységesnek tűnik?
JPEG-tömörítés, anti-aliasing és képernyőkép-mentés miatt. A színértékek enyhén eltolódhatnak. Használja a nagyítót a pontos pixel kiválasztásához.
Mi történik, ha a képem túl nagy?
A lap automatikusan arányosan kicsinyíti, ha a leghosszabb oldal meghaladja a 4096 képpontot. A kicsinyítés miatt a mintavételezett pixel színe eltérhet az eredetitől. Érdemes a képet előzetesen átméretezni.
Működik a lap mobilon, érintőképernyővel?
A színmintavétel elsősorban egérre és billentyűzetre lett tervezve. Érintéses eszközön a kattintás elmenti a színt, de a pontos pozicionálás a nagyító nélkül nehézkes lehet.
Hogyan másolhatok ki egy színt, ha nem HEX formátumban?
Kattintson a kívánt formátumra (HEX, RGB, HSL) a megjelenített értéken – az a vágólapra kerül. Ha a böngésző blokkolja, a lap figyelmeztetést ad.
Miért van két külön bejegyzés a mentett színeim között, ha ugyanaz a hex kód látszik?
Mert a pixelek alfa-értéke eltérő. A hex kód megegyezik, de a lap az alfa-eltérést külön bejegyzésként kezeli, mivel a szín vizuális megjelenése a háttértől függ.