Próbnik kolorów zapewnia pikselowo precyzyjne narzędzie zakraplacza do wybierania kolorów z dowolnego elementu na stronie — tekstu, teł, obrazów, gradientów lub dowolnego widocznego piksela. Uzyskaj dokładną wartość koloru jednocześnie w formatach HEX, RGB i HSL, z powiększonym podglądem pikseli dla precyzyjnego celowania. Wcześniej wybrane kolory są zapisywane w pasku historii do szybkiego ponownego dostępu.
Wyodrębnianie dokładnych wartości kolorów ze strony jest powszechnym zadaniem — dopasowywanie koloru marki, odnoszenie się do projektu lub sprawdzanie odcienia używanego na stronie konkurencji. DevTools przeglądarki pokazują kolory w panelu Styles, ale tylko dla elementów z jawnymi właściwościami koloru CSS — nie dla obrazów, gradientów czy kolorów dziedziczonych. Zakraplacz Próbnika kolorów działa na poziomie piksela — odczytuje rzeczywisty renderowany kolor dowolnego piksela pod kursorem, niezależnie od tego, jak ten kolor powstał. Kliknij niebieskie niebo na obrazie hero, punkt środkowy gradientu lub półprzezroczystą nakładkę i uzyskaj dokładną złożoną wartość koloru. Powiększony okrąg podglądu pokazuje przybliżony widok otaczających pikseli, więc możesz precyzyjnie celować w dokładny piksel. Wszystkie trzy formaty wyjściowe (HEX, RGB, HSL) są pokazywane jednocześnie — kliknij dowolny format, aby skopiować. Twoje ostatnie wybory są zapisywane w pasku historii kolorów na dole, więc możesz łatwo wrócić do wcześniej wybranego koloru.
Powiększony okrągły podgląd pokazuje przybliżone piksele wokół kursora, z celownikiem do dokładnego wyboru piksela. Wybieraj kolory z tekstu, teł, obrazów, gradientów, SVG lub dowolnego widocznego piksela na stronie.
Każdy wybrany kolor jest pokazywany we wszystkich trzech formatach naraz: HEX (#7c3aed), RGB (rgb(124, 58, 237)) i HSL (hsl(262, 83%, 58%)). Bez przełączania czy konwertowania — wszystkie formaty są natychmiast dostępne.
Kliknij dowolny wiersz formatu (HEX, RGB lub HSL), aby natychmiast skopiować tę konkretną wartość do schowka. Krótka animacja "Skopiowano!" potwierdza akcję. Wklej bezpośrednio do swojego CSS, narzędzia projektowego lub specyfikacji koloru.
Twoje ostatnio wybrane kolory są zapisywane w wizualnym pasku historii pokazującym próbki kolorów. Kliknij dowolną próbkę, aby ponownie wybrać ten kolor i zobaczyć jego wartości. Historia utrzymuje się podczas sesji — wybieraj kolory z wielu stron.
Wybrany kolor jest wyświetlany jako duża próbka nad wartościami formatów, ułatwiając jego zobaczenie i weryfikację. Próbka jest wystarczająco duża, aby pokazać subtelne odcienie, które mogą wyglądać identycznie w mniejszych rozmiarach.
Wybiera kolory z dowolnego widocznego piksela: kolory CSS, gradienty CSS, obrazy (PNG, JPG, SVG), elementy canvas, klatki wideo, półprzezroczyste nakładki (wybierając kolor złożony), a nawet iframe'y. Jeśli to widzisz, możesz to wybrać.
Wybierz dokładny kolor marki ze strony firmy, aby upewnić się, że twój projekt lub zawartość używa właściwego odcienia. Uzyskaj precyzyjną wartość HEX zamiast zgadywać lub szukać w wytycznych marki.
Wybieraj kolory bezpośrednio z obrazów hero, zdjęć produktów lub ilustracji. Wyodrębnij dominujący kolor ze zdjęcia, aby użyć go jako uzupełniającego tła w swoim projekcie.
Specyfikacja projektu mówi, że przycisk powinien być #7c3aed. Wybierz kolor z wdrożonego przycisku, aby zweryfikować, że pasuje. Wychwytuje subtelne różnice kolorów, które są niewidoczne gołym okiem.
Przeglądaj strony inspiracji projektowej i wybieraj kolory, które przyciągają twoje oko. Pasek historii buduje paletę kolorów, które wybrałeś podczas sesji — użyj jej jako punktu wyjścia dla własnego schematu kolorów.
Wybieraj kolory w różnych punktach gradientu CSS, aby zobaczyć dokładny kolor w każdej pozycji. Przydatne do replikowania gradientów lub zrozumienia, jak mieszają się punkty gradientu.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Próbnika kolorów. Kursor zmienia się w zakraplacz z powiększonym okręgiem podglądu.
Przesuń kursor nad stronę. Powiększony podgląd pokazuje przybliżony widok pikseli wokół kursora, z celownikiem wskazującym dokładny piksel docelowy.
Kliknij dowolne miejsce na stronie, aby wybrać kolor w tym pikselu. Próbka koloru, wartości HEX, RGB i HSL natychmiast się aktualizują.
Kliknij wiersz HEX, RGB lub HSL, aby skopiować tę wartość do schowka. Na chwilę pojawia się potwierdzenie "Skopiowano!".
Kontynuuj klikanie, aby wybrać więcej kolorów. Każdy wybór jest dodawany do paska historii. Kliknij dowolną próbkę historii, aby przywołać ten kolor.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
