Google Chrome jest dostarczany z Chrome DevTools, które jest zbiorem narzędzi dla programistów internetowych. Wśród wszystkich dostępnych narzędzi przydatny jest próbnik kolorów dostępny w Chrome.
Ale jak uzyskać do niego dostęp? Jak tego używasz? Jakie funkcje są oferowane wraz z narzędziem?
W tym artykule przyjrzymy się temu narzędziu i jego funkcjom.
Spis treści:
Jak uruchomić selektor kolorów Chrome?
Dostęp do chromowanego narzędzia selektora kolorów można uzyskać za pomocą skrótu klawiaturowego lub GUI (graficzny interfejs użytkownika).
Naciśnij Ctrl + Shift + I podczas korzystania z klawiatury, aby uzyskać DevTools, a następnie przejdź do selektora kolorów. Jeśli używasz komputera Mac, musisz nacisnąć Command + Opcja + I.
Za pomocą myszy musisz kliknąć prawym przyciskiem myszy, a następnie kliknąć „Sprawdź”, aby poruszać się po DevTools.
Możesz także ustawić Chrome DevTools tak, aby otwierały się automatycznie przy każdej nowej karcie. Dzięki temu możesz szybko uzyskać dostęp do próbnika kolorów dla każdej karty w przeglądarce.
Aby to osiągnąć, musisz uruchomić nową instancję Chrome za pomocą wiersza poleceń, przekazując następującą flagę:
--auto-open-devtools-for-tabs
Tak to wygląda podczas uruchamiania Chrome z automatycznie otwieranymi DevTools za pośrednictwem terminala w systemie Linux:
google-chrome-stable --auto-open-devtools-for-tabs
Jak korzystać z próbnika kolorów w Chrome?
Po uruchomieniu DevTools będziesz musiał nawigować po swojej drodze, aby uzyskać dostęp do narzędzi potrzebnych do identyfikacji koloru na stronie internetowej lub projekcie, nad którym chcesz pracować.
Domyślnie powinieneś widzieć aktywną sekcję „Styl” na dole DevTools, jak pokazano na zrzucie ekranu.
Jeśli wybrałeś coś innego, kliknij „Styl”, aby uzyskać dostęp do kodu CSS strony internetowej.
Tutaj musisz przewinąć dostępny kod CSS i poszukać pola koloru oznaczonego jako tło lub kolor pod sekcją treści. To próbnik kolorów, którego szukałeś.
Po prostu kliknij pole koloru; powinno dać ci więcej opcji, jak pokazano na zrzucie ekranu poniżej.
Otóż to! Voilà, masz próbnik kolorów w swojej przeglądarce gotowy do pomocy.
Tutaj powinieneś znaleźć kod szesnastkowy lub wartość RGB koloru i uzyskać możliwość wybrania innych elementów CSS w celu zbadania i sprawdzenia projektu na stronie internetowej.
Funkcje Próbnika kolorów w Chrome
Wbudowany selektor kolorów Chrome dostarcza różnych informacji oprócz kodu szesnastkowego, aby zidentyfikować kolor.
Oto, czego możesz się po nim spodziewać. Niektóre kluczowe funkcje obejmują:
Palety kolorów: Zamiast przełączać się między wieloma odcieniami kolorów, otrzymujesz kilka wstępnie zdefiniowanych palet kolorów, aby szybko zastosować niektóre wybory.
Format kolorów: masz możliwość przełączania się z kodu szesnastkowego na wartości RGBA i wartości kolorów HSLA.
Zakraplacz: Po uzyskaniu dostępu do próbnika kolorów możesz przeglądać stronę internetową i wybrać dowolny element, aby uzyskać kod szesnastkowy tego koloru. Możesz kliknąć przełącznik wyboru koloru, aby go włączyć/wyłączyć.
Otrzymujesz więcej opcji dostosowywania kolorów i uzyskania dokładnego koloru do wyboru. Tutaj są:
- Kopiuj do schowka: Możesz szybko skopiować kod zidentyfikowanego koloru do schowka.
- Gradient kolorów: możesz dostosować odcień koloru i przeglądać możliwości kombinacji kolorów według własnych upodobań.
- Kontrola krycia: Możesz dostosować poziom przezroczystości, aby wyglądał solidnie lub minimalnie.
- Próbnik koloru tła: Aby wybrać odpowiedni kolor tła w celu uzyskania idealnego kontrastu.
- Współczynnik kontrastu: Dostosuj kontrast lub popraw go, aby tekst/element był widoczny.
Uwaga: narzędzie do wybierania kolorów nie ogranicza się do Google Chrome, ale może być używane w dowolnej przeglądarce internetowej opartej na Chrome, takiej jak Brave.
Jak korzystać z próbnika kolorów Chrome w Prezentacjach Google?
Możesz nawigować, aby uzyskać dostęp do narzędzia wyboru kolorów, klikając prawym przyciskiem myszy sekcję nagłówka strony internetowej Prezentacji Google. Mimo że Prezentacje Google nie oferują wbudowanego narzędzia do wybierania kolorów, powinno to wystarczyć.
Jeśli nie masz doświadczenia w korzystaniu z DevTools z Prezentacjami Google, możesz także wypróbować niektóre rozszerzenia Chrome do tego zadania.
Rozszerzenia Chrome jako alternatywa dla próbnika kolorów
Chociaż rozszerzenia mogą się przydać, należy zauważyć, że nie są one aktywnie aktualizowane ani utrzymywane. Biorąc pod uwagę, że wymagają one dostępu do danych Twojej przeglądarki, powinieneś być ostrożny podczas instalowania jakichkolwiek rozszerzeń, nawet tych zalecanych tutaj.
Istnieją jednak dwa popularne rozszerzenia, których wypróbowanie może Cię zainteresować:
# 1. ColorZilla
ColorZilla oferuje wszystkie podstawowe funkcje, które można uzyskać dzięki wbudowanemu próbnikowi kolorów Chrome. Jako bonus otrzymujesz również możliwość sprawdzenia historii ostatnio wybranego koloru.
Powinno to więc przydać się w każdym przypadku użycia, nie tylko w Prezentacjach Google.
#2. Kroplomierz ColorPick
Jeśli napotkasz problemy z narzędziem Kroplomierz przy użyciu DevTools, możesz spróbować Kroplomierz ColorPick aby uzyskać zakraplacz bez dostępu do narzędzi internetowych.
Po wybraniu koloru wyświetli się wartość RGB i opcja generowania palet kolorów. Podobnie jak w przypadku powyższego rozszerzenia, możesz również sprawdzić historię wybranych kolorów.
Ostatnie słowa 🎨
Próbnik kolorów Chrome DevTools to przydatne narzędzie. Nie potrzebujesz profesjonalnego narzędzia, które pomoże Ci zidentyfikować kolory i powiązany kod lub wartości. Wbudowane narzędzie Chrome ułatwia to bez potrzeby korzystania z rozszerzenia innej firmy.
Począwszy od grafików po programistów stron internetowych tworzących szablon strony internetowej, każdy powinien uznać to za pomocne.
Oczywiście możesz również skorzystać z dostępnych rozszerzeń innych firm. Ale jeśli tego nie potrzebujesz, sugerujemy zapoznanie się ze wszystkimi funkcjami za pomocą DevTools.