Kapátko online: barvy a paleta z obrázku

Zatím není co exportovat.

Jak vytáhnout barvy z obrázku

1. Nahrajte obrázek přetažením nebo výběrem z disku.
2. Prohlédněte si paletu, kterou nástroj sestaví. U každé barvy uvidíte, jakou část plochy zabírá.
3. Klikněte kapátkem do obrázku, když potřebujete barvu konkrétního bodu.
4. Posuvníkem změňte počet barev v paletě, přepínačem přesnost výpočtu.
5. Zkopírujte jednotlivý kód kliknutím, nebo exportujte celou paletu jako CSS, SCSS, HEX či JSON.

Co znamená kód barvy

Každá barva na obrazovce se skládá ze tří složek: červené, zelené a modré, každá v rozsahu 0 až 255. Zápis HEX je totéž šestnáctkově, takže #FF0000 znamená plnou červenou a žádnou zelenou ani modrou. Bílá je #FFFFFF, černá #000000.

Nástroj ukáže u každé barvy všechny tři zápisy. HEX se hodí do CSS a do grafických programů. RGB použijete v JavaScriptu a všude, kde potřebujete jednotlivé složky zvlášť. HSL je nejpraktičtější ve chvíli, kdy chcete barvu jen ztmavit nebo odbarvit. Mezi zápisy jedné barvy převádí převodník barev.

Jak nástroj vybírá dominantní barvy

Fotka o rozměrech 1920 × 1080 má přes dva miliony pixelů a klidně sto tisíc různých odstínů. Vypsat je všechny nemá smysl, takže se prostor barev postupně dělí napůl vždy v místě, kde leží prostřední hodnota, aby v obou polovinách skončil stejný počet pixelů. Dělení se opakuje, dokud nevznikne tolik skupin, kolik barev jste si vyžádali, a z každé skupiny se pak vezme průměr. Metoda se jmenuje median cut.

Procento u každé barvy říká, jakou část obrázku ta skupina zabírá, a součet vždy dá sto procent. Přepínač Přesná spustí navíc dopočet, který hranice skupin ještě zpřesní. U fotek s jemnými přechody dá věrnější výsledek, u ploché grafiky se od rychlého režimu skoro neliší.

Paleta z fotky jako základ návrhu

Barvy z fotografie jsou rychlá cesta k schématu, které drží pohromadě. Na snímku svítí jeden zdroj světla, takže má většina odstínů společný nádech a nemusíte je k sobě pracně ladit. Procento u každé barvy vám navíc rovnou napoví, jak s ní zacházet: co zabírá největší plochu na fotce, unese největší plochu i v návrhu.

Ne každý odstín se dá použít rovnou. Barvy z fotek bývají zašedlé kvůli osvětlení, takže jim občas musíte přidat sytost. Než některou nasadíte na text, ověřte si čitelnost v kontrole kontrastu. A když potřebujete odvodit odstíny z jedné konkrétní barvy místo z fotky, použijte generátor palet.

Časté otázky

Jak zjistit barvu z obrázku?

Nahrajte obrázek a klikněte kapátkem na místo, jehož barvu potřebujete. Nástroj hned ukáže HEX, RGB i HSL kód. Pokud vás zajímají hlavní barvy celého snímku, stačí se podívat na paletu nad kapátkem.

Co znamená kód #FFFFFF?

Bílou. Tři dvojice znaků za mřížkou určují červenou, zelenou a modrou složku, a FF je nejvyšší možná hodnota, tedy 255. Všechny tři na maximu dají bílou, všechny na nule černou.

Proč barva v paletě neodpovídá tomu, co vidím?

Barvy v paletě jsou průměry skupin podobných odstínů, ne konkrétní pixely. Když potřebujete přesně ten odstín, na který koukáte, použijte kapátko. Roli hraje i komprese JPEG, která v okolí hran barvy mírně posouvá.

K čemu je přepínač ignorování krajních barev?

Vynechá skoro bílé a skoro černé pixely. Bez něj by v paletě snímku obrazovky převládlo bílé pozadí a u fotky s tmavým okolím zas černá. Pokud jsou pro vás bílá a černá důležité, přepínač vypněte.

Nahrává se obrázek na server?

Ne. Prohlížeč si obrázek přečte a barvy spočítá přímo ve vašem zařízení, takže soubor nikam neodchází.