CDRN

Pobierz kolor piksela z obrazu

  • Panel
  • Dokumentacja
  • API
pobiera dokładny kolor piksela z twojego obrazu (RGB, HSL, szesnastkowy) po kliknięciu wybranego punktu

Czym jest color picker obrazu?

Color picker (po polsku próbnik kolorów lub kroplomierz) to narzędzie, które zwraca dokładną wartość piksela wybranego na obrazie. Ładujesz zdjęcie, klikasz na interesujący cię punkt, a narzędzie zwraca precyzyjny kolor w postaci HEX, RGB i HSL. Jest to webowy odpowiednik kroplomierza w programach projektowych takich jak Photoshop, GIMP czy Figma.

Nasze narzędzie działa bezpośrednio w twojej przeglądarce. Wgrywasz obraz, jest wyświetlany na stronie i wystarczy kliknąć piksel, aby odzyskać jego kolor. Odczyt piksela odbywa się po stronie klienta poprzez API canvas, bez żądania do serwera, bez ponownej kompresji i bez wysyłania obrazu w sieci do wyboru.

Różnica w stosunku do ekstraktora kolorów

Nasz ekstraktor kolorów i nasz color picker odpowiadają na dwie odrębne potrzeby, które warto dobrze rozróżnić:

  • Ekstraktor analizuje cały obraz i zwraca dominującą paletę (5, 8 lub 10 najczęściej reprezentowanych odcieni). Jest to narzędzie z wyboru do syntezy atmosfery kolorystycznej zdjęcia, tworzenia mood boardu lub zasilania identyfikacji wizualnej.
  • Color picker zwraca dokładny kolor konkretnego piksela, który wskazujesz. Jest to narzędzie z wyboru, gdy wiesz, gdzie patrzeć: logo na zrzucie, konkretny odcień gradientu, referencyjna tapeta.

Ekstraktor pracuje na milionach pikseli i stosuje klasteryzację, aby wydobyć grupy kolorów, picker tylko odczytuje wartość RGB zapisaną w pozycji, którą klikasz. Pierwszy uogólnia, drugi jest chirurgiczny.

Jak to działa, technicznie

Obraz cyfrowy to siatka pikseli, każdy piksel niesie trzy kanały RGB (czerwony, zielony, niebieski) zakodowane zazwyczaj na 8 bitach, czyli 256 wartości na kanał. Gdy klikasz w punkt, narzędzie:

  1. Rysuje twój obraz w elemencie canvas, zachowując jego natywne wymiary (z limitem 1500 pikseli szerokości, aby pozostać wygodnym dla ekranu).
  2. Konwertuje pozycję kliknięcia na natywne współrzędne obrazu, kompensując zmianę rozmiaru wyświetlania przeglądarki.
  3. Odczytuje wartość RGBA piksela przez API canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Wyświetla podgląd koloru pickera. Po wysłaniu serwer odczytuje tę samą pozycję za pomocą PHP GD i oblicza ostateczne kody HEX, RGB i HSL.

Wartość HSL jest obliczana przez naszą usługę konwersji kolorów, identyczną z tą, której używa nasz konwerter kolorów. Spójność od końca do końca, otrzymujesz te same wartości, jakbyś wpisał kod HEX w konwerterze.

Typowe przypadki użycia

  • Odtworzenie koloru ze zrzutu ekranu: masz zrzut strony i chcesz dokładnie powtórzyć odcień przycisku lub tła. Picker daje ci precyzyjny kod HEX do wklejenia w CSS.
  • Identyfikacja koloru identyfikacji wizualnej na zdjęciu: PDF prezentacji, strona magazynu, wizualizacja produktu. Nie musisz prosić o identyfikację, odczytujesz kolor bezpośrednio.
  • Inżynieria odwrotna identyfikacji wizualnej: pobranie dokładnego niebieskiego z logo, różowego z banera, pomarańczowego z call to action.
  • Inspiracja i nadzór projektowy: widzisz zdjęcie, które ci się podoba, pobierasz dokładny odcień kwiatu, ściany, plakatu.
  • Debugowanie front-end: zrzut błędu pokazuje niepoprawny kolor, odczytujesz rzeczywistą wartość, aby porównać ją z oczekiwaną w makiecie.
  • Tworzenie palety z referencji: pickujesz kilka punktów tego samego obrazu, aby zrekonstruować spersonalizowaną paletę.

