Kapátko barev poskytuje přesný eyedropper nástroj na pixelové úrovni pro výběr barev z libovolného elementu na webové stránce — textu, pozadí, obrázků, gradientů nebo libovolného viditelného pixelu. Získejte přesnou hodnotu barvy současně ve formátech HEX, RGB a HSL, s lupovým náhledem pixelů pro přesné cílení. Dříve vybrané barvy jsou uloženy v pruhu historie pro rychlý přístup.
Extrakce přesných hodnot barev z webové stránky je běžný úkol — shoda barvy značky, reference na design nebo kontrola odstínu použitého na konkurenční stránce. DevTools prohlížeče zobrazují barvy v panelu Styly, ale pouze pro elementy s explicitními CSS vlastnostmi barev — nikoli pro obrázky, gradienty nebo zděděné barvy. Eyedropper Kapátka barev funguje na pixelové úrovni — čte skutečnou vykreslenou barvu jakéhokoli pixelu pod kurzorem bez ohledu na to, jak se tam ta barva dostala. Klikněte na modrou oblohu v heroickém obrázku, střed přechodu nebo poloprůhledný překryv a získejte přesnou hodnotu složené barvy. Lupy náhledový kroužek zobrazuje zvětšený pohled na okolní pixely, takže můžete cílit na přesný pixel, který chcete. Všechny tři výstupní formáty (HEX, RGB, HSL) jsou zobrazeny současně — kliknutím na libovolný formát ho zkopírujete. Vaše poslední výběry jsou uloženy v pruhu historie barev ve spodní části, takže se snadno vrátíte k dříve vybrané barvě.
Zvětšený kruhový náhled zobrazuje zvětšené pixely kolem kurzoru s nitkový kříž cílením pro přesný výběr pixelů. Vybírejte barvy z textu, pozadí, obrázků, gradientů, SVG nebo libovolného viditelného pixelu na stránce.
Každá vybraná barva je zobrazena ve všech třech formátech najednou: HEX (#7c3aed), RGB (rgb(124, 58, 237)) a HSL (hsl(262, 83%, 58%)). Žádné přepínání ani konvertování — všechny formáty jsou okamžitě dostupné.
Kliknutím na libovolný řádek formátu (HEX, RGB nebo HSL) okamžitě zkopírujete tuto konkrétní hodnotu do schránky. Krátká animace Zkopírováno potvrdí akci. Vložte přímo do CSS, designového nástroje nebo barevné specifikace.
Vaše nedávno vybrané barvy jsou uloženy ve vizuálním pruhu historie zobrazujícím vzorníky barev. Kliknutím na libovolný vzorník znovu vyberete tuto barvu a znovu uvidíte její hodnoty. Historie přetrvává během relace — vybírejte barvy z více stránek.
Vybraná barva je zobrazena jako velký vzorník nad hodnotami formátu, takže je snadné barvu vidět a ověřit. Vzorník je dostatečně velký pro zobrazení jemných odstínů, které by mohly vypadat identicky při menších velikostech.
Vybírá barvy z libovolného viditelného pixelu: CSS barvy, CSS gradienty, obrázky (PNG, JPG, SVG), elementy canvas, snímky videa, poloprůhledné překryvy (výběr složené barvy) a dokonce i iframy. Pokud to vidíte, můžete to vybrat.
Vyberte přesnou barvu značky z webové stránky společnosti pro zajištění, že váš design nebo obsah používá správný odstín. Získejte přesnou hodnotu HEX místo odhadování nebo prohledávání brandových směrnic.
Vybírejte barvy přímo z heroických obrázků, produktových fotografií nebo ilustrací. Extrahujte dominantní barvu z fotografie pro použití jako doplňkové pozadí v designu.
Specifikace návrhu říká, že tlačítko by mělo být #7c3aed. Vyberte barvu z implementovaného tlačítka pro ověření shody. Zachytí jemné barevné rozdíly, které jsou pouhým okem neviditelné.
Procházejte designové inspirační stránky a vybírejte barvy, které vás zaujmou. Pruh historie se ve vaší relaci buduje jako paleta barev — použijte ji jako výchozí bod pro vlastní barevné schéma.
Vybírejte barvy v různých bodech podél CSS gradientu pro zobrazení přesné barvy na každé pozici. Užitečné pro replikaci gradientů nebo pochopení toho, jak se míchají zastávky gradientu.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Kapátka barev. Kurzor se změní na eyedropper se zvětšeným náhledovým kroužkem.
Pohybujte kurzorem po stránce. Zvětšený náhled zobrazuje zvětšený pohled na pixely kolem kurzoru s nitkový kříž označujícím přesný cílový pixel.
Klikněte kdekoli na stránce pro výběr barvy v daném pixelu. Vzorník barvy, HEX, RGB a HSL hodnoty se okamžitě aktualizují.
Klikněte na řádek HEX, RGB nebo HSL pro zkopírování hodnoty do schránky. Krátce se zobrazí potvrzení Zkopírováno.
Pokračujte klikáním pro výběr více barev. Každý výběr je přidán do pruhu historie. Kliknutím na libovolný vzorník historie si barvu vybavíte.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
