Färgpalett från bild

Så tar du fram en färgpalett från en bild

1. Släpp en bild i uppladdningsytan, eller klicka på den för att välja en fil. JPG, PNG, WebP, GIF och alla andra format som din webbläsare kan visa fungerar.
2. Verktyget analyserar bilden direkt och visar dess Dominerande färger, sorterade från den vanligaste till den minst förekommande.
3. Justera Antal färger (3 till 12) för att få en bredare eller snävare palett. Avmarkera Ignorera vita och nästan vita pixlar om vitt är en viktig färg i bilden, till exempel en vit produkt eller snö.
4. Kopiera en färg med knappen Kopiera under dess ruta, eller välj ett format i Exportera som (HEX-lista, CSS-variabler, SCSS-variabler, JSON-array eller Tailwind-färger) och klicka på Kopiera eller Ladda ner för hela paletten. Ta fram färger kör analysen igen.

Din bild läses lokalt av din webbläsare. Den laddas aldrig upp till en server.

Så hittas de dominerande färgerna

Bilden ritas först på en osynlig canvas och förminskas så att den längsta sidan är högst 512 pixlar. Det gör analysen snabb utan att ändra de övergripande färgerna. Pixlarna grupperas sedan med en kvantiseringsalgoritm (modifierad median cut, från biblioteket Color Thief med öppen källkod) som arbetar i färgrymden OKLCH, så att färger som ser lika ut för ögat hamnar i samma grupp.

Varje grupp blir en färg i paletten, och procentsatsen under varje färgruta är dess andel av de samplade pixlarna. Stapeln ovanför färgrutorna visar proportionerna i en överblick. Genomskinliga pixlar hoppas över, och det gör även vita och nästan vita pixlar så länge alternativet är ikryssat, eftersom vita bakgrunder annars skulle dominera de flesta produktfoton och skärmbilder.

Varje färgruta visar sin HEX-kod i svart eller vitt, beroende på vad som syns bäst, så att etiketten är läsbar på både ljusa och mörka färger.

Idéer för att använda en bildpalett

• Varumärke och webbdesign: bygg ett webbplatstema från en stor toppbild eller en logotyp, så att gränssnittet matchar bilden.
• Presentationer och sociala medier: välj text- och bakgrundsfärger som passar en omslagsbild.
• Inredning, mode och konst: fånga stämningen i ett foto, en målning eller ett tygprov.
• Datavisualisering: hämta diagramfärger från en illustration i samma rapport.

De framtagna färgerna är medelvärden av många pixlar, så de kan se något mindre livfulla ut än den mest mättade punkten i fotot. Behöver du den exakta färgen på en viss pixel använder du i stället ett verktyg som hämtar färg från en bild.