Nejprve extrahujte příklad palety, poté použijte přesný výběr a ruční úpravy k určení, které barvy patří do vašeho vlastního projektu. Otevřít Výběr barev z obrázku.
Nahrajte a extrahujte výchozí paletu
Otevřete Image Color Picker a nahrajte jeden podporovaný obrázek, nebo vyzkoušejte ukázku. Automatická extrakce nahraje zdroj na server. Ukázka v tomto průvodci je collage-botanical.jpg, 1200 x 900 fotografie květin, listů a broskvového pozadí.
Ponechte Colors to extract na 6 a pro příklad vyberte Dominant. Dominant upřednostňuje hlavní barvy obrázku, zatímco Vibrant dává větší vliv barevným akcentům. Požadavek může použít 3 až 12 barev; obrázek s méně odlišnými viditelnými skupinami může vrátit méně.
Skutečný výsledek Dominant obsahuje #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Největší skupina je #E3B49F na přibližně 28.88% vzorkovaných viditelných pixelů. Extrakce použila 512 x 384 vzorek; tato procenta nejsou přesným sčítáním obrázku v plném rozlišení.
Barva palety může být průměrem blízkých barev. Vyberte konkrétní pixel, když potřebujete hodnotu jednoho malého detailu.
Vyberte a vylepšete jednotlivé barvy
Klikněte nebo klepněte na obrázek pro kontrolu pixelu pomocí lupy. Zaostřete obrázek a použijte šipky pro pohyb o jeden pixel, Shift plus šipku pro pohyb o deset, poté Enter pro výběr. Zkopírujte HEX, RGB nebo HSL pomocí příslušného tlačítka kopírování, nebo použijte Add to palette.
Vyberte vzorek pro změnu jeho hodnoty HEX nebo barvy, přesuňte jej doleva či doprava nebo jej odstraňte. Přidání vlastní barvy přijímá hodnotu HEX dle vašeho výběru. Uzamčení barvy zachová vybraný vzorek, když Obnovit paletu nebo změněné nastavení extrakce vygeneruje jinou počáteční paletu.
Vzorkování a průhlednost nabízí Zdrojovou barvu a Složení na pozadí. Zdrojová barva zahrnuje v případě potřeby krytí ve zkopírovaných kódech; Složení zobrazuje pixel smíchaný se zvoleným vzorkovacím pozadím. Samotné vzorky palety jsou neprůhledné hodnoty RGB. Upravené a vybrané barvy nemají odhadované zdrojové procento.
Obrázky dekódovatelné prohlížečem používají vzorky sRGB prohlížeče. Pokud je použit normalizovaný náhled, nástroj pro výběr výslovně označuje své barvy a souřadnice jako přibližné.
Příklad v tomto průvodci
Barvy k extrakci: 6; Dominantní; žádné ruční změny ani zámky; Uložit jako: PNG. Automatická extrakce vzorkovala 512 x 384 pixelů.
- Zdrojový obrázek
- 1200 x 900 px
- Extrahované barvy
- 6 neprůhledných barev
- Karta palety
- 600 x 500 px
- Staženo PNG
- 9,163 bajtů
Zkontrolujte pár textu a pozadí
Otevřete Kontrolu kontrastu barev. Nastavte Text a Pozadí pomocí ovládacích prvků barev, zadejte kódy HEX nebo použijte vybranou barvu pro obě strany. Živá ukázka textu vám umožní porovnat dvojici a poměr je doprovázen samostatnými výsledky pro Běžný AA, Běžný AAA, Velký AA a Velký AAA.
Zvolte dvojici pro zamýšlený účel, místo abyste předpokládali, že každou extrahovanou barvu lze použít jako text. Světle broskvová a světle fialová mohou na fotografii fungovat společně, zatímco jako kombinace textu a pozadí mohou být nevhodné.
Tento ovládací prvek kontroluje pouze danou dvojici barev z hlediska kontrastu textu. Nejedná se o úplný audit přístupnosti a nerozhoduje o tom, zda je typografie, interakce klávesnice nebo zbytek návrhu použitelný.
Vyhovující poměr kontrastu je užitečná kontrola, nikoli záruka, že celá stránka je přístupná.
Zkopírujte hodnoty nebo exportujte paletu
Pro rychlé předání zkopírujte jednotlivý kód nebo použijte Kopírovat barvy HEX palety. Pro soubor zvolte Uložit jako a vyberte Start. PNG vytvoří obrázek s popsanou paletou; SVG zachová vzorky a popisky jako vektorový obsah; CSS poskytuje číslované barevné proměnné; JSON obsahuje hodnoty HEX, RGB a HSL.
Neupravený šestibarevný příklad exportuje palette.png při 600 x 500 pixelech a 9,163 bajtech. Pořadí vzorků odpovídá paletě. Vaše konečná paleta může po úpravách obsahovat 1 až 12 barev, i když se automatický počáteční počet lišil.
Stáhněte před odchodem nebo obnovením stránky. Konečný export nahraje zdrojové a zvolené barvy pro zpracování na serveru. Vytvoří nový soubor palety a nepřebarvuje ani nenahrazuje původní fotografii.
PNG a SVG jsou pohodlné vizuální reference. CSS a JSON jsou užitečné, když další krok vyžaduje opakovaně použitelné hodnoty barev.
Časté dotazy
Vrací kapátko stejné barvy jako automatická extrakce?
Ne nutně. Vybraná hodnota popisuje konkrétní zdrojový nebo náhledový pixel. Automatická extrakce seskupuje vzorkované pixely a může vracet průměrné barvy.
Počítají se průhledné pixely?
Plně průhledné pixely jsou z extrakce vyloučeny. Částečně průhledné pixely mají sníženou váhu. Vzorkování zdroje může zobrazit průhlednost, ale exportované vzorníky palety jsou neprůhledné.
Co se stane se zamčenými barvami, když stránku obnovím?
Zamčené barvy zůstanou v paletě, zatímco nové extrahované barvy vyplní ostatní pozice. Ponechané nebo upravené barvě není přiřazeno žádné umělé procento obrázku.
Mohu to použít pro přesnou barvu značky?
Zadejte známou hodnotu HEX přímo nebo vyberte vhodný zdrojový pixel. Osvětlení fotografie, komprese, správa barev a normalizované náhledy mohou změnit vzorkované hodnoty, takže automatická paleta z fotografie není důkazem původní specifikace značky.
Vytvořte si paletu, kterou můžete použít ve svém dalším návrhu
Vyzkoušejte ukázku nebo použijte vlastní soubor a před sdílením zkontrolujte výsledek.
