Vilken algoritm används för att hitta färgerna?

Krymp använder k-means-klustring på pixlarna och returnerar de mest dominanta färgerna sorterade efter förekomst. Du får dem som HEX, RGB och OKLCH samt som färdiga CSS-variabler.

Hur många färger kan jag extrahera?

Du kan välja allt från 3 till 12 färger. För varumärkespaletter brukar 5–6 färger ge bäst balans mellan täckning och tydlighet.

Guide: Färgpalett från bild

Hur extraherar jag en färgpalett från en bild?

Dra in bilden i Krymps färgverktyg. Verktyget kör k-means-klustring lokalt och returnerar de mest dominanta färgerna som HEX, RGB och OKLCH samt färdiga CSS-variabler. För varumärkespaletter är 5–6 färger oftast bäst. Inget skickas till en server och resultatet kan exporteras direkt.

Kort svar: hur funkar det?

Krymps färgextraktion samplar pixlarna i din bild och kör k-means-klustring i färgrymden — ungefär som att be algoritmen "hitta de 6 färggrupper som täcker mest av bilden". Resultatet är de perceptuellt dominanta färgerna, inte bara den mest frekventa pixeln.

Steg-för-steg: från bild till design-tokens

Dra in en referensbild — moodboard, fotografi, varumärkesmaterial, en konkurrents hemsida-screenshot — i verktyget.
Välj antal färger (5 är bra för en startpalett, 8 för en full design-system-palett med ljus/mörk + accent).
Inspektera resultatet — varje färg visas med HEX, RGB, OKLCH och en uppskattad luminans-vikt.
Klicka Kopiera CSS-variabler för att få ett färdigt:root { --color-1: …; --color-2: …; }-block du kan klistra in direkt i din styles.css.

HEX, RGB eller OKLCH — vad ska du använda?

HEX

Standarden för design-tools (Figma, Sketch). Använd för att kommunicera med designers, varumärkesdokument och tryck.

RGB

Funktionellt identisk med HEX i sRGB. Använd när du behöver alpha-kanal: rgb(255 0 64 / 0.4).

OKLCH (rekommenderas)

Den moderna färgrymden för CSS. Perceptuellt jämn: ändra ljushet med L och kromhet med C utan att nyansen "glider". Detta är vad shadcn/ui och Tailwind v4 använder, och det är formatet Krymp själv är byggt i.

Praktiskt: när du vill ha en mörkare variant av en accentfärg sänker du bara L i OKLCH — i HEX hade du fått trial-and-error.

Tre användningsfall

1. Bygga ett varumärke från en känsla

Hitta tre referensbilder som fångar känslan du vill ha. Extrahera 5 färger från varje, jämför, och plocka ut de 4–6 som återkommer. Du har nu en färgriktning som är visuellt grundad, inte bara teoretiskt vald.

2. Matcha en hemsida till en produktbild

E-handlare med få men starka produktbilder kan extrahera färger ur hjältebilden och använda dem som accentfärger på sidan — det skapar visuell sammanhållning utan extra designjobb.

3. Reverse-engineera en konkurrent

Skärmdumpa konkurrentens hero, kör genom Krymp, och få deras palett som HEX/OKLCH på 3 sekunder. Inte för att kopiera — för att förstå.

Vanliga frågor

Varför ser färgerna lite annorlunda ut än i bilden?

K-means hittar kluster-centrum, inte exakta pixelvärden. Två ljusrosa nyanser slås ihop till ett medel. Det är önskat — du får en användbar palett, inte en exhaustiv färglista.

Skickas bilden någonstans?

Nej. Hela analysen körs i Canvas API direkt i din webbläsare. Bilden lämnar aldrig din enhet.

Vidare

När paletten är spikad — använd Bild för att komprimera och konvertera referensbilderna inför moodboarden, ellerVattenstämpel för att signera dina slutleveranser i den nya paletten.