Nástroj Výber farby z obrázka umožňuje používateľom nahrať grafický súbor z lokálneho zariadenia a presne analyzovať farebné hodnoty jednotlivých pixelov. Po načítaní obrázka je k dispozícii zväčšený pohľad prostredníctvom lupy, ktorý uľahčuje presné zameranie konkrétneho bodu. Nástroj okamžite poskytuje farebné vyjadrenie v modeloch HEX, RGB a HSL, pričom vybrané vzorky je možné ukladať do histórie a kopírovať ich pre ďalšie použitie v dizajne či vývoji webových aplikácií.
Spracovanie súborov a ochrana súkromia
Obrázok sa načítava priamo z vášho zariadenia a nikdy neopustí váš prehliadač. Na BroBroGo sa nič nenahráva. Celý proces dekódovania a analýzy pixelov prebieha lokálne v prostredí webového prehliadača používateľa.
Nástroj podporuje nasledujúce formáty a MIME typy súborov:
- PNG (
image/png) - JPG / JPEG (
image/jpeg) - WebP (
image/webp) - GIF (
image/gif) - AVIF (
image/avif) - HEIC / HEIF (
image/heic,image/heif)
Ak sa pokúsite nahrať nepodporovaný formát, zobrazí sa chybové hlásenie: „Tento typ súboru nie je podporovaný. Skúste obrázok vo formáte PNG, JPG, WebP, GIF, AVIF alebo HEIC.“ V prípade, že je súbor poškodený alebo ho prehliadač nedokáže spracovať, systém zobrazí upozornenie: „Tento obrázok sa nepodarilo otvoriť. Môže byť poškodený alebo v nepodporovanom formáte.“
Pre zachovanie optimálneho výkonu pri vykresľovaní platí pravidlo, že obrázky, ktorých najdlhšia strana presahuje 4096 pixelov, sú automaticky zmenšené.
Princíp fungovania a ovládanie rozhrania
Po úspešnom načítaní súboru sa zobrazí stavový riadok s textom: „Obrázok je pripravený — prejdite po ňom pre výber vzorky, kliknutím farbu uložíte.“ Nástroj automaticky zameria stredový pixel obrázka a okamžite zobrazí jeho súradnice a farebné hodnoty.
Používateľ môže ovládať zameriavač dvoma spôsobmi:
- Pohybom ukazovateľa myši: Presúvaním kurzora po ploche obrázka sa v reálnom čase menia zobrazované hodnoty pre pixel, ktorý sa nachádza presne pod stredom lupy.
- Klávesnicou: Pre detailnú prácu je možné posúvať zameriavací kríž pomocou smerových šípok na klávesnici o 1 pixel. Ak počas stláčania šípok podržíte kláves Shift, zameriavač sa posunie o 10 pixelov.
Kliknutím ľavým tlačidlom myši na obrázok alebo stlačením klávesu Enter či Space sa aktuálne zameraná farba uloží do histórie. Pri uložení sa zobrazí potvrdzujúca správa, napríklad: „Farba {hex} bola uložená do vášho výberu.“
Tlačidlo „Začať odznova“ slúži na kompletné vyčistenie pracovnej plochy. Kliknutím naň sa odstráni načítaný obrázok, vymaže sa celá história uložených farieb a nástroj sa vráti do pôvodného stavu.
Interpretácia farebných modelov a výstupy
Nástroj poskytuje informácie o troch základných parametroch snímaného bodu:
- Veľkosť: Rozmery načítaného obrázka v pixeloch.
- Pixel: Presné súradnice [X, Y] aktuálne zameraného bodu.
- Farebné modely:
- HEX: Šesťmiestny hexadecimálny kód (napr. #ffffff), ktorý sa najčastejšie používa v HTML a CSS.
- RGB: Hodnoty červenej (Red), zelenej (Green) a modrej (Blue) zložky v rozsahu od 0 do 255.
- HSL: Vyjadrenie farby pomocou odtieňa (Hue v stupňoch 0°–360°), sýtosti (Saturation v percentách) a jasu (Lightness v percentách).
Kliknutím na ktorúkoľvek zobrazenú hodnotu (HEX, RGB, HSL) sa daný text automaticky skopíruje do schránky zariadenia. Ak webový prehliadač z bezpečnostných dôvodov nepovolí prístup k schránke, zobrazí sa chybové hlásenie: „Nepodarilo sa skopírovať — váš prehliadač zablokoval prístup k schránke.“
Správa histórie a ukladanie vzoriek
História uložených farieb slúži ako rýchla paleta pre rozpracované projekty.
- Kapacita histórie je obmedzená na maximálne 12 položiek.
- Ak história neobsahuje žiadne položky, zobrazuje sa text: „Tu sa zobrazia uložené farby — kliknutím na vzorku ju znova načítate.“
- Kliknutím na ktorúkoľvek uloženú vzorku v histórii sa daná farba opätovne načíta do hlavného zobrazenia.
Vplyv polopriehľadnosti (Alpha kanál)
Nástroj analyzuje presnú hodnotu pixelu tak, ako je zapísaná v súbore. Ak pixel obsahuje informáciu o priehľadnosti, táto hodnota sa vyhodnocuje izolovane. To znamená, že polopriehľadný pixel sa načíta samostatne, bez ohľadu na to, aké pozadie sa nachádza pod ním.
Ak má pixel čiastočnú priehľadnosť, pod farebnými hodnotami sa zobrazí upozornenie vo formáte: „Alfa {n} % — tento pixel je čiastočne priehľadný.“ (kde {n} predstavuje konkrétnu úroveň nepriehľadnosti). V histórii uložených farieb sa vzorky s rovnakými hodnotami RGB, ale odlišnými hodnotami alfa kanála, ukladajú ako samostatné, nezávislé položky.
Vplyv kompresie a vyhladzovania na presnosť
Pri analýze farieb z digitálnych obrázkov je potrebné brať do úvahy technické špecifiká jednotlivých formátov:
| Formát / Zdroj | Technický vplyv na pixely | Dôsledok pre výber farby |
|---|---|---|
| JPEG | Stratová kompresia, vytváranie kompresných artefaktov okolo hrán. | Susedné pixely môžu mať mierne pozmenené hodnoty oproti pôvodnej predlohe. |
| Snímky obrazovky | Vyhladzovanie hrán (anti-aliasing) na rozhraní textu a grafiky. | Prechody medzi farbami obsahujú prechodné odtiene, ktoré nevznikli zámerným výberom dizajnéra. |
| Bezstratové formáty (PNG) | Presné zachovanie hodnôt každého pixelu bez kompresných zmien. | Ideálny zdroj pre presné kopírovanie farieb z dizajnových predlôh a logotypov. |
Nástroj vždy zobrazuje presnú hodnotu pixelu, ktorá je fyzicky zapísaná v súbore, bez ohľadu na to, či bola ovplyvnená kompresnými algoritmami pri ukladaní obrázka.
Často kladené otázky
Ako vyberiem farbu z obrázka?
Presuňte ukazovateľ nad obrázok a na paneli sa zobrazí farba pod ním spolu s lupou, ktorá vám umožní zamerať presný pixel. Kliknutím uložíte farbu do svojho výberu. Môžete tiež kliknúť na obrázok, pohybovať zameriavačom pomocou šípok a stlačiť Enter.
Ktoré formáty farieb získam?
Každý pixel, z ktorého odoberiete vzorku, sa zobrazí súčasne vo formátoch HEX, RGB a HSL. Kliknutím na ľubovoľnú hodnotu ju skopírujete a môžete ju priamo vložiť do CSS alebo grafického nástroja.
Prečo vybraná farba nie vždy zodpovedá mojim očakávaniam?
Získate presnú hodnotu pixelu uloženú v obrázku. Ak ide o formát JPEG alebo snímku obrazovky, kompresia a vyhladzovanie (anti-aliasing) už mohli okolité pixely mierne posunúť. Polopriehľadný pixel sa navyše načíta samostatne, bez ohľadu na to, čo sa nachádza za ním.