Jak korzystać z color pickera

  1. Prześlij obraz (PNG, JPG, GIF, BMP, WebP, do 20 MB).
  2. Podgląd wyświetla się na stronie. Kliknij piksel, aby odzyskać jego kolor.
  3. Celownik zaznacza kliknięte miejsce, a podgląd koloru pojawia się obok.
  4. Potwierdź przyciskiem wysyłania, aby uzyskać finalny rezultat: kolorowy kwadrat, kod HEX, RGB i HSL.
  5. Aby przekształcić wartość między formatami, użyj naszego konwertera kolorów.

Najczęściej zadawane pytania

Jaka jest różnica między HEX, RGB a HSL?

To trzy reprezentacje tego samego koloru. HEX (#ff0000) to najczęściej używany format w CSS. RGB wyraża trzy kanały czerwony / zielony / niebieski w wartościach 0-255. HSL (Hue, Saturation, Lightness) jest bardziej intuicyjny do regulacji odcienia: jest to format preferowany, gdy chcesz przyciemnić, odbarwić lub zmodyfikować kolor bez zmiany podstawowego odcienia.

Dlaczego moje kliknięcie nie zwraca dokładnie oczekiwanego koloru?

W obszarze gradientu dwa sąsiednie piksele mogą mieć bardzo różne wartości. Ponadto obrazy JPG są kompresowane stratnie: kolor piksela może nieznacznie różnić się od oryginału. Dla wiarygodnych kodów kolorów preferuj PNG lub nieskompresowane ponownie obrazy.

Czy moje współrzędne są współrzędnymi ekranu czy obrazu?

Współrzędnymi oryginalnego obrazu. Nasz skrypt JavaScript automatycznie konwertuje pozycję kliknięcia (w pikselach ekranu) na pozycję w natywnym obrazie. Jeśli twój obraz ma 4000x3000 i wyświetla się jako 800x600, kliknięcie pośrodku zwróci ci (2000, 1500), a nie (400, 300).

Czy picker działa z obrazami przezroczystymi?

Tak. Jeśli klikniesz na przezroczysty piksel, odzyskasz kolor RGB zapisany w tym miejscu (często biały lub czarny w zależności od oryginalnego edytora). Sama przezroczystość (kanał alfa) nie jest zwracana w wyniku, aby przeanalizować kanał alfa, otwórz obraz w edytorze graficznym.

Jaki rozmiar obrazu jest akceptowany?

Do 20 MB, formaty PNG, JPG, GIF, BMP i WebP. Bardzo duże obrazy są wyświetlane do 1500 pikseli szerokości maksymalnie, aby pozostały wygodne dla ekranu, ale odczytany kolor pozostaje kolorem oryginalnego piksela, bez ponownego próbkowania.

Czy moje obrazy są przechowywane na serwerze?

Nie. Selekcja odbywa się w twojej przeglądarce. W momencie wysłania plik jest przetwarzany w locie, aby potwierdzić kolor żądanego piksela, a następnie plik tymczasowy jest usuwany. Żaden obraz nie jest przechowywany, indeksowany ani udostępniany.

Co się stanie, jeśli JavaScript jest wyłączony?

Klasyczne wysłanie formularza pozostaje możliwe. Współrzędne x i y są obsługiwane przez ukryte pola, które JavaScript wypełnia przy kliknięciu. Bez JavaScript te pola pozostają puste i formularz zasygnalizuje, że brakuje pozycji, ale sam obraz jest przesyłany na serwer do przetwarzania.

Przykładowe zapytanie

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -F "image=@/path/to/file" \
  -F "x=..." \
  -F "y=..."

Schemat wejściowy

Pole Typ Wymagane Domyślnie
image file ✓ –
x string – –
y string – –

to narzędzie wymaga pliku - użyj Content-Type multipart/form-data zamiast application/json

Punkty końcowe

  • GET https://cdrn.fr/api/v1/tools - lista wszystkich dostępnych narzędzi
  • GET https://cdrn.fr/api/v1/tools/color-picker - zwraca schemat dla tego narzędzia
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - uruchamia to narzędzie z payloadem JSON