Farve fra Billede
Upload et billede, brug Eye Dropper på pixels, og eksportér HEX, RGB, HSL eller OKLCH farver.
Hvad Farve fra Billede gør
Farve fra Billede udtrækker farver direkte fra et uploadet billede. Den fungerer som en color picker from image, hvor du vælger synlige pixels i et foto, en illustration, et produktbillede eller et skærmbillede og derefter læser farven i formater som HEX, RGB, HSL, HSV, OKLCH, CMYK og RGBA. Resultatet er nyttigt, når en eksisterende visuel stil skal omsættes til en brugbar palette.
Et billede indeholder ofte naturlige farveforhold, som er svære at opbygge fra bunden. Lys, skygge, materiale og omgivelser kan skabe nuancer, der allerede føles sammenhængende. Farve fra Billede hjælper med at fange disse nuancer, men giver også kontroller til at vurdere dem, før de kopieres eller eksporteres.
Den synlige brugerflade kombinerer billedupload, farvevalg, gemte paletfarver, formatvalg, variationer, harmonier, farveblindhedssimulering, konvertering og kontrastkontrol. Det betyder, at en udtrukket farve kan vurderes som mere end en enkelt pixel. Du kan se, om den egner sig til en baggrund, en accent, en kant, et ikon eller en tekstrelateret rolle.
Sådan bruger du Farve fra Billede
- Upload et billede med knappen Vælg billede, eller brug det synlige uploadområde, hvis du arbejder med træk og slip.
- Klik eller tryk på et område i billedet for at vælge en farve fra den synlige pixel.
- Brug paletkontrollen til at gemme flere valgte farver, hvis billedet skal give et helt farvesæt.
- Skift formatmenuen, når farven skal læses som HEX, RGB, HSL, HSV, OKLCH, CMYK eller RGBA.
- Kopiér den aktive farve, når koden passer til dit næste trin.
- Åbn Farvevarianter og Farveharmonier for at vurdere, om den udtrukne farve kan udvides til flere roller.
- Brug Farveblindhed, Farvekonvertering og Kontrastkontrol til at undersøge læsbarhed og tekniske værdier.
- Brug Eksportér farver, når de valgte billedfarver skal kopieres samlet i et eksportformat.
Vælg pixels der giver rene farver
Det vigtigste valg er ikke altid den mest iøjnefaldende pixel. En kant mellem to områder kan blande motiv, skygge og baggrund, så farven ikke repræsenterer nogen af delene rent. Klik hellere lidt inde i den form eller overflade, du vil bruge som reference. Det giver en mere stabil farve, som er lettere at genbruge i CSS eller designarbejde.
Fotos kan også indeholde støj, komprimering og belysning, der skaber mange næsten ens farver. Hvis du vælger for mange nabopixels, kan paletten blive tung uden at give flere nyttige roller. Brug derfor gemte farver til at samle kandidatværdier, og fjern eller ignorer farver, der kun gentager den samme visuelle funktion.
| Billedområde | Risiko | Bedre valg |
|---|---|---|
| Kant mellem motiv og baggrund | Blandet pixel, der ikke svarer til en ren flade | Vælg lidt inde i motivet eller baggrunden |
| Stærk skygge | Farven bliver for mørk til sin egentlige rolle | Vælg en mellemlys del af samme overflade |
| Refleks eller højlys | Farven bliver for lys og mister mætning | Vælg et område med mere jævn belysning |
| Komprimeret billede | Nabopixels varierer uden designmæssig grund | Sammenlign flere punkter før kopiering |
Fra billedfarve til brugbar palette
En palette fra et billede bør have tydelige roller. En hovedfarve kan bruges som accent eller brandnær reference. En lys værdi kan bruges til baggrund eller kort. En mørk værdi kan bruges til tekst, kant eller aktiv tilstand. Hvis alle farverne har næsten samme lyshed, kan paletten se harmonisk ud, men stadig være svær at bruge i en grænseflade.
Farvevarianter kan hjælpe, når en udtrukket farve skal tilpasses uden at miste sit udgangspunkt. En lysere variant kan gøre en stærk billedfarve brugbar på store flader, mens en mørkere variant kan øge kontrasten. Farveharmonier kan give ekstra farver, men de bør stadig sammenlignes med billedets oprindelige stemning og med den praktiske rolle, farven skal have.
- Vælg én eller to dominerende farver som udgangspunkt.
- Gem kun støttende farver, der tilføjer en ny rolle.
- Brug kontrastkontrol før billedfarver anvendes til tekst.
- Eksportér først, når paletten har færre, tydelige og navngivne formål.
Farveformater ved billedudtræk
Efter en farve er valgt fra billedet, handler næste beslutning om format. HEX er let at indsætte i CSS og design tokens. RGB gør kanalværdierne tydelige og er nyttigt, hvis farven skal bruges i beregninger. HSL er praktisk, når lyshed og mætning skal justeres manuelt. OKLCH kan være relevant i moderne farvesystemer, hvor perceptuel lyshed er vigtig.
| Format | Hvad det hjælper med | Hvornår det passer |
|---|---|---|
| HEX | Kompakt webkode | Når billedfarven skal gemmes som CSS variabel eller token |
| RGB | Separate kanalværdier | Når farven skal bruges i kode, beregning eller dokumentation |
| HSL | Justering af farvetone, mætning og lyshed | Når en udtrukket farve skal gøres lysere, mørkere eller roligere |
| OKLCH | Perceptuel sammenligning | Når moderne CSS eller design tokens bruger mere avanceret farvestyring |
| CMYK | Trykrelateret sammenligning | Når billedfarver skal vurderes uden for ren skærmbrug |
Kontroller læsbarhed og tilgængelighed
Billedfarver virker ofte balancerede, fordi fotoet allerede har tekstur, lys og skygge. Når farven flyttes til en flad brugerflade, forsvinder den kontekst. En brunlig skygge kan se flot ud i et produktfoto og samtidig være for svag som tekst. En klar accent kan se levende ud i et billede og samtidig dominere for meget som baggrund.
Brug kontrastkontrollen, når en udtrukket farve skal stå sammen med tekst eller UI elementer. Brug farveblindhedssimuleringen, når flere billedfarver skal kommunikere forskel. Hvis to udtrukne farver bliver for ens i simuleringen, bør paletten justeres med mere lysheds eller kontrastforskel, før den bruges i diagrammer, statusfelter eller vigtige knapper.
Sortér billedfarver efter funktion
En god billedpalette handler ikke om at gemme flest mulige pixels. Den handler om at vælge farver, der kan få klare funktioner. Start med at finde en hovedfarve, der repræsenterer billedets stemning. Vælg derefter en lys støttefarve, en mørkere kontrastfarve og eventuelt en diskret accent. Hvis to farver kun adskiller sig minimalt, bør kun den mest brugbare gemmes.
Det er også vigtigt at skelne mellem motivfarver og atmosfærefarver. En motivfarve kan være velegnet til brandnære detaljer, mens en atmosfærefarve fra lys eller baggrund ofte er bedre til flader. Hvis du blander de to uden plan, kan paletten miste hierarki. Brug derfor de gemte paletfarver som kandidater og vurder dem efter deres opgave, ikke efter hvor flot de ser ud i selve billedet.
Når paletten skal bruges i UI, bør hver farve testes fladt. Et foto kan skjule svag kontrast gennem tekstur og skygge, men en knap, et kort eller et inputfelt har ofte en mere ensartet flade. En farve der virker dyb i billedet, kan se grå eller beskidt ud som baggrund. Derfor bør udtrukne farver altid ses i forhold til den rolle, de skal have efter billedet.
Eksportér kun den rensede billedpalette
Eksport bør være sidste trin, ikke første. Når farverne er valgt fra billedet, skal du først fjerne dubletter, urolige pixels og værdier uden klar funktion. Derefter kan du beslutte formatet. HEX er normalt let at dele med udviklere. RGB er nyttigt til kode eller beregninger. HSL gør det lettere at forklare justeringer af lyshed og mætning. OKLCH kan være relevant, hvis projektet bruger moderne CSS farver.
En renset billedpalette bør også have en praktisk rækkefølge. Placer hovedfarven først, derefter støttende farver, og gem eventuelle kontrast eller baggrundsfarver samlet. Det gør eksporten lettere at læse og reducerer risikoen for, at en tilfældig pixel bliver brugt som hovedfarve. Hvis paletten skal deles med andre, kan farverne senere navngives efter rolle som accent, surface, border eller text.
Hvis billedet bruges som inspiration til et brandsystem, bør du gemme både den nøjagtige udtrukne farve og den justerede produktionsfarve, når de ikke er identiske. Den nøjagtige pixel dokumenterer kilden, mens den justerede værdi kan være mere læsbar og stabil i brugerfladen. Det er ofte bedre end at tvinge en billedfarve direkte ind i en rolle, den ikke passer til.
Når farverne skal bruges sammen med tekst, bør du også vurdere forskellen mellem billedets stemning og den faktiske læseopgave. En varm beige fra et foto kan være flot som baggrund, men for svag under grå tekst. En dyb blå skygge kan føles eksklusiv i billedet, men blive for tung som stor flade. Derfor bør hver udtrukket farve testes i den størrelse og rolle, den skal have. Store baggrunde kræver ofte roligere værdier, mens små detaljer kan tåle mere mætning. Tekst og knapper kræver tydelig kontrast før de får en produktionsrolle.
Gem gerne den oprindelige billedfarve som reference, hvis den efterfølgende justeres. Det gør det lettere at forklare, hvorfor produktionsfarven ikke er identisk med pixelværdien. En god billedpalette må gerne være inspireret af billedet uden at være fanget af alle billedets tekniske ujævnheder.
Den ekstra kontrol gør også samarbejde lettere, fordi andre kan se forskellen mellem inspiration, valgt pixel og endelig produktionsværdi.
Typiske fejl ved farver fra billeder
- At vælge fra en kant: resultatet kan blive en tilfældig blanding af to områder.
- At gemme for mange næsten ens farver: paletten bliver større uden at blive mere brugbar.
- At ignorere skygger: en skyggefarve kan være for mørk til hovedrollen.
- At bruge billedfarver direkte til tekst: kontrast skal kontrolleres, før farven får en læsefunktion.
- At eksportere uden roller: navngiv farver efter formål, så de ikke bruges forkert senere.
Når en udtrukket palette skal udbygges, kan Farvepalette bruges til at arbejde videre med kombinationer. Når en billedfarve skal bruges sammen med tekst, bør den kontrolleres i Kontrast Checker før den kopieres til produktion.