Zachytit barvu pixelu z obrázku

Co je color picker obrázku?

Color picker (v češtině kapátko barev nebo zachycení barvy) je nástroj, který vrací přesnou hodnotu vybraného pixelu na obrázku. Nahrajete fotku, kliknete na bod, který vás zajímá, a nástroj vrátí přesnou barvu ve formě HEX, RGB a HSL. Je to webový ekvivalent kapátka v designových programech jako Photoshop, GIMP nebo Figma.

Náš nástroj funguje přímo ve vašem prohlížeči. Nahrajete svůj obrázek, zobrazí se na stránce, a stačí kliknout na pixel pro získání jeho barvy. Čtení pixelu probíhá na straně klienta přes canvas API, bez round-tripu na server, bez rekomprese a bez odesílání obrázku po síti pro selekci.

Rozdíl od extraktoru barev

Náš extraktor barev a náš color picker odpovídají na dvě odlišné potřeby, které je užitečné dobře rozlišovat:

• Extraktor analyzuje celý obrázek a vrací dominantní paletu (5, 8 nebo 10 nejvíce zastoupených odstínů). Je to nástroj volby pro syntézu barevné atmosféry fotky, vytvoření mood boardu nebo napájení grafické charty.
• Color picker vrací přesnou barvu konkrétního pixelu, který označíte. Je to nástroj volby, když víte, kam se podívat: logo v screenshotu, přesný odstín gradientu, referenční tapeta.

Extraktor pracuje s miliony pixelů a aplikuje clusterizaci pro vynoření skupin barev; picker se spokojí se čtením RGB hodnoty uložené na pozici, kterou kliknete. První zobecňuje, druhý je chirurgický.

Jak to funguje technicky

Digitální obrázek je mřížka pixelů, každý pixel nese tři RGB kanály (červený, zelený, modrý) obvykle kódované na 8 bitech, tedy 256 hodnot na kanál. Když kliknete na bod, nástroj:

1. Vykreslí váš obrázek do canvas elementu, zachovávajíc jeho nativní rozměry (se stropem 1500 pixelů na šířku pro pohodlí na obrazovce).
2. Konvertuje pozici kliknutí na nativní souřadnice obrázku, kompenzujíc změnu velikosti zobrazení prohlížečem.
3. Čte RGBA hodnotu pixelu přes API canvas.getContext('2d').getImageData(x, y, 1, 1).
4. Zobrazí náhled vybrané barvy. Při odeslání server čte stejnou pozici s PHP GD a počítá definitivní HEX, RGB a HSL kódy.

HSL hodnota je počítána naší konverzní službou barev, identickou s tou, kterou používá náš převodník barev. Konzistence od konce ke konci, získáte stejné hodnoty jako kdybyste zadali HEX kód v převodníku.

Typické případy použití

• Reprodukce barvy ze screenshotu: máte screenshot stránky, chcete přesně přebrat odstín tlačítka nebo pozadí. Picker vám dá přesný HEX kód k zpětnému vložení do CSS.
• Identifikace barvy charty na fotce: prezentační PDF, stránka časopisu, produktový vizuál. Není už potřeba žádat o chartu, čtete barvu přímo.
• Reverse engineering vizuální identity: zachycení přesné modré loga, růžové banneru, oranžové výzvy k akci.
• Inspirace a design watch: vidíte fotku, která se vám líbí, získáváte přesný odstín květiny, zdi, plakátu.
• Front-end debug: screenshot bugu ukazuje nesprávnou barvu, čtete skutečnou hodnotu pro porovnání s očekávanou v mockupu.
• Vytvoření palety z reference: pickerujete několik bodů na stejném obrázku pro rekonstrukci personalizované palety.

Jak používat color picker

1. Nahrajte svůj obrázek (PNG, JPG, GIF, BMP, WebP, až 20 MB).
2. Náhled se zobrazí na stránce. Klikněte na pixel pro získání jeho barvy.
3. Zaměřovač označuje kliknutou pozici a náhled barvy se objeví vedle.
4. Potvrďte tlačítkem odeslání pro získání finálního renderu: barevný čtverec, HEX, RGB a HSL kód.
5. Pro transformaci hodnoty mezi formáty projděte přes náš převodník barev.

Často kladené otázky

Ukázka požadavku

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

Vstupní schéma

tento nástroj očekává soubor - použijte Content-Type multipart/form-data místo application/json

Koncové body

• GET https://cdrn.fr/api/v1/tools - vypíše všechny dostupné nástroje
• GET https://cdrn.fr/api/v1/tools/color-picker - získá schéma tohoto nástroje
• POST https://cdrn.fr/api/v1/tools/color-picker/execute - spustí tento nástroj s JSON payloadem