Jak wybrać dokładny kolor z obrazu: HEX, RGB i HSL

Aby odczytać dokładny kolor z obrazu, sprawdź wartość jednego piksela zamiast oceniać go na oko. Otwórz zdjęcie w pipecie do wybierania kolorów, najedź kursorem na wybrane miejsce, kliknij i skopiuj kod HEX. Odczyt to zapisana wartość tego piksela, więc za każdym razem, gdy wybierzesz to samo miejsce w tym samym pliku, otrzymasz ten sam wynik.

Pipeta do wybierania kolorów z obrazuPotrzebuję dokładnego kodu koloruZrób to za darmo

Co zapisuje piksel

Każdy piksel to niewielki kwadrat koloru. Na ekranie lub w pliku graficznym jest zapisany jako trzy liczby: dla czerwieni, zieleni i błękitu, każda z zakresu od 0 do 255. Czysta czerwień to 255, 0, 0. Te trzy liczby niosą tę samą informację w każdym formacie, dlatego jeden kolor można zapisać na kilka sposobów.

HEX, RGB i HSL

• HEX zapisuje każdą liczbę w systemie szesnastkowym, dwa znaki na kanał. #FF0000 to czysta czerwień. Strony internetowe, CSS i większość narzędzi graficznych używają tego zapisu.
• RGB zapisuje te same liczby w systemie dziesiętnym, jako rgb(255, 0, 0). To ten sam kolor co kod HEX.
• HSL opisuje kolor tak, jak o nim mówimy. Odcień to kąt na kole barw, nasycenie to siła koloru, a jasność to to, jak jasny lub ciemny jest kolor. hsl(0, 100%, 50%) to czysta czerwień.

Używaj HEX, gdy wklejasz kolor do kodu, RGB, gdy narzędzie o niego prosi, a HSL, gdy chcesz jaśniejszej lub ciemniejszej wersji tego samego odcienia. Zmiana samej jasności w HSL zachowuje odcień, a przy HEX zrobienie tego ręcznie jest trudniejsze. Aby sprawdzić kontrast między dwoma kolorami, zobacz HEX, RGB, HSL, CMYK i kontrast.

Oto kolor użyty w arkuszu stylów:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Dlaczego kod może nie zgadzać się z ekranem

• Zdjęcie jest skompresowane. JPEG oszczędza miejsce, wygładzając drobne szczegóły, dlatego piksele przy krawędzi mogą nieco różnić się od koloru widocznego w środku obszaru.
• Krawędzie się mieszają. Tam, gdzie spotykają się dwa kolory, piksele pomiędzy nimi są mieszaniną. Nie są samodzielnym kolorem.
• Profile kolorów się różnią. Pipeta odczytuje wartości, które przeglądarka dekoduje w przestrzeni sRGB. Zdjęcie zapisane z szerokogamutowym profilem może wyglądać inaczej w innych programach.
• Skalowanie łączy piksele. Zrzut ekranu wykonany przy skalowanym rozmiarze wyświetlacza może zawierać wymieszane piksele. Jeśli to możliwe, rób zrzut w pełnym rozmiarze.
• Bardzo duże obrazy są odczytywane z kopii. Obrazy dłuższe niż 6000 pikseli po dłuższym boku są odczytywane z kopii o wymiarze 6000 pikseli, więc pojedynczy piksel może się trochę różnić od pliku w pełnym rozmiarze.

Wybieraj ze środka jednolitego obszaru

Znajdź obszar jednego koloru, a potem przesuń się na jego środek. Lupa pokazuje 11 na 11 pikseli wokół kursora, dzięki czemu widzisz, czy miejsce jest wymieszane, czy jednolite. Za pomocą klawiatury przesuwaj celownik o jeden piksel strzałkami albo o dziesięć, trzymając Shift, a Enter wybierze kolor. Przed skopiowaniem sprawdź odczyt.

Użyj palety do zestawu kolorów

Na zdjęciu rzadko interesuje nas tylko jeden kolor. Paleta pokazuje do sześciu jego głównych kolorów. Działa tak, że zaokrągla każdy piksel do 16 poziomów na kanał, zlicza grupy i zachowuje najczęstsze grupy, które różnią się od siebie. Każda próbka pokazuje średnią swojej grupy. Kliknij próbkę, aby skopiować jej kod HEX. Traktuj paletę jako punkt wyjścia, bo to średnia, a nie zmierzony kolor marki.

Konwersja między formatami

Jeśli narzędzie graficzne wymaga innego formatu, wklej kod HEX do konwertera kolorów. Przelicza on między HEX, RGB i HSL bez zmiany koloru, więc wynik zgadza się z wybranym kodem.

Ostatnie wybory i prywatność

Narzędzie zachowuje Twoje ostatnie wybory na stronie, abyś mógł je porównać. Są przechowywane wyłącznie w pamięci tej karty i znikają po jej zamknięciu. Sam obraz jest odczytywany w przeglądarce i nigdy nie trafia na serwer.

Jak to zrobić w fixmint

1. Otwórz pipetę do wybierania kolorów z obrazu i przeciągnij tam zdjęcie.
2. Najedź kursorem na wybrane miejsce. Możesz też kliknąć obraz i strzałkami przesuwać celownik o jeden piksel, trzymając Shift dla dziesięciu pikseli.
3. Kliknij lub naciśnij Enter, aby wybrać kolor. Przed skopiowaniem sprawdź odczyt.
4. Użyj przycisku Kopiuj obok HEX, RGB lub HSL, aby skopiować potrzebną wartość.
5. Jeśli narzędzie graficzne wymaga innego formatu, wklej wartość do konwertera kolorów.

Szybkie odpowiedzi

Dlaczego kolor wygląda inaczej na moim ekranie? Ekran pokazuje zarządzaną kolorem, przeskalowaną wersję pliku. Wybierz kolor ze środka jednolitego obszaru i porównaj kod HEX z dobrze znaną próbką.

Który format powinienem skopiować? HEX do stron internetowych i większości narzędzi graficznych. RGB lub HSL używaj wtedy, gdy narzędzie tego wymaga.

Czy narzędzie wysyła mój obraz? Nie. Obraz jest dekodowany i odczytywany wyłącznie w Twojej przeglądarce.