Próbnik kolorów ColorZilla dla przeglądarek Chrome i Firefox

Mój wybór tygodnia to tym razem małe, ale ładne rozszerzenie przeglądarki, które można załadować dla przeglądarki Firefox lub Google Chrome. Jest bezpłatny i ułatwia życie blogerowi lub projektantowi stron internetowych, ponieważ możesz bardzo szybko wyodrębnić kolory w formacie HEX z elementów stron internetowych lub czcionek.

Dzięki ColorZilla mam niezwykle praktyczną pipetę kolorów dostępną w przeglądarkach Firefox i Chrome, która niezawodnie umieszcza wszystkie kolory - nawet z obrazów - jako kod HEX w schowku.

Rozdziały w tym poście:

1 Narzędzie Mac „Digital Color Meter” nie nadaje się do użytku
2 Moja droga przez Photoshopa lub „Inspect Element”
3 rozszerzenie przeglądarki ColorZilla — wszechstronny pomocnik dla projektantów stron internetowych
4 generator gradientów z wyjściem CSS
5 Stwórz paletę kolorów dla strony internetowej
6 podobnych postów

Rekomendacja Sir Apfelot: Oczyść dysk twardy komputera Mac za pomocą CleanMyMac

Narzędzie Mac „Digital Color Meter” nie nadaje się do użytku

Jako tkacz zazwyczaj potrzebujesz wartości szesnastkowych dla kolorów. Oznacza to, że #FFFFFF to na przykład kolor biały o wartościach czerwony = 255, zielony = 255, niebieski = 255. Narzędzie Apple „Digital Color Meter”, które można znaleźć w sekcji Aplikacje > Narzędzia, oferuje różne modele kolorów , ale na próżno szukasz wyjścia z wartościami HEX. Jest to oczywiście bezużyteczne dla osób zajmujących się pracą na stronach internetowych. Dlatego szukałem praktycznego rozwiązania.

Tutaj widać w działaniu narzędzie Apple „Digital Color Meter”, które niestety wyświetla tylko wartości kolorów jako wartość dziesiętną – dla moich celów jest to zupełnie bezużyteczne. — Tutaj możesz zobaczyć działające narzędzie Apple „Digital Color Meter”, które niestety pokazuje tylko wartości kolorów jako wartość dziesiętną – dla moich celów jest to całkowicie bezużyteczne.

Mam już aplikację „Sip” przez SetApp zainstalowany, ale nie chcę, aby uruchamiał się za każdym razem, gdy uruchamiam, iw zasadzie jest to przesada jak na moje potrzeby. Więc moje poszukiwania rozwiązania nie skończyły się na Sipie.

Aplikacja „Sip” dla komputerów Mac, która jest zawarta w pakiecie SetApp, oferuje również praktyczny selektor kolorów. — Aplikacja Mac „Sip”, która jest zawarta w pakiecie SetApp, oferuje również praktyczny próbnik kolorów.

Moja ścieżka przez Photoshopa lub „Inspect Element”

Naprawdę nie powinieneś tego mówić, ale jak dotąd często robiłem to, robiąc zrzut ekranu części strony internetowej, a następnie otwierając go w Photoshopie, aby wybrać kolor za pomocą kroplomierza. Niezwykle uciążliwy i oczywiście istnieje prostszy sposób: w Chrome, Safari lub Firefox możesz kliknąć prawym przyciskiem myszy na stronie, a następnie wybrać „Zbadaj element” lub „Zbadaj”. Otworzy się dodatkowe okno informacyjne.

W większości przeglądarek można użyć funkcji „Zbadaj element”, aby określić kolory czcionek, kroje pisma lub kolory bloków DIV lub innych elementów HTML. — W końcu funkcja „Sprawdź element” może być używana w popularnych przeglądarkach do określania kolorów czcionek, krojów pisma lub kolorów bloków DIV lub innych elementów HTML.

Jeśli teraz przesuniesz wskaźnik myszy nad nagłówek lub kontener DIV, jego właściwości zostaną wyświetlone w oknie informacyjnym. Możesz dowiedzieć się na przykład o kolorze lub czcionce nagłówków.

To, co nie działa, to wyodrębnianie koloru z grafiki, ponieważ otrzymujesz tylko informacje o adresie URL grafiki i rozmiarze. Ich zawartość nie zostanie ujawniona za pomocą opcji „Zbadaj”.

Rozszerzenie przeglądarki ColorZilla — wszechstronny pomocnik dla projektantów stron internetowych

Wczoraj natknąłem się na rozszerzenie przeglądarki ColorZilla, które można znaleźć zarówno w Firefoksie, jak i Chrome:

Jest całkowicie darmowy i wolny od reklam i nie tylko oferuje selektor kolorów w locie, który może pobierać kolory z całego obszaru przeglądarki, ale ma także kilka innych funkcji.

Dolna strzałka pokazuje mój celownik, którego używam do analizy koloru, a górna pokazuje pasek ColorZilla z ciemnym tłem, na którym również znajduje się aktualna wartość koloru.

Czytaj więcej: Aplikacje OCR dla komputerów Mac — wyodrębnianie tekstu z obrazu lub pliku PDF
Czytaj więcej: TubeBuddy – Łatwe zarządzanie i optymalizacja kanałów YouTube
Czytaj więcej: Aplikacje dla fanów kolorów na Maca: Aquarelo, Couleurs, Skala Color i Vaunt w teście

Generator gradientów z wyjściem CSS

Jedną z rzeczy, która z pewnością zainteresuje niektórych projektantów stron internetowych, jest generator gradientów. W ten sposób tworzysz gradient, tak jak przywykłeś do tego z Photoshopa, a ColorZilla majstruje razem kompletny kod CSS, którego potrzebujesz do tego gradientu. Nie potrzebuję tego aż tak bardzo, ale jestem pewien, że wielu projektantów stron internetowych będzie z niego zadowolonych, ponieważ w przyszłości nie będą musieli odwiedzać witryn, które to za nich wykonują.

Gradientowy kod CSS może szybko stać się dość złożony. ColorZilla zamienia to w zadanie kopiowania i wklejania, które jest łatwe do wykonania nawet jako początkujący.

Stwórz paletę kolorów dla strony internetowej

Kolejną fajną funkcją jest generowanie palety kolorów strony internetowej. Jeśli na przykład podczas przeglądania Internetu znalazłeś witrynę internetową, w której kompozycja kolorów jest bardzo atrakcyjna, możesz połączyć kolory w palecie za pomocą elementu menu „Analizator kolorów strony internetowej”.

ColorZilla oferuje jeszcze kilka drobiazgów, takich jak historia odpipetowanych kolorów lub kopiowanie wartości kolorów w różnych systemach kolorów, ale moją najważniejszą potrzebą było po prostu pobranie koloru ze strony internetowej za pomocą pipety, a następnie nałożenie go schowka jako wartość szesnastkową. Dzięki temu ColorZilla jest doskonały i nieskomplikowany. Dziękuję programistom za to wspaniałe narzędzie.