Hämta en färgpalett från valfri bild, med kontrastkontroll

Så väljs färgerna

Verktyget skapar en liten kopia av din bild, högst 160 pixlar på längsta sidan, och räknar varje pixel som inte är transparent. Sedan grupperas liknande pixlar med k-means-klustring och verktyget visar medelfärgen för varje grupp, med den största gruppen först. Procenttalet på varje färgruta anger hur stor del av bilden som gruppen täcker.

Startpunkten är fast i stället för slumpmässig: den börjar med den vanligaste färgen och fortsätter att lägga till den färg som ligger längst från dem som redan finns. Samma bild ger därför samma palett varje gång, och en liten ljus accent, som en röd logotyp på en vit låda, får en egen färgruta i stället för att vägas in i bakgrunden.

Be om 5 till 8 färger. En produktbild mot en enfärgad bakgrund behöver oftast 5 eller 6. Ett myllrande livsstilsfoto läser bättre med 8. Om bilden har färre distinkta färger än du bad om säger verktyget det och visar dem det hittade.

Så läser du kontrastmatrisen

Varje färg paras ihop med varje annan, plus rent vitt och svart, och varje cell visar kontrastförhållandet för text i radens färg på en bakgrund i kolumnens färg. Förhållandet följer WCAG-definitionen: (L1 + 0.05) / (L2 + 0.05), där L1 och L2 är den relativa luminansen för den ljusare respektive mörkare färgen. Det går från 1:1 (samma färg två gånger) till 21:1 (svart på vitt).

Etiketterna är de tröskelvärden som WCAG sätter:

• AA: minst 4.5:1 för normal text och 3:1 för stor text (framgångskriterium 1.4.3).
• AAA: minst 7:1 för normal text och 4.5:1 för stor text (framgångskriterium 1.4.6).
• Stor text betyder minst 18 punkter, eller 14 punkter fetstil (WCAG:s definition av stor skala).

En cell som är märkt AA stor fungerar för en stor rubrik men är för svag för en bildtext. W3C:s förklaring av 1.4.3 säger också att förhållandet inte ska avrundas, så 4.499:1 når inte upp till 4.5:1. Verktyget bedömer det exakta talet och visar det avkortat till två decimaler, aldrig uppåtavrundat.

Ett räknat exempel

Säg att fotot ger dig en marinblå på #1a3c6e och en gräddvit på #fdf6e3. Den marinblås relativa luminans blir ungefär 0,046 och gräddvitens ungefär 0,923. Förhållandet är (0,923 + 0,05) / (0,046 + 0,05), vilket blir cirka 10.1:1 med de avrundade talen och 10.16:1 med de exakta. Det klarar AAA för all text, så marinblå text på ett gräddvitt slutkort är säkert i vilken storlek som helst. Lägg en mellanorange som #e07a2e på samma gräddvita och förhållandet sjunker till 2.78:1, vilket inte ens klarar stor text. Spara det oranga till en knapp med svart text på (6.99:1, som klarar AA men är knappt under AAA), eller till en form utan ord.

Använda exporten

CSS-exporten är ett :root-block med anpassade egenskaper, --color-1 för den färg som täcker mest av bilden och så vidare nedåt. JSON-filen har varje färgs hex, RGB, HSL och dess andel av bilden, vilket är enkelt att klistra in i en designtokenfil eller skicka till ett skript. Byt namn på variablerna när du vet vilken färg som är bakgrund, vilken som är text och vilken som är accent.

Vad det här verktyget inte gör

Det vet inte vilka färger som är ditt varumärke. Ett foto av din produkt på ett träbord kommer att inkludera bordet. Beskär till produkten eller förpackningen först om du bara vill ha dess färger. Det kan inte heller ange exakta tryckfärger: siffrorna är pixlarna i filen, efter din kamera och eventuell redigering, så stäm av dem mot din varumärkesguide innan du publicerar dem. Och det bedömer bara textkontrast. WCAG har separata regler för ikoner och gränssnittsdelar, som den här matrisen inte betygsätter.

Om du hellre slipper göra det här för hand

Hermoso är marknadsföring på autopilot: det undersöker annonserna som redan fungerar på din marknad, skapar varumärkesanpassade bild- och videoannonser, schemalägger inläggen och kör betalda kampanjer på dina egna annonskonton. När du lägger till ditt varumärke från din webbplats lär det sig dina produkter, din logotyp och din palett, och du kan ange färger för bildtexter och slutkort med hex-koder. Det fungerar i webbappen, eller inuti Claude, ChatGPT och Cursor via dess MCP-server.

Gratisverktyg: Storleksguide för sociala medier · Instagram-rutnätsskapare · Open Graph-generator

Vanliga frågor

Hur får jag en färgpalett från ett foto?

Släpp fotot i verktyget och välj hur många färger du vill ha, från 5 till 8. Det grupperar liknande pixlar och visar varje grupps genomsnittsfärg som HEX, RGB och HSL, störst först, med en kopieringsknapp på var och en.

Vilket kontrastförhållande behöver jag för text?

WCAG 2.2 nivå AA kräver minst 4,5:1 för normal text och 3:1 för stor text. Nivå AAA kräver 7:1 och 4,5:1. Stor text är minst 18 punkter, eller 14 punkter fetstil.

Räcker 4,49:1 för att klara AA?

Nej. W3C säger att det beräknade förhållandet inte ska avrundas vid jämförelse med ett tröskelvärde, så 4,499:1 uppfyller inte 4,5:1. Verktyget bedömer det exakta talet.

Varför får jag samma palett varje gång?

Klustringen utgår från en fast punkt, den vanligaste färgen, och lägger sedan till den färg som ligger längst från de redan valda. Det finns ingen slumpmässig start, så en bild ger alltid ett svar.

Laddas min bild upp?

Nej. Den läses med din webbläsares egen fälläsare och räknas i en canvas på din enhet. Inget skickas någonstans eller lagras.