Najprv extrahujte príklad palety, potom použite presný výber a manuálne úpravy na rozhodnutie, ktoré farby patria do vášho vlastného projektu. Otvoriť Výber farieb z obrázka.
Nahrajte a extrahujte štartovaciu paletu
Otvorte Image Color Picker a nahrajte jeden podporovaný obrázok alebo vyskúšajte vzorku. Automatická extrakcia nahrá zdroj na server. Vzorka v tomto sprievodcovi je collage-botanical.jpg, 1200 x 900 fotografia kvetov, listov a broskyňového pozadia.
Ponechajte Colors to extract na 6 a pre príklad vyberte Dominant. Dominant uprednostňuje hlavné farby obrázka, zatiaľ čo Vibrant dáva väčší vplyv farebným akcentom. Požiadavka môže použiť 3 až 12 farieb; obrázok s menej odlišnými viditeľnými skupinami môže vrátiť menej.
Skutočný výsledok Dominant obsahuje #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Najväčšia skupina je #E3B49F pri približne 28.88% vzorkovaných viditeľných pixelov. Extrakcia použila 512 x 384 vzorku; tieto percentá nie sú presným sčítaním obrázka v plnom rozlíšení.
Farba palety môže byť priemerom blízkych farieb. Vyberte konkrétny pixel, keď potrebujete hodnotu jedného malého detailu.
Vyberte a vylepšite jednotlivé farby
Kliknite alebo klepnite na obrázok, aby ste skontrolovali pixel pomocou lupy. Zaostrite obrázok a použite klávesy so šípkami na pohyb o jeden pixel, Shift plus šípka na pohyb o desať, potom Enter na výber. Skopírujte HEX, RGB alebo HSL pomocou príslušného tlačidla kopírovania alebo použite Add to palette.
Vyberte vzorkovník na zmenu jeho hodnoty HEX alebo farby, presuňte ho doľava alebo doprava, prípadne ho odstráňte. Pridanie vlastnej farby akceptuje vami zvolenú hodnotu HEX. Uzamknutie farby zachová vybraný vzorkovník, keď Obnovenie palety alebo zmenené nastavenie extrakcie vygeneruje inú počiatočnú paletu.
Vzorkovanie a priehľadnosť ponúka Zdrojovú farbu a Zloženie na pozadí. Zdrojová farba zahŕňa nepriehľadnosť v skopírovaných kódoch, ak je to relevantné; Zloženie zobrazuje pixel zmiešaný s vybraným pozadím vzorky. Samotné vzorkovníky palety sú nepriehľadné hodnoty RGB. Upravené a vybrané farby nemajú odhadované percento zdroja.
Obrázky dekódovateľné prehliadačom používajú vzorky sRGB prehliadača. Ak sa použije normalizovaný náhľad, nástroj na výber farieb explicitne označuje svoje farby a súradnice ako približné.
Príklad v tejto príručke
Farby na extrakciu: 6; Dominantné; žiadne manuálne zmeny ani zámky; Uložiť ako: PNG. Automatická extrakcia vzorkovala 512 x 384 pixelov.
- Zdrojový obrázok
- 1200 x 900 px
- Extrahované farby
- 6 nepriehľadných farieb
- Karta palety
- 600 x 500 px
- Stiahnuté PNG
- 9,163 bajtov
Skontrolujte pár textu a pozadia
Otvorte Kontrolu kontrastu farieb. Nastavte Text a Pozadie pomocou ovládacích prvkov farieb, zadajte kódy HEX alebo použite vybranú farbu pre ktorúkoľvek stranu. Živá ukážka textu vám umožní porovnať dvojicu a pomer je sprevádzaný samostatnými výsledkami pre Normálny AA, Normálny AAA, Veľký AA a Veľký AAA.
Vyberte dvojicu na zamýšľaný účel namiesto predpokladu, že každú extrahovanú farbu možno použiť ako text. Svetlá broskyňová a svetlá fialová môžu na fotografii fungovať spolu, zatiaľ čo tvoria zlú kombináciu textu a pozadia.
Tento ovládací prvok kontroluje iba túto dvojicu farieb z hľadiska kontrastu textu. Nie je to kompletný audit prístupnosti a nerozhoduje o tom, či je typografia, interakcia s klávesnicou alebo zvyšok dizajnu použiteľný.
Vyhovujúci kontrastný pomer je užitočná kontrola, nie záruka, že celá stránka je prístupná.
Skopírujte hodnoty alebo exportujte paletu
Pre rýchle odovzdanie skopírujte jednotlivý kód alebo použite Kopírovať farby palety HEX. Pre súbor zvoľte Uložiť ako a vyberte Štart. PNG vytvorí obrázok s označenou paletou; SVG zachová vzorkovníky a štítky ako vektorový obsah; CSS poskytuje číslované farebné premenné; JSON obsahuje hodnoty HEX, RGB a HSL.
Neupravený šesťfarebný príklad exportuje palette.png pri 600 x 500 pixeloch a 9,163 bajtoch. Poradie vzorkovníkov zodpovedá palete. Vaša finálna paleta môže po úprave obsahovať 1 až 12 farieb, aj keď bol automatický počiatočný počet iný.
Stiahnite pred odchodom alebo obnovením. Finálny export nahrá zdroj a vybrané farby na spracovanie na serveri. Vytvorí nový súbor palety a neprefarbuje ani nenahrádza pôvodnú fotografiu.
PNG a SVG sú pohodlné vizuálne referencie. CSS a JSON sú užitočné, keď ďalší krok vyžaduje opakovane použiteľné farebné hodnoty.
Časté otázky
Vráti kvapkadlo rovnaké farby ako automatická extrakcia?
Nie nevyhnutne. Vybraná hodnota opisuje konkrétny zdrojový alebo náhľadový pixel. Automatická extrakcia zoskupuje vzorkované pixely a môže vrátiť spriemerované farby.
Počítajú sa priehľadné pixely?
Úplne priehľadné pixely sú z extrakcie vylúčené. Čiastočne priehľadné pixely majú zníženú váhu. Vzorkovanie zdroja môže ukázať nepriehľadnosť, ale exportované vzorkovníky palety sú nepriehľadné.
Čo sa stane so zamknutými farbami, keď obnovím stránku?
Zamknuté farby zostávajú v palete, zatiaľ čo nové extrahované farby vyplnia ostatné pozície. Zachovanej alebo upravenej farbe nie je priradené vymyslené percento obrázka.
Môžem to použiť pre presnú farbu značky?
Zadajte známu hodnotu HEX priamo alebo vyberte vhodný zdrojový pixel. Osvetlenie fotografie, kompresia, správa farieb a normalizované náhľady môžu zmeniť vzorkované hodnoty, takže automatická paleta fotografie nie je dôkazom pôvodnej špecifikácie značky.
Vytvorte si paletu, ktorú si môžete vziať do svojho ďalšieho dizajnu
Vyskúšajte ukážku alebo použite vlastný súbor a pred zdieľaním skontrolujte výsledok.
