Artikel

Extrahera en tillgänglig färgpalett från en bild

Ett foto eller en varumärkestillgång innehåller ofta fröet till ett fullständigt färgsystem. Att extrahera det fröet, forma det till en användbar palett och sedan verifiera det mot tillgänglighetsstandarder kräver tre distinkta steg. Den här artikeln täcker vart och ett i ordning: hur palettext-raktion fungerar under huven, hur man väljer och justerar färger för praktisk användning, hur man kontrollerar kontrast mot WCAG-trösklar och hur man fångar de par som kollapsar för färgblinda användare.

Skrivet av Bastien Sulyan · Publicerat den 29 juni 2026

Hur en palett extraheras: pixelprovtagning och färgkvantifiering

Varje digital bild är ett rutnät av pixlar, var och en bärande ett färgvärde i ett utrymme som RGB. En palettext-raktor inspekterar inte varje pixel individuellt: ett 2-megapixelfoto innehåller 2 miljoner datapunkter, vilket skulle vara långsamt att bearbeta och skulle returnera tusentals marginellt olika nyanser snarare än en användbar uppsättning. Istället samplar verktyget pixelrutnätet med ett regelbundet intervall och samlar en representativ delmängd. Den delmängden matas sedan in i en färgkvantifieringsalgoritm. Det vanligaste tillvägagångssättet grupperar liknande färger med en klustermetod, ibland kallad median-cut eller k-means-stilpartitionering. Algoritmen placerar varje samplad pixel i en av ett fast antal hinkar baserat på färglikhet, och beräknar sedan genomsnittsfärgen för varje hink. Resultatet är en liten lista, typiskt 4 till 16 färger, som tillsammans redogör för de dominerande visuella tonerna i bilden. Färger som bara förekommer i små isolerade områden kan missas, vilket är förväntat beteende snarare än ett fel.

Rutnät av pixlar från ett foto gradvis aggregerade till sex solida färgprov, med pilar som indikerar klustringssteget som slår samman liknande nyanser

Från råa dominerande färger till en användbar palett

Råutdata från en palettext-raktor är en lista med färger rankade efter frekvens, men frekvens ensam gör inte en palett. Ett foto av en skog returnerar flera gröna som är för lika för att användas som distinkta accenter i ett gränssnitt. Det praktiska arbetet är att välja och justera. Börja med att identifiera en färg som din primära: den mest distinkta och minst neutrala. Bland de återstående färgerna, leta efter högst två som kontrasterar mot primärfärgen och mot varandra. Dessa blir dina accenter. Allt annat, inklusive de avsaturerade toner som extrakt-orn ofta returnerar från skuggor och mellantoner, kan fungera som neutrala färger för bakgrunder och ramar. När du väl har den här grova strukturen behöver du nästan säkert justera enskilda värden. Verktyget color-converter låter dig undersöka varje färg i hex, RGB och HSL. HSL är särskilt användbart här: du kan hålla nyansen konstant och skifta ljushet eller mättnad för att skapa en tätare eller lösare familj utan att lämna samma färgfamilj.

Kontrollera kontrast: WCAG-trösklar för läsbar text

När du väl har kandidatfärger för text och bakgrund måste du kontrollera om kombinationen är läsbar. Web Content Accessibility Guidelines (WCAG) definierar ett kontrastförhållande för detta syfte. Förhållandet jämför den relativa luminansen hos två färger: ett värde på 1:1 innebär ingen kontrast alls (samma färg på samma färg) och 21:1 är maximum (svart på vitt). WCAG 2.1 nivå AA kräver ett förhållande på minst 4,5:1 för brödtext i normalstorlek och 3:1 för stor text (18pt eller 14pt fet). Nivå AAA sätter högre trösklar på 7:1 respektive 4,5:1. Du behöver inte beräkna luminans för hand. Den viktigaste insikten är att ett färgpar som ser bra ut för dig under bra belysning kan hamna under 4,5:1 på skärmen, och riktlinjen finns exakt för det fallet. Efter att ha extraherat och justerat färger, testa varje text-på-bakgrund-par du planerar att använda. En mellangrå som läser bra på vitt kan misslyckas helt mot en ljus beigebakgrund från din extraherade palett.

Två färgpar sida vid sida: ett par med en kontrastförhållandesmärkning på 2,8:1 markerat som otillräckligt och ett annat par med 5,3:1 markerat som tillräckligt för WCAG AA brödtext

