Utiliome

Extrakce palety barev z obrázku

Extrahujte harmonické palety 5–12 barev z fotky nebo ilustrace, odeberte přesné pixely interaktivním kapátkem a exportujte CSS proměnné, tokeny Tailwind nebo PNG karty vzorků.

Bez nahráváníBez registraceDávkové zpracování
5–12 Harmonious SwatchesClick-to-Pick EyedropperHEX / RGB / HSL / CSS / TailwindPNG Palette Card Export
Stáhnout
Offline engine je připraven100% soukromý pracovní prostor v prohlížeči • Žádné nahrávání do cloudu
Nástroje, které se vám můžou hodit

Související nástroje

Extraktor dominantní barvy

Najděte dominantní barvy a přesné procento pokrytí pixelů (%) v obrázku pomocí lokálního K-Means. Náhled témat UI, kontrast WCAG a HEX/RGB.

Generátor palety barev

Generujte, upravujte a exportujte krásné palety barev a přechody pro další UI projekt.

Kontrola přístupných barev

Zkontrolujte kontrast WCAG 2.1, simulujte barvoslepost a objevte přístupné barevné páry.

Generátor palety Material

Generujte palety Material Design 3 a 2, tónové odstíny a náhledy UI z libovolné barvy nebo nahraného obrázku.

Generátor CSS přechodů

Vytvářejte a upravujte krásné CSS přechody vizuálně a okamžitě zkopírujte kód.

Převést SVG do PNG

Okamžitě převádějte vektorové obrázky SVG do vysoce kvalitního formátu PNG přímo v prohlížeči.

100% soukromé • Žádné nahrávání souborů na server

Proč použít extraktor palety a kapátko Utiliome?

Navrženo od základu pro přísné soukromí, okamžité spuštění a nulové tření. Žádné předplatné, paywally ani registrace účtu.

Percepční vzdálenost a filtrování harmonií

Extrahuje 5, 6, 8 nebo 12 odlišných vzorků pomocí filtrování percepční RGB vzdálenosti, takže paleta zachytí světla, střední tóny i stíny bez téměř duplicitních vzorků.

Interaktivní kapátko kliknutím na obrázek

Klikněte kdekoli přímo na nahranou fotku, odeberte přesnou hodnotu HEX/RGB/HSL pixelu, připněte ji na začátek palety a zkopírujte do schránky.

Předvolby nálady (Vibrant, Pastel, Warm, Cool)

Filtrujte extrahované barvy podle sytosti, světlosti a úhlu odstínu HSL a ze stejné fotky vygenerujte schémata Vibrant, Soft Pastel, Warm nebo Cool.

CSS, Tailwind, JSON a PNG karta na 1 kliknutí

Jedním kliknutím zkopírujte vlastní vlastnosti CSS :root, objekty Tailwind colors nebo JSON pole, nebo stáhněte vysoce rozlišenou PNG kartu palety 1200×800 s fotkou a HEX kódy.

Utiliome vs tradiční cloudové alternativy

Porovnejte náš lokální WebAssembly engine s legacy cloudovými nástroji.

Funkce Utiliome (lokální prohlížeč) Legacy cloudové převodníky
Interaktivní kapátko pixelů Klikněte kdekoli na plátno obrázku, odeberte a připněte přesné barvy pixelů Pevné automaticky vygenerované vzorky bez ručního výběru pixelů
Filtrování harmonií a nálad 5–12 vzorků + HSL filtry Balanced, Vibrant, Pastel, Warm a Cool 5 statických vzorků, které často opakují bahnité šedé pozadí
Exporty pro vývojáře a designéry HEX, RGB, HSL + CSS proměnné :root, konfigurace Tailwind, JSON a PNG karta Ruční kopírování HEX po jednom nebo exporty za paywallem
Soukromí a rychlost 100% extrakce na straně klienta v HTML5 Canvas (nula nahrávání na server) Nahrávají moodboardy a soukromé klientské assety na cloudové servery
Jak to funguje

