Jak zidentyfikować określony kolor w aplikacji lub witrynie?

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:

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.

Ekran zostanie wizualnie podzielony na dwie strony. Zobaczysz witrynę po lewej stronie, a kod witryny po prawej.

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.

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.

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.

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

Gdy najedziesz kursorem na różne elementy witryny, zobaczysz kody kolorów pojawiające się w sekcji w prawym dolnym rogu ekranu.

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.