Sådan vælger du en præcis farve fra et billede: HEX, RGB og HSL

Hvis du vil have den præcise farve fra et billede, skal du aflæse værdien for ét pixel i stedet for at gætte den med øjet. Åbn billedet i farvevælgeren, før musen hen over stedet, klik, og kopier HEX-koden. Aflæsningen er den gemte værdi for det pixel, så den er den samme, hver gang du vælger det samme sted i den samme fil.

Farvevælger fra billedeHar brug for den præcise farvekodePrøv gratis

Hvad et pixel gemmer

Hvert pixel er en lille firkant med farve. På en skærm eller i en billedfil gemmes det som tre tal for rød, grøn og blå, hver fra 0 til 255. Ren rød er 255, 0, 0. De tre tal indeholder de samme oplysninger i alle formater, så den samme farve kan skrives på flere måder.

HEX, RGB og HSL

• HEX skriver hvert tal i hexadecimal, to tegn pr. kanal. #FF0000 er ren rød. Webssider, CSS og de fleste designværktøjer bruger det.
• RGB skriver de samme tal i decimal, som rgb(255, 0, 0). Det er den samme farve som HEX-koden.
• HSL beskriver farven, sådan som mennesker taler om den. Nuance er vinklen rundt på farvehjulet, mætning er, hvor kraftig farven er, og lysstyrke er, hvor lys eller mørk den er. hsl(0, 100%, 50%) er ren rød.

Brug HEX, når du indsætter en farve i kode, RGB når et værktøj beder om det, og HSL når du vil have en lysere eller mørkere variant af den samme nuance. Hvis du kun ændrer lysstyrken i HSL, beholder du nuancen, hvilket er svære at gøre med HEX i hånden. Til kontrolkontrol mellem to farver, se HEX, RGB, HSL, CMYK og kontrast.

Her er en farve brugt i et stylesheet:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Hvorfor koden måske ikke passer med skærmen

• Billedet er komprimeret. JPEG sparer plads ved at udjævne fine detaljer, så pixels tæt på en kant kan afvige lidt fra den farve, du ser midt i et område.
• Kanter flyder sammen. Hvor to farver mødes, er pixels imellem dem blandinger. De er ikke en farve i sig selv.
• Farveprofiler er forskellige. Vælgeren læser de værdier, browseren afkoder, og de er i sRGB. Et foto gemt med en bred farveprofil kan se anderledes ud i andre programmer.
• Skalering blander pixels. Et skærmbillede taget i en skaleret skærmstørrelse kan have blandede pixels. Tag skærmbilledet i fuld størrelse, når du kan.
• Meget store billeder læses fra en kopi. Billeder over 6000 pixels på den længste side læses fra en kopi på 6000 pixels, så et enkelt pixel kan afvige en smule fra den fulde fil.

Vælg fra midten af et ensfarvet område

Find et område i én farve, og flyt så til midten af det. Lupen viser de 11 gange 11 pixels omkring markøren, så du kan se, om stedet er blandet eller ensfarvet. Med tastaturet flytter du krydset ét pixel ad gangen med piletasterne, eller ti ad gangen med Shift, og trykker på Enter for at vælge. Kontrollér aflæsningen, før du kopierer den.

Brug paletten til et farveskema

Et foto har sjældent kun én farve, du er interesseret i. Paletten viser op til seks af de vigtigste farver. Den virker ved at runde hvert pixel af til 16 niveauer pr. kanal, tælle grupperne og beholde de hyppigste grupper, der adskiller sig fra hinanden. Hver farveprøve viser gennemsnittet af sin gruppe. Tryk på en farveprøve for at kopiere dens HEX-kode. Brug paletten som udgangspunkt, for den er et gennemsnit og ikke en målt brandfarve.

Konvertering mellem formater

Hvis et designværktøj beder om et andet format, så indsæt HEX-koden i en farvekonverter. Den konverterer mellem HEX, RGB og HSL uden at ændre farven, så resultatet matcher den kode, du valgte.

Seneste valg og privatliv

Værktøjet gemmer dine seneste valg på siden, så du kan sammenligne dem. De lever kun i hukommelsen på denne fane og forsvinder, når du lukker den. Selve billedet læses i din browser og sendes aldrig til en server.

Sådan gør du det med fixmint

1. Åbn farvevælgeren til billeder og træk fotoet ind.
2. Før musen hen over stedet. Eller klik på billedet og brug piletasterne til at flytte krydset ét pixel ad gangen, med Shift holdt nede for ti pixels.
3. Klik, eller tryk på Enter, for at vælge farven. Kontrollér aflæsningen, før du kopierer den.
4. Brug knappen Kopiér ved siden af HEX, RGB eller HSL for at kopiere den værdi, du har brug for.
5. Hvis et designværktøj beder om et andet format, så indsæt værdien i farvekonverteren.

Hurtige svar

Hvorfor ser farven anderledes ud på min skærm? Din skærm viser en farvestyret, skaleret version af filen. Vælg fra midten af et ensfarvet område, og sammenlign HEX-koden med en kendt farveprøve.

Hvilket format skal jeg kopiere? HEX til webssider og de fleste designværktøjer. Brug RGB eller HSL, når et værktøj beder om det.

Uploader værktøjet mit billede? Nej. Billedet afkodes og læses i din browser.