Masz obraz i potrzebujesz z niego jednej liczby: kodu HEX konkretnego koloru. Może to logo, którego specyfikacja marki dawno przepadła, zrzut strony, której niebieski chcesz dopasować, albo zdjęcie z odcieniem, którego chciałbyś użyć ponownie. Wpisywanie tego, co myślisz, że to za kolor, nie działa — Twoje oko nie odczyta #3A7BD5 z ekranu, a kolor, który wygląda dobrze, jest zwykle o kilka cyfr obok. Oto jak odczytać prawdziwą wartość wprost z pikseli.
Dlaczego zgadywanie nigdy do końca nie działa
Pojedynczy „niebieski" na ekranie to naprawdę rozrzut niemal identycznych niebieskich, a jasność i kalibracja Twojego monitora przesuwają je dalej. Wybierz na oko, a wylądujesz blisko, ale źle — na tyle blisko, że niedopasowanie jest irytujące, ale nieoczywiste, więc palisz dziesięć minut, zastanawiając się, czemu przycisk nie pasuje do nagłówka. Rozwiązaniem jest przestać zgadywać i odczytać liczbę, którą piksel faktycznie przechowuje.
Uzyskaj kod w trzech krokach
Niezawodnym sposobem jest próbkowanie piksela wprost próbnikiem kolorów.
- Załaduj obraz. Wrzuć logo, zrzut ekranu albo zdjęcie, z którego wyciągasz.
- Najedź na dokładny piksel. Lupa podąża za kursorem i powiększa obszar pod nim, więc na ostrej krawędzi widzisz, który piksel jest płaskim kolorem marki, a który jest wygładzoną mieszanką dwóch.
- Kliknij, by zapisać, potem skopiuj. Każde kliknięcie zachowuje kolor jako próbkę pokazującą jego HEX, RGB i HSL, każdy z własnym przyciskiem kopiowania. Kliknij HEX i jest w Twoim schowku.
Traf we właściwy piksel
Lupa liczy się bardziej, niż brzmi. Tam, gdzie kolor spotyka inny — litera na tle, krawędź ikony — piksele pomiędzy są wygładzone: uśredniona mieszanka dwóch kolorów, a nie któryś z nich. Próbkuj tam, a dostaniesz mętną wartość, która nie pasuje do niczego. Celuj w płaski obszar kilka pikseli wewnątrz kształtu, gdzie kolor jest jednolity, a powiększony widok pozwala Ci potwierdzić, że jesteś na nim, zanim klikniesz.
Na czystym logo albo płaskim UI to łatwe — kolor jest jednolity na szerokim obszarze. Na zdjęciu wymaga większej ostrożności, bo ziarno i kompresja sprawiają, że sąsiednie piksele naprawdę się różnią. Wybierz ze spokojnego, równo oświetlonego obszaru i weź kilka próbek, by sprawdzić, czy się zgadzają.
HEX, RGB czy HSL — bierz to, co pasuje
Każda próbka daje Ci wszystkie trzy naraz, więc kopiujesz to, czego chce Twoje miejsce docelowe:
- HEX (
#3A7BD5) — domyślny w sieci. CSS, Figma, Canva, dokumenty marki. Kopiuj to, chyba że masz powód, by nie. - RGB (
rgb(58, 123, 213)) — wartości kanałów, przydatne, gdy narzędzie o nie prosi albo potrzebujesz przezroczystości przezrgba. - HSL (
hsl(215, 65%, 53%)) — barwa, nasycenie, jasność. Najlepsze, gdy chcesz dostosować kolor: rozjaśnić go na stan najechania, wyciszyć na wariant albo zbudować z niego skalę.
Ponieważ każda próbka niesie wszystkie trzy, nigdy nie próbkujesz ponownie tylko po to, by zmienić format.
Chwytanie kilku kolorów naraz
Logo rzadko jest jednym kolorem. Kliknij główny, akcent i kolor tekstu w jednym przebiegu — każdy piętrzy się na liście, więc możesz je porównać i skopiować jeden po drugim, zamiast ładować obraz trzy razy osobno.
Jeśli chcesz podsumowania kolorów całego obrazu, a nie konkretnych pikseli — ogólnej palety, z której zbudowane jest zdjęcie — to inne zadanie, a osobne narzędzie palety w img.diy automatycznie wyodrębnia dominujące kolory za Ciebie. Użyj tego próbnika, gdy znasz dokładne miejsce, którego chcesz; użyj narzędzia palety, gdy chcesz, by obraz scharakteryzowano za Ciebie.
Zostaje na Twoim urządzeniu
Obraz jest odczytywany lokalnie w Twojej przeglądarce z płótna — nic nie jest przesyłane, nie ma rejestracji, a po pierwszym załadowaniu działa offline. Więc niewydana makieta albo prywatny materiał klienta nigdy nie opuszcza Twojej maszyny tylko dlatego, że potrzebowałeś z niego jednego kodu HEX.
Załaduj obraz, najedź na piksel, kliknij i skopiuj kod.