Zrzut ekranu jest często jedyną rzeczą, jaką masz. Nie otworzysz CSS-a strony, nie zbadasz aplikacji, nie masz pliku projektowego — ale widzisz kolory na ekranie, a zrzut zamraża je w obraz, z którego możesz próbkować. Oto jak wyciągnąć z niego dokładne kody kolorów.
Dlaczego zrzut ekranu to uczciwe źródło
Gdy robisz zrzut wyrenderowanej strony czy aplikacji, uchwycasz kolory tak, jak naprawdę się pojawiają — po nałożeniu każdego gradientu, nakładki i krycia. To często bardziej prawdziwe niż wartość źródłowa. Karta zdefiniowana jako #000000 przy 90% krycia na szarym tle nie jest na ekranie czarna; to jakaś konkretna ciemna szarość. Badanie kodu daje Ci przepis; próbkowanie zrzutu daje Ci kolor, który użytkownik naprawdę widzi. Gdy dopasowujesz ten wygląd, to zrzut chcesz odczytać.
Pobierz kolor w trzech krokach
- Zrób i wczytaj zrzut ekranu. Uchwyć ekran (albo obszar, który Cię obchodzi) i wrzuć obraz do próbnika.
- Najedź na piksel. Lupa powiększająca podąża za Twoim kursorem i powiększa obszar pod nim, więc możesz trafić precyzyjnie — nawet na cienkie obramowanie czy małą ikonę.
- Kliknij, żeby zapisać, potem skopiuj. Każde kliknięcie zachowuje kolor jako próbkę z jego HEX, RGB i HSL, każdy z przyciskiem kopiowania. Skopiuj format, którego potrzebujesz, i wklej go do arkusza stylów albo narzędzia projektowego.
Rzeczy specyficzne dla zrzutów, na które trzeba uważać
Zrzuty ekranu mają dziwactwa, które mogą zaburzyć próbkę koloru, a łatwo ich uniknąć, gdy już się je zna:
- Zapisuj jako PNG, nie JPEG. Kompresja JPEG lekko rozmazuje kolory, zwłaszcza przy krawędziach i w płaskich obszarach, więc próbkowana wartość może odbiec od prawdziwej. PNG jest bezstratny i trzyma każdy piksel dokładnie — większość narzędzi do zrzutów w systemie i tak domyślnie używa PNG.
- Pilnuj poziomu powiększenia. Zrzut zrobiony przy powiększeniu przeglądarki albo systemu innym niż 100% jest przeskalowany, a skalowanie miesza sąsiednie piksele. Dla najczystszej próbki uchwyć przy 100%.
- Unikaj krawędzi i tekstu. Antyaliasing sprawia, że piksele wzdłuż każdej krawędzi są mieszankami, a nie prawdziwym kolorem. Próbkuj ze środka jednolitego obszaru — lupa pomaga zobaczyć, że jesteś z dala od rozmytej granicy.
- Uważaj na subpikselowy kolor tekstu. Powiększ wyrenderowany tekst, a zobaczysz obwódki koloru, które nie są prawdziwą wartością tekstu. Pobieraj kolory z wypełnień i teł, nie z kresek liter.
Odczytywanie HEX, RGB i HSL
Każda próbka pokazuje wszystkie trzy formaty naraz:
- HEX (
#3A7BD5) — domyślny dla CSS i narzędzi projektowych. - RGB (
rgb(58, 123, 213)) — wartości kanałów, przydatne, gdy potrzebujesz przezroczystościrgba. - HSL (
hsl(215, 65%, 53%)) — odcień, nasycenie, jasność, najlepszy, gdy chcesz podkręcić kolor, a nie skopiować go dokładnie.
Nie próbkujesz ponownie, żeby przełączyć — ten sam kolor już tam jest we wszystkich trzech.
Wyłap cały schemat za jednym przejściem
Z jednego zrzutu możesz odbudować cały schemat kolorów: kliknij kolor nagłówka, przycisk, link, tło, przygaszony tekst. Każdy piętrzy się na liście, więc możesz wyciągnąć pełny zestaw w jednej sesji i skopiować je po kolei.
Jeśli natomiast chcesz, żeby ogólna paleta obrazu została Ci streszczona — garstka dominujących tonów — to osobna robota, a narzędzie palety w tools.faxianai.com wyodrębnia je automatycznie. Ten próbnik służy do wskazywania konkretnego piksela na zrzucie; narzędzie palety służy do scharakteryzowania obrazu jako całości.
Nic nie opuszcza Twojej maszyny
Zrzuty ekranu często zawierają rzeczy, których wolałbyś nie przesyłać — wewnętrzny panel, prywatny szkic, nieopublikowany interfejs klienta. Tutaj obraz jest odczytywany lokalnie w Twojej przeglądarce z płótna: nic nigdzie nie jest wysyłane, nie ma konta, i działa offline po pierwszym wczytaniu. Dostajesz kolory bez tego, żeby zrzut kiedykolwiek opuścił Twoje urządzenie.
Zrób zrzut, najedź na piksel, kliknij i skopiuj.