Jak sprawdzić kod koloru na dowolnym obrazie

Ustalanie dokładnego kodu koloru to w projektowaniu codzienność: odtworzenie barwy z cudzego logo, wyciągnięcie palety ze zdjęcia, które służy za inspirację, utrzymanie spójności między różnymi materiałami jednej marki. Najlepsza metoda zależy od sytuacji — od tego, czy masz dostęp do pliku, czy kolor jest na obrazie w sieci, na stronie internetowej, czy na zdjęciu z telefonu.

Formaty zapisu kolorów

Zanim przejdziemy do metod, warto poznać zapisy najczęściej używane do opisywania kolorów cyfrowo:

HEX i RGB niosą tę samą informację, tylko zapisaną inaczej — zawsze da się przeliczyć jeden na drugi. HSL opisuje kolor przez odcień, nasycenie i jasność, więc jest wygodniejszy przy ręcznych korektach. CMYK służy wyłącznie do druku.

Metoda 1: internetowy ekstraktor kolorów (najszybsza)

Jeśli chcesz poznać dominujące barwy całego obrazu albo trafić precyzyjnie w konkretny piksel, ekstraktor kolorów online jest najprostszym rozwiązaniem. Wystarczy wgrać plik, a narzędzie samo wskaże najczęściej występujące kolory i poda gotowe do skopiowania kody HEX.

O Wyodrębnij kolory od ImageTools analizuje dowolne zdjęcie lub grafikę i zwraca dominujące barwy wraz z kodami HEX. Wszystko dzieje się w przeglądarce — obraz nie opuszcza Twojego urządzenia.

1. Wejdź w narzędzie Wyodrębnij kolory.
2. Wgraj obraz albo przeciągnij plik na wskazane pole.
3. Narzędzie samo wskaże kolory najczęściej występujące na obrazie.
4. Kliknij dowolny kolor, żeby skopiować jego kod HEX.

Metoda 2: kroplomierz w przeglądarce (Chrome DevTools)

Jeśli szukany kolor jest na stronie internetowej — w tle, na przycisku, w logo — Chrome ma do tego wbudowane narzędzie.

1. Otwórz stronę w Google Chrome.
2. Naciśnij F12 (albo kliknij prawym przyciskiem i wybierz „Zbadaj”).
3. W panelu DevTools kliknij ikonę kursora w lewym górnym rogu (albo naciśnij Ctrl+Shift+C).
4. Najedź kursorem na dowolny element strony — DevTools pokaże właściwości CSS, w tym kolory w zapisie HEX lub RGB.
5. Żeby otworzyć wizualny próbnik, kliknij kolorowy kwadracik obok dowolnej wartości koloru w panelu CSS.

DevTools w Chrome ma też wbudowany Color Picker : po kliknięciu kwadracika koloru w panelu stylów CSS otwiera się próbnik, w którym możesz przeglądać całe spektrum i widzieć wartości HEX, RGB, HSL i HSLA jednocześnie.

Metoda 3: kroplomierz w Canvie

Jeśli pracujesz w Canvie i chcesz pobrać kolor z obrazu, który już jest w projekcie:

1. Zaznacz element, którego wypełnienie chcesz zmienić (tekst, kształt albo tło).
2. Kliknij kolor elementu w panelu bocznym, żeby otworzyć próbnik.
3. W próbniku kliknij ikonę kroplomierza (eyedropper).
4. Kliknij dowolny punkt obrazu na obszarze roboczym, żeby pobrać dokładny kolor tego piksela.
5. Kod HEX pojawi się w polu tekstowym próbnika.

Metoda 4: kroplomierz w Photoshopie i Illustratorze

Photoshop

Po otwarciu obrazu wybierz narzędzie Kroplomierz (skrót: klawisz I). Kliknij dowolny punkt obrazu — pobrana barwa pojawi się w polu koloru na pasku narzędzi. Żeby zobaczyć kod HEX, kliknij to pole dwukrotnie (otworzy się Color Picker), a wartość HEX znajdziesz w polu w prawym dolnym rogu.