Jak extrahovat paletu barev z obrázku ve 3 krocích

Není nutná žádná instalace softwaru. Vše běží přímo ve vašem webovém prohlížeči.

1

Přetáhněte jednu nebo více fotek či ilustrací

Přetáhněte libovolný obrázek JPG, PNG, WebP, SVG nebo AVIF do dropzóny. Utiliome dekóduje pixely lokálně v RAM prohlížeče.

2

Zvolte počet vzorků, náladu a vlastní pixely

Vyberte 5, 6, 8 nebo 12 vzorků, filtrujte podle nálady palety (Balanced, Vibrant, Pastel, Warm nebo Cool), nebo klikněte přímo na obrázek a připněte konkrétní accent pixely.

3

Kopírujte HEX / CSS / Tailwind nebo stáhněte PNG kartu

Klikněte na vzorek a zkopírujte HEX, RGB nebo HSL, v postranním panelu exportujte CSS proměnné :root nebo tokeny Tailwind, nebo stáhněte sdílitelnou PNG kartu palety.

Jak percepční kvantizace barev sestaví harmonické palety z fotek

Rychlá odpověď: Naivní počítání pixelů často vrátí 6 téměř identických odstínů nebeské modři nebo stínové šedé. Utiliome kombinuje 3D RGB histogramové binning s filtrováním eukleidovské percepční vzdálenosti (ΔRGB >= 34) a HSL omezeními nálady, aby byl každý vzorek palety vizuálně odlišný.

Když fotografie obsahuje 12 milionů pixelů, přes 70 % z nich často patří jedinému přechodu pozadí (modrá obloha, tmavé studiové pozadí nebo listí). Jednoduché řazení podle četnosti dá monotónní paletu, která mine 3% živý ohniskový accent, díky němuž kompozice ožije.

Harmonious Palette Engine od Utiliome to řeší ve třech fázích:

  1. Podvzorkovaná 24kroková prostorová kvantizace: Vzorkuje neprůhledné pixely (alpha >= 128) na normalizované mřížce plátna a v každém binu zprůměruje skutečné RGB hodnoty, takže výstupní vzorky odrážejí autentické fotografické tóny, nikoli umělé středy mřížky.
  2. HSL filtrování nálady a chromy:Převádí kandidátské biny na Hue (0°–360°), Saturation (0 %–100 %) a Lightness (0 %–100 %), takže můžete izolovat harmoniíVibrant(S >= 35 %),Soft Pastel(L >= 60 %, S <= 75 %),Warm(H <= 70° nebo H >= 310°) neboCool (70° < H < 310°).
  3. Minimální eukleidovská vzdálenost barev (ΔE / ΔRGB zábradlí): Vynucuje minimální 3D RGB vektorovou vzdálenost mezi vybranými vzorky, aby byly zastoupeny světla, střední tóny i accenty.

Export palet z obrázku do produkce: CSS Custom Properties, Tailwind CSS a design karty

Rychlá odpověď: Jakmile paletu extrahujete nebo doladíte kapátkem na plátně, můžete ji ihned exportovat jako CSS proměnné :root, objekt Tailwind theme.extend.colors, strukturované JSON pole nebo prezentační kartu PNG 1200×800.

Přechod od vizuální inspirace k front-end kódu nebo klientským moodboardům by neměl vyžadovat kopírování šesti hex kódů po jednom:

Cíl exportu Výstupní formát Nejlepší použití ve workflow
Kliknutí na jednotlivý vzorek #HEX, rgb(r, g, b) nebo hsl(h, s%, l%) Vkládání jednotlivých barev do Figmy, Photoshopu, Canvy nebo Illustratoru
CSS proměnné (:root) --palette-1: #...; --palette-2: #...; Tématování ve vanilla CSS, Astro, Svelte a Web Components
Konfigurace Tailwind CSS colors: { "brand-100": "#...", ... } Přímé vložení do tailwind.config.mjs nebo bloků @theme
PNG karta palety vysoce rozlišené PNG 1200 × 800 px s fotkou + štítky HEX Sdílení moodboardů ve Slacku, Notion, pitch deckách a brand guidelines