Färgblindhet: simulera hur par ser ut för berörda användare

Ungefär 1 av 12 män och 1 av 200 kvinnor har någon form av färgseendedeficiency. Den vanligaste typen är deuteranopi (reducerad känslighet för grönt), följt av protanopi (reducerad känslighet för rött). Tritanopi (reducerad känslighet för blått-gult) är mer sällsynt. För varje typ mappar det visuella systemet vissa våglängder till samma upplevda färg som opåverkade betraktare ser som distinkta. Det praktiska problemet för en palett är att två färger som verkar tydligt olika under normal syn kan kollapsa till samma ton för en färgblind användare, vilket gör dem oanvändbara för att förmedla distinktion, till exempel att bara använda rött och grönt för att signalera framgång och fel. Att köra en färgblindhetssimulering visar dig hur paletten ser ut när de berörda kanalerna komprimeras. De par som kollapsar till en nästan identisk grå eller brun är de som bör ses över: öka antingen ljushets-skillnaden mellan dem så att kontrasten kvarstår även utan nyans-distinktionen, eller lägg till ett sekundärt tecken (form, etikett, mönster) så att färg inte är den enda signalen.

Gör det lokalt: color-palette, color-blindness och color-converter

Alla tre steg som beskrivs i den här artikeln kan slutföras utan att skicka din bild eller dina varumärkesfärger till någon server. Verktyget color-palette körs helt i webbläsaren: du släpper en bild och det samplar pixlarna lokalt och returnerar de dominerande färgerna som hex-värden. Ingen fil överförs. Verktyget color-converter accepterar en hex-kod och visar samma färg i RGB och HSL så att du kan göra riktade justeringar av ljushet eller mättnad medan du stannar i samma nyans-familj. Både hex och de konverterade värdena finns bara på sidan. Verktyget color-blindness fungerar tvärtom: du släpper en bild och det renderar deuteranopi-, protanopi- och tritanopi-simuleringar av den bilden, beräknade i webbläsaren. För att kontrollera en palett i stället för ett foto, exportera eller ta en skärmdump av dina färgprover som en bild först, och släpp sedan in den i simulatorn. Genom att använda de tre verktygen i sekvens, extrahera från bilden, justera i color-converter och sedan exportera en färgprovsbild och verifiera den i color-blindness, täcker du hela arbetsflödet som beskrivs ovan. Din bild stannar på din enhet under hela processen, vilket spelar roll om källfotot innehåller opublicerad varumärkesidentitet eller en klients ej publicerade identitet.

Verktyg i den här artikeln

Vanliga frågor

Hur många färger returnerar en palettext-raktor typiskt?

De flesta verktyg returnerar mellan 5 och 16 färger som standard, även om många låter dig ange antalet. Att returnera färre färger innebär att algoritmen måste gruppera fler pixlar tillsammans, vilket kan slå samman distinkta men liknande toner. Att returnera fler färger kan producera nära-dubbletter som är svåra att använda distinkt. För en gränssnittspalett är 6 till 8 färger vanligtvis en praktisk startpunkt.

Kan en palett extraherad från en bild automatiskt klara WCAG-kontrast?

Inte automatiskt. Dominerande färger i ett foto är ofta mellantoner med måttlig luminans, som tenderar att producera förhållanden i intervallet 2:1 till 3:1 mot varandra. Att uppfylla 4,5:1-tröskeln för brödtext kräver typiskt att bakgrundsvärden görs ljusare eller textvärden mörkare utöver vad råextraktionen ger. Extraktionen ger dig en startpunkt; kontrast-kontrollen berättar hur mycket justering som behövs.

Tar WCAG-kontrastförhållandet hänsyn till färgblindhet?

Delvis. WCAG-luminansformeln baseras på relativ ljusstyrka, inte nyans, så ett par med hög kontrast som uppfyller 4,5:1 förblir generellt sett urskiljbart även för färgblinda användare eftersom ljushets-skillnaden bevaras. Men två färger med liknande luminans men olika nyanser, som rött och grönt på samma ljusstyrka, kan klara en luminansbaserad kontroll-kontroll medan de fortfarande är oskiljbara för deuteranoper. Att köra en färgblindhetssimulering är det korrekta sättet att kontrollera nyans-nivådifferentiering separat från kontrastförhållandet.