Wyobraź sobie, że przeglądasz obrazy i znajdujesz idealny kolor — dokładnie taki odcień, jakiego potrzebujesz do następnego projektu. W Internecie jest kilka niesamowitych narzędzi, które pomogą Ci zidentyfikować określone kolory w dowolnej aplikacji lub witrynie. Rzućmy okiem na niektóre z najlepszych ich opcji.
1. Korzystanie z narzędzi programistycznych w przeglądarce internetowej Chrome
Jedną z opcji, którą możesz wypróbować, jest narzędzie dla programistów Chrome. Chrome zawiera wiele przydatnych funkcji dla programistów, co znacznie ułatwia wykonywanie zadań. Możesz wykonać następujące czynności, aby zidentyfikować określone kolory w dowolnej aplikacji lub witrynie internetowej.
- Otwórz stronę internetową, na której chcesz zidentyfikować kolor w przeglądarce Chrome
- Kliknij ikonę z trzema kropkami w prawym górnym rogu Chrome. Pojawi się wyskakujące okienko z kilkoma opcjami.
- Kliknij „Więcej narzędzi”, a następnie wybierz „Narzędzia programistyczne” z wynikowego wyskakującego okienka.
- Użyj Ctrl + Shift + I, jeśli chcesz pominąć powyższe kroki
- Teraz okno dzieli się na dwa ekrany – strona po lewej stronie i kod strony po prawej
- Wpisz Ctrl + Shift + C na klawiaturze. To pokazuje wszystkie szczegóły konkretnego elementu na stronie internetowej, gdy najedziemy kursorem myszy na elementy.
- Możesz znaleźć kod koloru elementu wraz z innymi przydatnymi informacjami.
Przykład
Załóżmy, że interesują Cię kody kolorów niektórych elementów na poniższej stronie internetowej:
![](/f/3802f656e6aa739a132c4f46c8c3ef27.png)
Możesz wybrać narzędzia programistyczne, klikając trzy kropki w rogu ekranu. Z menu rozwijanego wybierz Więcej narzędzi, a następnie Narzędzia programistyczne.
![](/f/c67916cfd69cd3c7eabf9c1f6bfefd3e.jpg)
![](/f/b91d07c986b33e04985c5b1ad4325050.png)
Ekran zostanie wizualnie podzielony na dwie strony. Zobaczysz witrynę po lewej stronie, a kod witryny po prawej.
![](/f/30ac7e027f77876a2636404d7a26f8a7.png)
Wpisz polecenie i skrót „Ctrl + Shift + C” i najedź kursorem myszy na elementy witryny. To pokaże kolor tego elementu wraz z innymi przydatnymi informacjami. Poniżej dwa przykłady, w których znajdujemy kolor paska nawigacyjnego i pulpitu pod wyszukiwarką.
Tutaj możemy znaleźć kod koloru w wyskakującym okienku paska nawigacyjnego. Kod koloru to #333333.
![](/f/fda260f224a5338b8e67e408e3366ecd.png)
Kolor deski rozdzielczej można znaleźć wraz z innymi przydatnymi detalami. Kolor: #333333, kolor tła: #5D4A8E. Chociaż na początku może to wyglądać nieco onieśmielająco, program staje się znacznie łatwiejszy w użyciu przy odrobinie praktyki.
2. Rozszerzenie Chrome zakraplacz do oczu
Eye Dropper to popularne i szeroko stosowane rozszerzenie Chrome, które pomaga znaleźć określone kolory w dowolnej witrynie lub aplikacji.
![](/f/ae124fff672568f73dab11c911f175c7.png)
Wykonaj poniższe czynności, aby zidentyfikować określone kolory w witrynie lub aplikacji za pomocą narzędzia rozszerzenia Eye Dropper.
- Otwórz dowolną witrynę lub aplikację w przeglądarce internetowej Chrome
- Kliknij ikonę rozszerzenia zakraplacza
- Wybierz „Wybierz kolor ze strony internetowej” i najedź kursorem myszy na różne elementy w aplikacji lub witrynie.
![](/f/1585b6328edf37d75e66ab09e8baa8b8.png)
Kod koloru elementów wymienionych w prawym dolnym rogu strony internetowej.
Przykład
OK, użyjmy narzędzia do przedłużania kroplomierza w prawdziwym przykładzie. Zaczniemy od otwarcia strony internetowej i kliknięcia ikony rozszerzenia Eye Dropper
![](/f/4cf6868d9a6e64113b41e9fb8d0f3fb2.png)
Gdy najedziesz kursorem na różne elementy witryny, zobaczysz kody kolorów pojawiające się w sekcji w prawym dolnym rogu ekranu.
![](/f/4a5cf6467115c08e46ef1c7a94122f05.png)
Kiedy najeżdżam kursorem na ikonę w kształcie litery V, widzę jej kod koloru w dolnym oknie, jak wspomniano. Zaletą tego narzędzia jest to, że możesz również znaleźć kod RGB wraz z szesnastkowym kodem koloru elementu. Metoda jest elastyczna dla tych, którzy chcą w prosty i szybki sposób pobrać kody swoich ulubionych kolorów.