Utiliome

Extrage paleta de culori din imagine

Extrage palete armonioase de 5–12 culori din orice fotografie sau ilustrație, eșantionează pixeli cu eyedropper și exportă variabile CSS, tokenuri Tailwind sau carduri PNG.

Fără încărcăriFără contProcesare în lot
5–12 Harmonious SwatchesClick-to-Pick EyedropperHEX / RGB / HSL / CSS / TailwindPNG Palette Card Export
Descarcă
Motorul offline e gataSpațiu de lucru 100% privat, în browser • Zero încărcări în cloud
Unelte de care ai putea avea nevoie

Unelte similare

Extractor de culoare dominantă

Găsește culorile dominante și procentul exact de pixeli (%) din orice imagine, cu clustering K-Means local. Previzualizează teme UI, contrast WCAG și HEX/RGB.

Generator de paletă de culori

Generează, ajustează și exportă palete de culori și gradiente pentru următorul proiect UI.

Verificator de culori accesibile

Verifică contrastul WCAG 2.1, simulează daltonismul și descoperă perechi de culori accesibile.

Generator de paletă Material

Generează palete Material Design 3 și Material Design 2, nuanțe tonale și previzualizări UI din orice culoare sau imagine încărcată.

Generator de gradient CSS

Creează și personalizează vizual gradiente CSS frumoase și copiază instant codul.

Convertește SVG în PNG

Convertește instant imaginile vectoriale SVG în PNG de înaltă calitate, direct în browser.

100% privat • Zero încărcări de fișiere pe server

De ce să folosești extractorul de paletă și eyedropper-ul Utiliome?

Construit de la zero pentru confidențialitate strictă, execuție instant și zero fricțiune. Fără abonamente, paywall-uri sau conturi.

Filtrare după distanță perceptuală

Extrage 5, 6, 8 sau 12 mostre distincte, cu filtrare pe distanța RGB perceptuală, ca paleta să prindă lumini, tonuri medii și umbre, fără duplicate.

Eyedropper direct pe imagine

Apasă oriunde pe fotografie ca să eșantionezi HEX/RGB/HSL-ul pixelului, să îl fixezi în fața paletei și să îl copiezi.

Stări: vibrant, pastel, cald, rece

Filtrează culorile după saturația HSL, luminozitate și unghiul nuanței, ca să obții scheme vibrante, pastel, calde sau reci din aceeași fotografie.

CSS, Tailwind, JSON și card PNG

Copiază proprietăți CSS :root, obiecte Tailwind colors sau tablouri JSON dintr-un clic, ori descarcă un card PNG 1200×800 cu fotografia și codurile HEX.

Utiliome față de alternativele cloud clasice

Compară motorul nostru local WebAssembly cu uneltele cloud vechi.

Funcție Utiliome (browser local) Convertoare cloud clasice
Eyedropper pe pixel Apasă oriunde pe pânză ca să eșantionezi și să fixezi culoarea exactă Mostre generate automat, fără alegere manuală
Armonie și stare 5–12 mostre + filtre HSL echilibrat, vibrant, pastel, cald și rece 5 mostre statice, adesea griuri tulburi de fundal
Export pentru design și cod HEX, RGB, HSL + variabile CSS :root, config Tailwind, JSON și card PNG Copiere HEX una câte una sau export cu paywall
Confidențialitate și viteză Extragere 100% pe client, cu canvas HTML5 (zero încărcări) Încarcă moodboard-uri și materiale de client în cloud
Cum funcționează

Cum extragi o paletă dintr-o imagine, în 3 pași

Nu trebuie să instalezi niciun program. Totul rulează direct în browser.

1

Trage fotografii sau ilustrații

Trage orice JPG, PNG, WebP, SVG sau AVIF în zonă. Utiliome decodează pixelii local, în RAM-ul browserului.

2

Număr de mostre, stare și pixeli

Alege 5, 6, 8 sau 12 mostre, filtrează starea (echilibrat, vibrant, pastel, cald sau rece) sau apasă pe imagine ca să fixezi accente.

3

Copiază HEX / CSS / Tailwind sau PNG

Apasă o mostră ca să copiezi HEX, RGB sau HSL, exportă variabile :root sau tokenuri Tailwind, ori descarcă un card PNG.

Cum construiește cuantizarea perceptuală palete armonioase

Răspuns rapid: Numărarea naivă a pixelilor întoarce adesea 6 nuanțe aproape identice de albastru de cer sau gri de umbră. Utiliome combină histograme RGB 3D cu filtrare pe distanța euclidiană (ΔRGB >= 34) și constrângeri HSL, ca fiecare mostră să fie distinctă.

Într-o fotografie de 12 milioane de pixeli, peste 70% aparțin adesea unui singur gradient de fundal (cer, studio întunecat sau frunziș). O sortare după frecvență produce o paletă monotonă și ratează accentul viu de 3% care dă viață compoziției.

