Få en farvepalet fra ethvert billede, med kontrasttjekker

Sådan vælges farverne

Værktøjet laver en lille kopi af dit billede, højst 160 pixel på den længste side, og tæller alle pixel, der ikke er gennemsigtige. Derefter grupperer det ensartede pixel med k-means-clustering og viser gennemsnitsfarven for hver gruppe, største gruppe først. Procenten på hver farveprøve angiver, hvor stor en del af billedet den gruppe dækker.

Udgangspunktet er fast i stedet for tilfældigt: det starter med den mest almindelige farve og tilføjer derefter løbende den farve, der ligger længst fra dem, det allerede har. Så det samme billede giver den samme palet hver gang, og et lille klart detaljefarve, som et rødt logo på en hvid kasse, får sin egen farveprøve i stedet for at blive udlignet i baggrunden.

Vælg 5 til 8 farver. Et produktbillede på en ensfarvet baggrund har som regel brug for 5 eller 6. Et travlt livsstilsfoto virker bedre med 8. Hvis billedet har færre tydelige farver, end du bad om, siger værktøjet det og viser dem, det fandt.

Sådan læses kontrastmatricen

Hver farve parres med alle de andre, plus rent hvidt og sort, og hver celle viser kontrastforholdet for tekst i rækkens farve på en baggrund i kolonnens farve. Forholdet følger WCAG-definitionen: (L1 + 0,05) / (L2 + 0,05), hvor L1 og L2 er den relative luminans af den lysere og den mørkere farve. Det går fra 1:1 (samme farve to gange) til 21:1 (sort på hvid).

Betegnelserne er de tærskler, WCAG fastsætter:

• AA: mindst 4,5:1 for normal tekst og 3:1 for stor tekst (Succeskriterium 1.4.3).
• AAA: mindst 7:1 for normal tekst og 4,5:1 for stor tekst (Succeskriterium 1.4.6).
• Stor tekst betyder mindst 18 punkt eller 14 punkt fed (WCAG’s definition af stor skala).

En celle markeret AA stor er fin til en stor overskrift og for svag til en billedtekst. W3C’s forklaring af 1.4.3 siger også, at forholdet ikke bør rundes op, så 4,499:1 opfylder ikke 4,5:1. Værktøjet bedømmer det præcise tal og viser det afkortet til to decimaler, aldrig rundet op.

Et gennemregnet eksempel

Lad os sige, at fotoet giver dig en marineblå på #1a3c6e og en cremefarve på #fdf6e3. Marineblåens relative luminans bliver cirka 0,046 og cremens cirka 0,923. Forholdet er (0,923 + 0,05) / (0,046 + 0,05), hvilket er cirka 10,1:1 med de afrundede tal og 10,16:1 med de præcise. Det består AAA for al tekst, så marineblå tekst på et cremefarvet slutbillede er sikkert i alle størrelser. Sæt en mellemorange som #e07a2e på den samme creme, og forholdet falder til 2,78:1, hvilket ikke består, selv for stor tekst. Gem den orange til en knap med sort tekst på (6,99:1, som er AA men lige akkurat under AAA) eller til en form uden ord.

Sådan bruges eksporten

CSS-eksporten er en :root-blok af brugerdefinerede egenskaber, --color-1 for den farve, der dækker mest af billedet, og så videre nedad. JSON-filen indeholder hver farves hex, RGB, HSL og dens andel af billedet, hvilket er let at indsætte i en designtoken-fil eller sende til et script. Omdøb variablerne, når du ved, hvilken farve der er baggrunden, hvilken der er teksten, og hvilken der er detaljefarven.

Hvad dette værktøj ikke gør

Det ved ikke, hvilke farver der er dit brand. Et foto af dit produkt på et træbord vil inkludere bordet. Beskær til produktet eller emballagen først, hvis du kun vil have dets farver. Det kan heller ikke fortælle dig de præcise trykfarver: tallene er pixlerne i filen, efter dit kamera og eventuel redigering, så tjek dem mod din brandguide, før du udgiver dem. Og det bedømmer kun tekstkontrast. WCAG har separate regler for ikoner og grænsefladedele, som denne matrix ikke bedømmer.

Hvis du hellere vil slippe for at gøre dette i hånden

Hermoso er markedsføring på autopilot: det undersøger de annoncer, der allerede virker på dit marked, laver billede- og videoannoncer, der matcher dit brand, planlægger opslag og kører betalte kampagner på dine egne annoncekonti. Når du tilføjer dit brand fra din hjemmeside, lærer det dine produkter, logo og palet, og du kan indstille farver til billedtekster og slutbilleder med hex-koder. Det virker i webappen eller inde i Claude, ChatGPT og Cursor via dets MCP-server.

Gratis værktøjer: Størrelsesguide til sociale medier · Instagram-gridgenerator · Open Graph-generator

Ofte stillede spørgsmål

Hvordan får jeg en farvepalet fra et foto?

Slip fotoet ind i værktøjet og vælg, hvor mange farver du vil have, fra 5 til 8. Det grupperer ensartede pixels og viser hver gruppes gennemsnitsfarve som HEX, RGB og HSL, største først, med en kopiknap på hver.

Hvilket kontrastforhold skal teksten have?

WCAG 2.2 niveau AA kræver mindst 4,5:1 for normal tekst og 3:1 for stor tekst. Niveau AAA kræver 7:1 og 4,5:1. Stor tekst er mindst 18 punkt eller 14 punkt fed.

Er 4,49:1 tæt nok på til at bestå AA?

Nej. W3C siger, at det beregnede forhold ikke bør rundes af, når det sammenlignes med en tærskel, så 4,499:1 opfylder ikke 4,5:1. Værktøjet vurderer det nøjagtige tal.

Hvorfor får jeg den samme palet hver gang?

Klyngedannelsen starter fra et fast punkt, den mest almindelige farve, og tilføjer derefter den farve, der ligger længst fra dem, der allerede er valgt. Der er ingen tilfældig start, så ét billede giver altid ét svar.

Bliver mit billede uploadet?

Nej. Det læses med din browsers egen fillæser og tælles i et canvas på din enhed. Intet sendes nogen steder hen eller gemmes.