Extract Color Palette vs. Dominant Color Extractor: který nástroj použít?

Rychlá odpověď: Použijte Extract Color Palette, když chcete rozmanité, esteticky vyvážené schéma 5–12 barev s filtry nálady, interaktivním kapátkem a exporty CSS/Tailwind. Použijte Dominant Color Extractor, když potřebujete statistická K-Means procenta pokrytí pixelové plochy (%) a analýzu kontrastu UI tématu podle WCAG.

Utiliome nabízí dva specializované nástroje pro analýzu barev v obrázku, přizpůsobené různým kreativním a inženýrským úkolům:

Funkce / cíl Extract Color Palette (tento nástroj) Dominant Color Extractor
Jádrový algoritmus Rozmanitost percepční vzdálenosti + HSL filtrování nálady (Balanced, Vibrant, Pastel, Warm, Cool) NesupervizovanéK-Means shlukování (k = 3..8) měřící přesné pokrytí pixelové plochy %
Ruční kapátko pixelů Klikněte kdekoli na fotku, odeberte a připněte přesné barvy pixelů Automatické statistické centroidy shluků
Hlavní výstup 5–12 harmonických vzorků + CSS :root / konfigurace Tailwind + PNG karta vzorků Seřazený sloupcový graf pokrytí % + náhled karty UI Primary/Secondary/Accent + kontrastní poměr WCAG
Nejlepší pro Grafiky, ilustrátory, brand moodboardy a tvorbu palet CSS/Tailwind Dynamické UI/UX tématování, audity pozadí produktové fotografie a analýzu rozložení barev
FAQ

FAQ extraktoru palety z obrázku a průvodce design tokeny

Vše, co potřebujete vědět o používání bezplatného online Extrakce palety barev z obrázku od Utiliome.

Jak vyberu konkrétní barvu z drobného detailu v obrázku?

Jednoduše klikněte přímo na tu část obrázku uvnitř editorového plátna! Vestavěné kapátko odebere přesný pixel 1×1 pod kurzorem, připne ho jako první vzorek palety a zkopíruje kód barvy do schránky.

Jaký je rozdíl mezi filtry nálady Balanced, Vibrant a Pastel?

Balanced Full extrahuje nejreprezentativnější odlišné barvy napříč celým spektrem světlosti a sytosti. Vibrant odfiltruje tlumené šedé a téměř černé/bílé (vyžaduje sytost >= 35 %), zatímco Soft Pastel upřednostňuje jemné tóny s vysokou světlostí.

Mohu extrahovanou paletu exportovat přímo do Tailwind CSS nebo CSS proměnných?

Ano. V pravém postranním panelu pod '3. Code Format & Copy Export' klikněte na 'Copy CSS Variables (:root)' nebo 'Copy Tailwind Config' a zkopírujte hotový blok kódu se všemi vzorky palety.

Co vygeneruje 'Download PNG Palette Card'?

Vykreslí čistou prezentační kartu 1200×800 px s nahraným dílem na tmavém studiovém plátně nad řadou zaoblených vzorků označených přesnými HEX kódy — připravenou do klientských decků, dokumentů Notion nebo sociálních příspěvků.

Kdy použít Extract Color Palette a kdy Dominant Color Extractor?

Použijte Extract Color Palette, když chcete inspirativní designové schéma 5–12 vzorků, filtrování nálady a interaktivní kapátko. Použijte Dominant Color Extractor, když chcete znát přesné statistické procento (%) plochy obrázku pokryté každým barevným shlukem pomocí K-Means.

Odesílají se nahrané fotky na server kvůli extrakci barev?

Nikdy. Veškeré vzorkování pixelů, histogramová kvantizace i vykreslení PNG karty probíhá 100% lokálně v prohlížeči přes HTML5 Canvas 2D API.