Motorul de paletă armonioasă Utiliome lucrează în trei etape:

  1. Cuantizare spațială în 24 de pași: eșantionează pixelii netransparenți (alpha >= 128) pe o grilă normalizată și mediază RGB-ul real în fiecare bin, ca mostrele să reflecte tonuri fotografice, nu puncte de mijloc artificiale.
  2. Filtrare HSL:convertește candidații în nuanță (0°–360°), saturație (0%–100%) și luminozitate (0%–100%), ca să izoleziVibrant(S >= 35%),Pastel moale(L >= 60%, S <= 75%),Cald(H <= 70° sau H >= 310°) sauRece (70° < H < 310°).
  3. Distanță euclidiană minimă: impune o separare minimă în spațiul RGB între mostre, ca luminile, tonurile medii și accentele să fie toate reprezentate.

Export în producție: CSS, Tailwind și carduri

Răspuns rapid: După ce extragi sau ajustezi paleta cu eyedropper-ul, o exporți imediat ca variabile CSS :root, obiect Tailwind theme.extend.colors, tablou JSON sau card PNG 1200×800.

Trecerea de la inspirație la cod sau moodboard nu ar trebui să însemne șase coduri hex copiate unul câte unul:

Țintă de export Format Când îl folosești
Clic pe o mostră #HEX, rgb(r, g, b) sau hsl(h, s%, l%) Lipire în Figma, Photoshop, Canva sau Illustrator
Variabile CSS (:root) --palette-1: #...; --palette-2: #...; CSS simplu, Astro, Svelte și Web Components
Config Tailwind CSS colors: { "brand-100": "#...", ... } Direct în tailwind.config.mjs sau blocuri @theme
Card PNG de mostre PNG de înaltă rezoluție 1200 × 800 px Moodboard-uri în Slack, Notion, prezentări și ghiduri de brand

Paletă extrasă sau culoare dominantă: ce unealtă alegi?

Răspuns rapid: Folosește Extrage paleta pentru o schemă echilibrată de 5–12 culori, filtre de stare, eyedropper și export CSS/Tailwind. Folosește extractorul de culoare dominantă pentru procente K-Means și contrast WCAG de temă.

Utiliome are două unelte de analiză a culorii, pentru sarcini diferite:

Funcție / obiectiv Extrage paleta (această unealtă) Extractor de culoare dominantă
Algoritm Diversitate perceptuală + filtre HSL (Echilibrat, Vibrant, Pastel, Cald, Rece) Clustering K-Means nesupravegheat (k = 3..8) care măsoară acoperirea exactă %
Eyedropper manual Apasă pe fotografie ca să eșantionezi și să fixezi Centroizi statistici, automati
Ieșire principală 5–12 mostre + CSS :root / config Tailwind + card PNG Bară de acoperire % + card Primar/Secundar/Accent + raport WCAG
Potrivit pentru Designeri, ilustratori, moodboard-uri și palete CSS/Tailwind Tematizare UI dinamică, audit de fundal la fotografii de produs și distribuția culorii
Întrebări

Întrebări despre extractorul de paletă și tokenurile de design

Tot ce trebuie să știi ca să folosești gratuit Extrage paleta de culori din imagine de la Utiliome.

Cum aleg o culoare dintr-un detaliu mic al imaginii?

Apasă direct pe zona respectivă din pânză. Eyedropper-ul eșantionează pixelul 1×1 de sub cursor, îl fixează ca prima mostră și copiază codul în clipboard.

Care este diferența dintre filtrele Echilibrat, Vibrant și Pastel?

Echilibrat complet extrage cele mai reprezentative culori distincte pe tot spectrul de luminozitate și saturație. Vibrant scoate griurile estompate și aproape-negrul/albul (saturație >= 35%). Pastelul moale prioritizează tonuri luminoase, blânde.

Pot exporta paleta direct în Tailwind CSS sau în variabile CSS?

Da. În bara din dreapta, la „3. Format de cod și copiere”, apasă „Copiază variabile CSS (:root)” sau „Copiază config Tailwind” ca să iei un bloc gata de lipit.

Ce generează „Descarcă cardul PNG al paletei”?

Un card de prezentare 1200×800 px, cu lucrarea pe un canvas de studio întunecat și un rând de mostre rotunjite etichetate cu HEX — gata pentru deck-uri, Notion sau postări.

Când folosesc Extrage paleta și când extractorul de culoare dominantă?

Extrage paleta când vrei o schemă de 5–12 mostre, filtre de stare și eyedropper. Extractorul de culoare dominantă când vrei procentul statistic (%) acoperit de fiecare cluster, cu K-Means.

Fotografiile sunt trimise pe un server ca să extragă culorile?

Niciodată. Eșantionarea, cuantizarea histogramei și randarea cardului PNG se fac 100% local, prin API-ul Canvas 2D.