Ta strona używa cookies
sprawdź politykę prywatności

Rozumiem

DevTips – Color Picker w Chrome DevTools

6/6/2019
Bartek Cis

Praca z kolorami to na Front-Endzie norma. Chrome DevTools oferuje zgrabne narzędzie gdzie szybko poradzisz sobie z wieloma zadaniami.

Czego się dzisiaj dowiesz?

Opiszę jak używać Color Picker’a wbudowanego w Chrome. Jak większość narzędzi od Google wymiata. Będą ilustracje krok po kroku więc bułka z masłem.

Na koniec wymienię kilka narzędzi którymi się wspomagam przy pracy z paletami barw na Front-Endzie.

Dlaczego to piszę?

Nie uchylam się od pracy z grafiką. Sprawia mi to niekrytą przyjemność (do pewnego stopnia…). W aplikacjach internetowych ciągle jest coś na rzeczy w tej kwestii.

Kiedyś kopiowałem taką grafikę do Photoshopa albo instalowałem pluginy do Chroma żeby użyć jakiegoś Color Picker’a. Już tak nie robię 🙂

Color Picker w Chrome DevTools

Color Picker to narzędzie do szybkiej analizy dowolnego koloru. Jest osobną funkcją w wielu programach do grafiki. Bardzo przydatna rzecz. Poniżej instrukcja w kilku krokach:

Otwórz Color Picker’a

Włącz Chrome DevTools i najedź inspektorem na dowolny element tzn. tekst, tło itp. Powinieneś/aś zobaczyć kwadracik z aktualnie użytym kolorem:

Po prostu kliknij dokładnie w ten kwadracik. Kto by pomyślał, że skrywa się tam coś takiego…

Format koloru

Jesteś wewnątrz. Naciśnij w ikonkę poniżej:

W ten sposób możesz sprawdzić formatowanie koloru w najpopularniejszych standardach. No ale to dopiero początek.

Palety kolorów

Do dyspozycji cała mapa kolorów tak jak np. w Photoshopie 🙂 Możesz też nadać wybranemu elementowi dowolny kolor z kilku palet które są w zestawie. Wystarczy, że klikniesz w tą ikonę:

Fajną opcją jest zdefiniowanie własnej palety Twoich ulubionych kolorów. Jak raz ją zdefiniujesz to będzie dostępna nawet jeśli będziesz pracować w innych oknach przeglądarki ( to się nazywa inne wątki przeglądania – browsing contexts ).

Jak wybierzesz daną paletę to będzie w szybkim dostępie:

Kontrast

Narzędzie mierzy też poziom kontrastu między np. czcionką a otoczeniem. Kliknij tu:

A zobaczysz bardziej szczegółową analizę, przydatne w kwestiach Accessibility:

Color Picker

Czyli to co najlepsze kliknij w tą ikonę:

I zobacz jak to działa (poniżej video):

Możesz co do pixela zbadać każdy kolor użyty na stronie. Nie ważne czy to kolor z CSS czy z dowolnej grafiki. Co więcej po kliknięciu zaznaczony wcześniej element DOM otrzymuje ten kolor 🙂 Fajne nie? Pobaw się sam/a!

Narzędzia do pracy z grafiką

Dobrze to jeszcze kilka z tych które używam na codzień:

ColorHexa

To mi służy do tego aby sprawdzać tony danego koloru. Jeśli chce coś np. 2-3 tony ciemniejsze/ jaśniejsze żeby stworzyć fajny gradient to używam tego.

ColorPalettes

Tego używam rzadziej niż kiedyś ale można sprawdzić fajne palety inspirowane naturą.

ColorMind

Teraz już idę na łatwiznę 🙂 Paleta kolorów jest automatycznie generowana. Do tego poniżej od razu sprawdzasz jak wygląda z estetycznym dashboard’em. Dobre nie?

Podsumowanie

W tym wpisie dowiedziałeś/aś się jak używać ColorPicker’a wbudowanego w Chrome DevTools. To narzędzie jest naprawdę spoko. Przyda się nie raz.

Wiesz też skąd brać szybkie inspiracje palet kolorów!

Podziel się z innymi 🙂

Cześć jestem Bartek.

Na tym blogu wprowadzę Cię w tajniki Front-Endu i programowania webowego.

Warto
Social media & sharing icons powered by UltimatelySocial