CodeKitHubCo je tento nástroj?
Průměrná barva je aritmetický průměr hodnot červené, zelené a modré složky každého pixelu — jedna smíchaná barva reprezentující celkový tón obrázku, která však může vypadat kalně, pokud obrázek obsahuje velmi odlišně barevné oblasti.
Dominantní barvy jsou něco jiného: tento nástroj seskupuje podobné barvy pixelů do košíků (kvantizací každého kanálu RGB), počítá, kolik pixelů spadá do každého košíku, a vrací ty nejčastější jako samostatné vzorky — blíže tomu, co by člověk nazval „hlavní barvy tohoto obrázku“, než jedinému zprůměrovanému mixu.
Proč ho používat?
- Získejte z jednoho nahrání jak průměrnou barvu, tak skutečnou vícebarevnou paletu, ne jen jedno číslo.
- Získejte použitelnou barevnou paletu z fotografie, screenshotu nebo loga pro váš designový projekt.
- Kliknutím na kterýkoli vzorek okamžitě zkopírujete jeho přesný HEX kód.
- Běží zcela ve vašem prohlížeči — obrázek je čten lokálně přes canvas a nikdy nikam nahráván.
- Zdarma, okamžité, bez účtu, bez omezení velikosti souboru nad rámec limitů samotného prohlížeče.
Jak se používá
- Klikněte na tlačítko nahrání a vyberte obrázek ze svého zařízení.
- Průměrná barva a paleta dominantních barev se zobrazí automaticky — není třeba klikat na žádné další tlačítko.
- Kliknutím na kterýkoli vzorek (průměrnou barvu nebo libovolnou barvu z palety) zkopírujete jeho HEX kód.
Příklad
Vstup
Fotografie západu slunce s oranžovou oblohou a tmavě modrými siluetamiVýstup
Průměrná barva: tlumený hnědooranžový mix · Dominantní barvy: jasně oranžová, tmavě červená, téměř černá, bledě žlutá (jako samostatné odlišné vzorky)Toto je přesně případ, kdy se průměrná a dominantní barva liší nejvíce — průměr smíchá teplé a studené tóny do kalného odstínu, zatímco dominantní paleta je zachovává jako rozpoznatelně oddělené barvy.
Časté dotazy
Proč je průměrná barva tak odlišná od jakékoli barvy, která se v obrázku skutečně vyskytuje?
Zprůměrování matematicky smíchá všechny pixely dohromady — pokud obrázek obsahuje jasně oranžové i tmavě modré oblasti, průměr skončí v kalně hnědé barvě, která nemusí vizuálně nikde v původní fotografii existovat. Toto je očekávané chování skutečného průměru, nikoli chyba; pokud chcete barvy, které se v obrázku skutečně objevují, použijte místo toho paletu dominantních barev.
Nahrává se můj obrázek na server?
Ne. Obrázek je čten přímo vaším prohlížečem pomocí Canvas API a veškerá analýza barev probíhá lokálně v JavaScriptu. Nic se nikdy neodesílá po síti.
Kolik dominantních barev nástroj vrací?
Až 8, seřazených podle počtu pixelů odpovídajících každému barevnému košíku, nejčastější první. Pokud je obrázek barevně velmi jednotný, může se zobrazit méně než 8 odlišných košíků.
Počítá se s průhlednými pixely v PNG?
Ne — pixely s neprůhledností nižší než 50 % jsou vyloučeny jak z výpočtu průměrné, tak dominantní barvy, takže průhledné pozadí nezkreslí výsledky směrem k barvě, která jím prosvítá.