Hent en fargepalett fra et hvilket som helst bilde, med kontrastsjekker

Slik velges fargene

Verktøyet lager en liten kopi av bildet ditt, maks 160 piksler på den lengste siden, og teller hver piksel som ikke er gjennomsiktig. Deretter grupperer det like piksler sammen med k-means-klyngeanalyse og rapporterer gjennomsnittsfargen i hver gruppe, med den største gruppen først. Prosenten på hver fargeprøve viser hvor mye av bildet den gruppen dekker.

Startpunktet er fast, ikke tilfeldig: det begynner med den vanligste fargen og fortsetter å legge til fargen som er lengst unna dem det allerede har. Dermed gir samme bilde samme palett hver gang, og et lite, skarpt fargeinnslag, som en rød logo på en hvit boks, får sin egen fargeprøve i stedet for å bli jevnet ut i bakgrunnen.

Be om 5 til 8 farger. Et produktbilde på en nøytral bakgrunn trenger som regel 5 eller 6. Et travelt livsstilsbilde leses bedre med 8. Hvis bildet har færre distinkte farger enn du ba om, sier verktøyet fra og viser dem det fant.

Lese kontrastmatrisen

Hver farge pares med alle de andre, pluss ren hvit og svart, og hver celle viser kontrastforholdet for tekst i radfargen på en bakgrunn i kolonnefargen. Forholdet følger WCAG-definisjonen: (L1 + 0.05) / (L2 + 0.05), der L1 og L2 er den relative luminansen til den lysere og den mørkere fargen. Det går fra 1:1 (samme farge to ganger) til 21:1 (svart på hvitt).

Etikettene er tersklene WCAG setter:

• AA: minst 4.5:1 for normal tekst og 3:1 for stor tekst (Suksesskriterium 1.4.3).
• AAA: minst 7:1 for normal tekst og 4.5:1 for stor tekst (Suksesskriterium 1.4.6).
• Stor tekst betyr minst 18 punkt, eller 14 punkt fet (WCAGs definisjon av stor skala).

En celle merket AA stor er grei for en stor overskrift, men for svak for en bildetekst. W3Cs forklaring av 1.4.3 sier også at forholdet ikke skal avrundes, så 4.499:1 oppfyller ikke 4.5:1. Verktøyet vurderer det eksakte tallet og viser det kuttet til to desimaler, aldri rundet opp.

Et regneeksempel

La oss si at bildet gir deg en marineblå på #1a3c6e og en kremfarge på #fdf6e3. Marineblåens relative luminans blir omtrent 0.046 og kremfargens omtrent 0.923. Forholdet er (0.923 + 0.05) / (0.046 + 0.05), som blir omtrent 10.1:1 med disse avrundede tallene og 10.16:1 med de eksakte. Det består AAA for all tekst, så marineblå tekst på et kremfarget sluttkort er trygt i alle størrelser. Legg en mellomoransje som #e07a2e på samme krem, og forholdet faller til 2.78:1, som ikke består selv for stor tekst. Spar oransjen til en knapp med svart tekst (6.99:1, som er AA men akkurat under AAA), eller til en figur uten ord.

Bruke eksporten

CSS-eksporten er en :root-blokk med egendefinerte egenskaper, --color-1 for fargen som dekker mest av bildet og så videre nedover. JSON-en inneholder hver farges hex, RGB, HSL og dens andel av bildet, noe som er enkelt å lime inn i en designtokenfil eller gi til et skript. Gi variablene nye navn når du vet hvilken farge som er bakgrunnen, hvilken som er teksten og hvilken som er fargeinnslaget.

Hva dette verktøyet ikke gjør

Det vet ikke hvilke farger som er merkevaren din. Et bilde av produktet ditt på et trebord inkluderer bordet. Beskjær til produktet eller emballasjen først hvis du bare vil ha fargene derfra. Det kan heller ikke fortelle deg eksakte trykkfarger: tallene er pikslene i filen, etter kameraet ditt og eventuell redigering, så sjekk dem mot merkevareguiden din før du publiserer dem. Og det vurderer bare tekstkontrast. WCAG har egne regler for ikoner og grensesnittdeler, som denne matrisen ikke vurderer.

Hvis du heller vil slippe å gjøre dette for hånd

Hermoso er markedsføring på autopilot: det undersøker annonsene som allerede fungerer i markedet ditt, lager bilde- og videoannonser i tråd med merkevaren din, planlegger innleggene og kjører betalte kampanjer på dine egne annonsekontoer. Når du legger til merkevaren din fra nettstedet ditt, lærer det produktene, logoen og paletten din, og du kan sette farger på bildetekster og sluttkort med hex-koder. Det fungerer i nettappen, eller inne i Claude, ChatGPT og Cursor via MCP-serveren.

Gratisverktøy: Størrelsesguide for sosiale medier · Instagram-rutenettlager · Open Graph-generator

Ofte stilte spørsmål

Hvordan får jeg en fargepalett fra et bilde?

Slipp bildet inn i verktøyet og velg hvor mange farger du vil ha, fra 5 til 8. Det grupperer like piksler og viser gjennomsnittsfargen for hver gruppe som HEX, RGB og HSL, størst først, med en kopieringsknapp på hver.

Hvilket kontrastforhold trenger jeg for tekst?

WCAG 2.2 nivå AA ber om minst 4,5:1 for normal tekst og 3:1 for stor tekst. Nivå AAA ber om 7:1 og 4,5:1. Stor tekst er minst 18 punkt, eller 14 punkt fet.

Er 4,49:1 nært nok til å bestå AA?

Nei. W3C sier at det beregnede forholdet ikke bør rundes av når det sammenlignes med en terskel, så 4,499:1 oppfyller ikke 4,5:1. Verktøyet vurderer det eksakte tallet.

Hvorfor får jeg den samme paletten hver gang?

Klyngingen starter fra et fast punkt, den vanligste fargen, og legger deretter til fargen lengst unna de allerede valgte. Det er ingen tilfeldig start, så ett bilde gir alltid ett svar.

Lastes bildet mitt opp?

Nei. Det leses med nettleserens egen filleser og telles i et canvas på enheten din. Ingenting sendes noe sted eller lagres.