Ugrás a fő tartalomra

Ingyenes Kép színpaletta kinyerő

Nyerd ki a domináns színeket bármely képből k-means színkvantálással. Kapj hex-kódokat a fotód vagy logód 2–16 legfőbb színéhez.

Betöltés után offline is működik

Húzza ide a fájlt, vagy kattintson a tallózáshoz

JPG, PNG, WebP, GIF, HEIC, HEIF · az eszközödön dolgozza fel

vagy nyomjon Ctrl+V-t a vágólapról való beillesztéshez

Fájlok tallózása

Tipp: képernyőképet a Ctrl+V billentyűkkel illeszthetsz be

Az Ön fájljai soha nem hagyják el az eszközét. Minden feldolgozás helyileg történik a böngészőjében.

Gyakori felhasználások

  • A márka szín kiemelése a logóbólSzerezzen be pontos hex kódokat bármely logó vagy márkaképben a domináns szín számára.
  • Web szín palettákat hozhat létre a fotóibólWebes szín palettákat hozhat létre, amelyek megfelelnek a hős fotóknál vagy háttér képeknél.
  • Szín kiemelése az inspiráció fotóibólSzín palettákat szúrjon ki a belső vagy divat fotóból a saját projektekhez való felhasználásra.
  • Elemezze a festmény és képzőművészeti palettákatTanulmányozza a híres festmények vagy saját művészete szín palettáit a domináns színek kiemelésével.
  • Téma CSS képekbőlCSS változó témákat hozhat létre képekből — hasznos dinamikus témákhoz vagy automatikusan generált szín sémákhoz.

Hogyan működik

A színkivonatolás teljesen a böngészőjében fut egy kézzel írt k-means++ klaszterező algoritmussal, amely a Canvas API-ból olvasott nyers pixeladatokra kerül alkalmazásra — nincs szerver, nincs harmadik féltől származó könyvtár. Ugyanaz a kép és szín-szám beállítás mindig ugyanazt a palettát adja, mert az algoritmus determinisztikus pszeudo-véletlenszám-generátort (mulberry32) használ a Math.random helyett.

  1. 1
    A Canvas beolvassa a pixeladatokat
    A kép egy képernyőn kívüli HTML Canvas elemre kerül rajzolásra, és legfeljebb 200px-re kerül lecsökkentésre leghosszabb oldalán. A Canvas API getImageData() metódusa minden pixelt nyers RGBA bájtokként ad vissza, és a teljesen átlátszó pixelek (alfa < 128) eldobásra kerülnek a klaszterezés kezdete előtt.
  2. 2
    A k-means++ klaszterezi a pixeleket
    Egy k-means++ inicializáló determinisztikusan veti be a centroidokat, majd az algoritmus akár 20-szor iterál: minden pixel a legközelebbi centroidjához kerül hozzárendelésre RGB térben, majd a centroidok újraszámításra kerülnek az összes hozzárendelt pixel átlagaként. Az azonos hex-értékre összeomló klaszterek összevonásra kerülnek, így minden minta az eredményben egyedi.
  3. 3
    Színenkénti metaadatok kiszámítva
    Minden centroid HEX-re, HSL-re és a teljes pixel-számból való részesedésére (százalékban) kerül átváltásra. A WCAG relatív fényerő a standard képlet szerint kerül kiszámításra, és a feketével és fehérrel szembeni kontrasztarányok minden minta mellett megjelennek.
  4. 4
    Export és pipetta-kimenet
    A paletta másolható CSS egyéni tulajdonságokként, SCSS változókként, egy Tailwind konfigurációs részletként vagy JSON-ként. Egy kattintásos mintavevő pipetta visszaképezi az előnézeten való kattintást a pontos forráspixel-koordinátákra egy teljes felbontású platnon, hozzáadva a pixel színét egy külön kiválasztott-színek listához. Egy PNG palettacsík letölthető a Canvas toBlob() segítségével.

Képe soha nem kerül feltöltésre — teljesen a böngésző memóriájában kerül dekódolásra és feldolgozásra, és csak a fájlméret (KB-ban) kerül jelentésre az analitikának.

Kapcsolódó eszközök

Gyakran ismételt kérdések