Képzelje el, hogy a képek között görget, és megtalálja a tökéletes színt – pontosan azt az árnyalatot, amelyre szüksége van a következő tervezési projekthez. Van néhány nagyszerű eszköz az interneten, amelyek segítenek azonosítani a színeket bármely alkalmazásban vagy webhelyen. Tekintsünk néhányat a legjobb lehetőségek közül.
1. A Fejlesztői eszközök használata a Chrome webböngészőben
Az egyik lehetőség, amelyet kipróbálhat, a Chrome Developer eszköz. A Chrome számos hasznos funkcióval rendelkezik a fejlesztők számára, így a feladatok sokkal könnyebben elvégezhetők. A következő lépésekkel azonosíthatja a színeket bármely alkalmazásban vagy webhelyen.
- Nyissa meg azt a webhelyet, amelyen színt szeretne azonosítani a Chrome böngészőben
- Kattintson a hárompontos ikonra a Chrome jobb felső sarkában. Megjelenik egy felugró ablak egy csomó opcióval.
- Kattintson a „További eszközök” elemre, majd a megjelenő felugró ablakban válassza a „Fejlesztői eszközök” lehetőséget.
- Használja a Ctrl + Shift + I billentyűket, ha ki szeretné hagyni a fenti lépéseket
- Most az ablak két képernyőre oszlik – balra a webhelyre, jobbra pedig a webhely kódjára
- Írja be a Ctrl + Shift + C billentyűkombinációt a billentyűzeten. Ez megmutatja a webhely egy adott elemének összes részletét, amikor az egérmutatót az elemekre visszük.
- Megtalálhatja az elem színkódját és egyéb hasznos információkat.
Példa
Tegyük fel, hogy a következő webhelyen található egyes elemek színkódjai érdekelnek:
A fejlesztői eszközöket a képernyő sarkában található három pontra kattintva választhatja ki. A legördülő menüben válassza a További eszközök, majd a Fejlesztői eszközök lehetőséget.
A képernyő vizuálisan két oldalra lesz osztva. Bal oldalon a webhely, jobb oldalon pedig a webhely kódja látható.
Írja be a parancsot és a gyorsbillentyűt: „Ctrl + Shift + C”, és vigye az egérmutatót a webhely elemei fölé. Ez megmutatja az adott elem színét, valamint egyéb hasznos információkat. Az alábbiakban két példa látható, ahol megtaláljuk a navigációs sáv és a keresőeszköz alatti irányítópult színét.
Itt megtaláljuk a színkódot a navigációs sáv előugró ablakában. A színkód: #333333.
A műszerfal színe más hasznos részletekkel együtt megtalálható. Szín: #333333, Háttérszín: #5D4A8E. Bár az elején kissé ijesztőnek tűnhet, a program használata sokkal könnyebbé válik egy kis gyakorlással.
2. Szemcseppentő króm hosszabbító
Az Eye Dropper egy népszerű és széles körben használt Chrome-bővítmény, amely segít bizonyos színek megtalálásában bármely webhelyen vagy alkalmazásban.
Kövesse az alábbi lépéseket, hogy az Eye Dropper bővítőeszköz segítségével azonosítson bizonyos színeket egy webhelyen vagy alkalmazásban.
- Nyissa meg bármelyik webhelyet vagy alkalmazást a Chrome webböngészőben
- Kattintson az Eye Dropper kiterjesztés ikonjára
- Válassza a „Szín kiválasztása weboldalról” lehetőséget, és vigye az egérmutatót az alkalmazás vagy a webhely különböző elemeire.
A felsorolt elemek színkódját a weboldal jobb alsó sarkában találja.
Példa
Oké, használjuk a szemcseppentő hosszabbító eszközt egy valós példában. Kezdjük azzal, hogy megnyitunk egy webhelyet, és megnyomjuk az Eye Dropper kiterjesztés ikonját
Ha a kurzort a webhely különböző elemeire viszi, láthatja, hogy a színkódok megjelennek a képernyő jobb alsó sarkában található részben.
Amikor a kurzort a V-alakú ikonra viszem, az alsó ablakban látom annak színkódját, ahogy már említettük. Ennek az eszköznek az az előnye, hogy az RGB kódot is megtalálja az elem hexadecimális színkódja mellett. A módszer rugalmasan használható azok számára, akik egyszerű és gyors módot szeretnének megtalálni kedvenc színeik kódjait.