Jak se barvy vybírají
Nástroj vytvoří malou kopii vašeho obrázku, nejvýše 160 pixelů na nejdelší straně, a spočítá každý pixel, který není průhledný. Poté seskupí podobné pixely pomocí shlukování k-means a uvede průměrnou barvu každé skupiny, od největší skupiny. Procento u každého vzorku udává, jak velkou část obrázku daná skupina pokrývá.
Výchozí bod je pevný, nikoli náhodný: začíná nejčastější barvou a pak postupně přidává barvu nejvzdálenější od těch, které už má. Stejný obrázek tak pokaždé dá stejnou paletu a malý výrazný akcent, třeba červené logo na bílé krabici, dostane vlastní vzorek, místo aby se vprůměroval do pozadí.
Zvolte 5 až 8 barev. Produktová fotka na jednoduchém pozadí obvykle potřebuje 5 nebo 6. Živá lifestylová fotka vypadá lépe s 8. Pokud má obrázek méně odlišných barev, než jste zadali, nástroj to oznámí a ukáže ty, které našel.
Jak číst matici kontrastu
Každá barva se spáruje s každou další, plus s čistou bílou a černou, a každá buňka ukazuje poměr kontrastu pro text v barvě řádku na pozadí v barvě sloupce. Poměr vychází z definice WCAG: (L1 + 0,05) / (L2 + 0,05), kde L1 a L2 jsou relativní jasy světlejší a tmavší barvy. Pohybuje se od 1:1 (dvakrát stejná barva) do 21:1 (černá na bílé).
Štítky odpovídají prahům, které stanovuje WCAG:
- AA: alespoň 4,5:1 pro běžný text a 3:1 pro velký text (kritérium 1.4.3).
- AAA: alespoň 7:1 pro běžný text a 4,5:1 pro velký text (kritérium 1.4.6).
- Velký text znamená alespoň 18 bodů nebo 14 bodů tučně (definice velkého písma podle WCAG).
Buňka označená AA velký vyhovuje pro velký nadpis, ale je příliš slabá pro popisek. Vysvětlení kritéria 1.4.3 od W3C také uvádí, že poměr se nemá zaokrouhlovat, takže 4,499:1 nesplňuje 4,5:1. Nástroj posuzuje přesné číslo a zobrazuje ho oříznuté na dvě desetinná místa, nikdy nezaokrouhlené nahoru.
Příklad s výpočtem
Řekněme, že fotka vám dá tmavě modrou #1a3c6e a krémovou #fdf6e3. Relativní jas tmavě modré vychází zhruba na 0,046 a krémové zhruba na 0,923. Poměr je (0,923 + 0,05) / (0,046 + 0,05), což je s těmito zaokrouhlenými hodnotami asi 10,1:1 a s přesnými asi 10,16:1. To splňuje AAA pro veškerý text, takže tmavě modrý text na krémové koncové kartě je bezpečný v jakékoli velikosti. Dejte na stejnou krémovou středně oranžovou jako #e07a2e a poměr klesne na 2,78:1, což nevyhovuje ani pro velký text. Oranžovou si schovejte pro tlačítko s černým textem (6,99:1, což je AA, ale jen těsně nedosahuje AAA), nebo pro tvar bez slov.
Použití exportu
Export do CSS je blok :root s vlastními vlastnostmi, --color-1 pro barvu pokrývající největší část obrázku a tak dál. JSON obsahuje pro každou barvu hex, RGB, HSL a její podíl na obrázku, takže se snadno vloží do souboru s designovými tokeny nebo předá skriptu. Proměnné si přejmenujte, jakmile zjistíte, která barva je pozadí, která text a která akcent.
Co tento nástroj nedělá
Nástroj neví, které barvy patří vaší značce. Fotka vašeho produktu na dřevěném stole bude zahrnovat i stůl. Pokud chcete jen barvy produktu, ořízněte ji nejdřív na produkt nebo obal. Nedokáže vám ani říct přesné tiskové barvy: čísla jsou pixely v souboru, po vašem fotoaparátu a případných úpravách, takže si je před zveřejněním ověřte podle své grafické příručky. A posuzuje pouze kontrast textu. WCAG má zvláštní pravidla pro ikony a prvky rozhraní, která tato matice nehodnotí.
Pokud to raději neděláte ručně
Hermoso je marketing na autopilota: prozkoumá reklamy, které už na vašem trhu fungují, vytvoří obrázkové a video reklamy odpovídající vaší značce, naplánuje příspěvky a spustí placené kampaně na vašich vlastních reklamních účtech. Když přidáte svou značku z vašeho webu, naučí se vaše produkty, logo a paletu a barvy titulků a koncových karet si můžete nastavit hex kódy. Funguje ve webové aplikaci nebo uvnitř Claude, ChatGPT a Cursor přes svůj MCP server.
Bezplatné nástroje: Průvodce velikostmi pro sociální sítě · Tvorba mřížky pro Instagram · Generátor Open Graph
Často kladené dotazy
Jak získám barevnou paletu z fotky?
Nahrajte fotku do nástroje a zvolte, kolik barev chcete, od 5 do 8. Nástroj seskupí podobné pixely a zobrazí průměrnou barvu každé skupiny jako HEX, RGB a HSL, od největší, s tlačítkem kopírování u každé.
Jaký poměr kontrastu potřebuji pro text?
WCAG 2.2 úroveň AA vyžaduje alespoň 4,5:1 pro běžný text a 3:1 pro velký text. Úroveň AAA vyžaduje 7:1 a 4,5:1. Velký text má alespoň 18 bodů, nebo 14 bodů tučně.
Je 4,49:1 dost blízko, aby prošlo AA?
Ne. W3C uvádí, že vypočtený poměr by se při porovnání s prahovou hodnotou neměl zaokrouhlovat, takže 4,499:1 nesplňuje 4,5:1. Nástroj posuzuje přesné číslo.
Proč dostanu pokaždé stejnou paletu?
Shlukování začíná z pevného bodu, nejčastější barvy, a poté přidává barvu nejvzdálenější od těch už zvolených. Neexistuje náhodný začátek, takže jeden obrázek vždy dává jednu odpověď.
Nahrává se můj obrázek?
Ne. Čte se vlastním čtečem souborů ve vašem prohlížeči a počítá se na plátně na vašem zařízení. Nic se nikam neodesílá ani neukládá.
Hermoso tvoří reklamy, plánuje příspěvky a vede kampaně. Začněte zdarma, 250+ získatelných bezplatných kreditů, bez karty.
Začít zdarma → Zobrazit ceny