Illustrator

Po otwarciu pliku zaznacz obiekt, a następnie kliknij kolor wypełnienia lub obrysu na pasku narzędzi. W oknie Color Picker kod HEX znajdziesz w dolnym polu. Możesz też użyć narzędzia Kroplomierz (skrót: I), żeby pobrać kolor z dowolnego punktu obszaru roboczego.

Metoda 5: rozszerzenie do przeglądarki — ColorZilla

Rozszerzenie ColorZilla (dostępne dla Chrome i Firefoksa) dokłada do przeglądarki stały kroplomierz. Po instalacji możesz:

• Pobrać kolor dowolnego piksela na dowolnej stronie jednym kliknięciem.
• Od razu zobaczyć kod w zapisie HEX, RGB i HSL.
• Skopiować wartość jednym kliknięciem.
• Zajrzeć do historii ostatnio pobranych barw.

To najwygodniejsze rozwiązanie, jeśli często pobierasz kolory ze stron i nie chcesz za każdym razem otwierać DevTools.

Metoda 6: aplikacja do pobierania kolorów w telefonie

Do rozpoznawania barw fizycznych przedmiotów — ściany, produktu, opakowania — albo obrazów w telefonie służą osobne aplikacje:

• Color Grab (Android) — kierujesz aparat na dowolną powierzchnię i odczytujesz kod HEX na żywo.
• Palette Cam (iOS/Android) — wyciąga pełną paletę barw ze zdjęć robionych na bieżąco albo z galerii.
• Canva (iOS/Android) — kroplomierz w mobilnej Canvie działa na zaimportowanych obrazach.

Co zrobić z pobranymi kodami kolorów

Gdy znasz już kod HEX, najczęściej wykorzystuje się go tak:

W CSS i pracy nad stroną

Wstaw kod bezpośrednio: color: #3ecf8e; ou background-color: #3ecf8e;. Do jaśniejszych i ciemniejszych wariantów wygodniej użyć HSL — regulowanie jasności jest tam znacznie prostsze niż ręczne modyfikowanie wartości HEX.

W Canvie, Figmie i programach Adobe

Wklej kod HEX w polu koloru dowolnego elementu. Wszystkie popularne programy graficzne przyjmują ten zapis wprost.

Do zbudowania pełnej palety

Gdy masz kolor bazowy, narzędzie Paleta samo wygeneruje harmonijne zestawienia — dopełniające, analogiczne, triadę i monochromatyczne — z gotowymi kodami HEX, RGB i HSL.

Do druku

Przed wysłaniem do drukarni przelicz HEX na CMYK. Kolory na ekranie (RGB/HEX) i w druku (CMYK) mają różne gamuty — to, co na monitorze wygląda identycznie, na papierze potrafi się zauważalnie różnić. Adobe Illustrator i Affinity Designer wykonują tę konwersję automatycznie przy eksporcie do druku.

Dlaczego pobrany kolor bywa inny, niż się spodziewasz

Ważny szczegół: na zdjęciach rzadko trafia się idealnie jednolita plama koloru. To, co wygląda na jednorodny błękit, potrafi mieć dziesiątki subtelnych różnic piksel po pikselu — wynikających ze światła, kompresji JPG i szumu matrycy. Kroplomierz pobiera dokładny kolor jednego konkretnego piksela, a ten bywa nieco inny niż „ogólny błękit”, o który Ci chodzi.

Przy fotografiach lepiej sięgnąć po narzędzie, które wylicza kolor dominujący całego obszaru — tak jak robi to Wyodrębnij kolory — zamiast pobierać pojedynczy piksel. Wynik jest bardziej reprezentatywny i po prostu użyteczniejszy w projekcie.

Najczęściej zadawane pytania