Próbnik kolorów z obrazu

Jak działa próbnik kolorów

Wgraj zdjęcie, zrzut ekranu lub logo i kliknij w dowolnym miejscu. Narzędzie odczytuje dokładnie ten piksel i pokazuje jego kolor w HEX (np. #1e88e5) i RGB (rgb(30, 136, 229)). Przycisk Kopiuj umieszcza kod HEX w schowku. Po wczytaniu obrazu od razu odczytywany jest środkowy piksel, więc wartość widać natychmiast.

Każdy kliknięty kolor trafia do rzędu ostatnich próbek (do ośmiu), więc możesz sprawdzić kilka miejsc — przycisk, tło, nagłówek — i porównać je przed wyborem. Obraz jest odczytywany na canvas w Twojej przeglądarce i nigdy nie jest wysyłany.

HEX, RGB i HSL po ludzku

Wszystkie trzy opisują ten sam kolor na ekranie, tylko zapisują go inaczej.

• HEX — #RRGGBB, trzy pary cyfr szesnastkowych dla czerwieni, zieleni i błękitu, od 00 do ff. Tego oczekują CSS, Figma, Canva, motywy WordPressa i większość pól „kolor marki".
• RGB — te same trzy kanały jako liczby dziesiętne od 0 do 255. #1e88e5 i rgb(30, 136, 229) to to samo. Przydatne w kodzie, w Office i w programach z suwakami.
• HSL — odcień (0–360° na kole barw), nasycenie i jasność w procentach. Próbnik nie podaje HSL, ale każde narzędzie graficzne i CSS przelicza HEX natychmiast. HSL przydaje się, gdy chcesz jaśniejszą lub ciemniejszą wersję wybranego koloru: odcień zostaje, zmieniasz tylko jasność.

Kolory ze zrzutów ekranu

Aby odtworzyć kolor z aplikacji, strony albo klatki filmu, zrób zrzut ekranu (Windows: Win + Shift + S; Mac: Cmd + Shift + 4; telefon: zasilanie + ciszej, na iPhonie przycisk boczny + głośniej) i upuść go tutaj.

Wskazówki dla dokładnego wyniku:

• Klikaj w jednolite obszary. Celuj w środek przycisku, nie w krawędź — krawędzie są wygładzane z tłem (antyaliasing) i dają kolor pośredni.
• Zdjęcia mają szum. Sąsiednie piksele fotografii nieco się różnią; sprawdź kilka punktów i wybierz najbardziej typowy.
• Zrzut ekranu może zmienić kolor. Tryb nocny, Night Shift, HDR czy ekran z zarządzaniem barwą potrafią zabarwić zrzut. Wyłącz je, jeśli liczy się dokładny kolor marki.
• Mocno skompresowane JPG odbiegają. JPG zapisany wiele razy ma plamy przy krawędziach. Jeśli masz oryginalny PNG lub SVG logo, użyj go.
• Obszary przezroczyste nie mają prawdziwego koloru; kliknięcie w nie daje czerń (#000000). Klikaj w widoczną część logo.

Sprawdź kontrast, zanim użyjesz koloru

Ładny kolor może być nieczytelny jako tekst. Wytyczne dostępności (WCAG) wymagają kontrastu co najmniej 4,5:1 między zwykłym tekstem a tłem i 3:1 dla dużego tekstu i ikon. Jasnoszary na białym czy średni niebieski na granatowym często nie przechodzą.

Po pobraniu kolorów tekstu i tła wklej oba kody HEX do dowolnego narzędzia do sprawdzania kontrastu. Jeśli stosunek jest za niski, przyciemnij tekst albo rozjaśnij tło — zmiana jasności w HSL to najszybszy sposób, by poprawić kontrast bez odchodzenia od kolorów marki.

Typowe zastosowania

• Ustalenie koloru marki z logo przysłanego jako obrazek.
• Odtworzenie koloru przycisku lub tła strony we własnym projekcie.
• Zbudowanie palety ze zdjęcia na slajdy, posty albo moodboard wnętrza.
• Wybór tła ikony Apple touch w generatorze favicon.

Powiązane narzędzia

• Najpierw wytnij obiekt, potem pobierz kolor bez tła: Usuń tło.
• Wytnij mały fragment, by klikać dokładniej: Przytnij obraz.
• Potrzebujesz samego obrazu jako kodu do CSS? Obraz do Base64.