Så väljer du en exakt färg från en bild: HEX, RGB och HSL

För att få den exakta färgen från en bild ska du läsa av värdet för en enskild pixel i stället för att gissa med ögat. Öppna bilden i färgväljaren, håll muspekaren över platsen, klicka och kopiera HEX-koden. Avläsningen är det lagrade värdet för den pixeln, så det blir detsamma varje gång du väljer samma plats i samma fil.

BildfärgväljareBehöver exakt färgkodGör det gratis

Vad en pixel lagrar

Varje pixel är en liten kvadrat av en färg. På en skärm eller i en bildfil lagras den som tre tal för rött, grönt och blått, vart och ett från 0 till 255. Ren röd är 255, 0, 0. Samma tre tal innehåller samma information i alla format, så en färg kan skrivas på flera sätt.

HEX, RGB och HSL

• HEX skriver varje tal i hexadecimalt, två tecken per kanal. #FF0000 är ren röd. Webbsidor, CSS och de flesta designverktyg använder det.
• RGB skriver samma tal i decimalform, som rgb(255, 0, 0). Det är samma färg som HEX-koden.
• HSL beskriver färgen på samma sätt som människor pratar om den. Nyans är vinkeln på färghjulet, mättnad är hur stark färgen är och ljushet är hur ljus eller mörk den är. hsl(0, 100%, 50%) är ren röd.

Använd HEX när du klistrar in en färg i kod, RGB när ett verktyg ber om det och HSL när du vill ha en ljusare eller mörkare variant av samma nyans. Om du bara ändrar ljusheten i HSL behåller du nyansen, vilket är svårare att göra för hand med HEX. För kontrollen av kontrast mellan två färger, se HEX, RGB, HSL, CMYK och kontrast.

Så här kan en färg se ut i en stilmall:

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

Varför koden kanske inte stämmer med skärmen

• Bilden är komprimerad. JPEG sparar plats genom att jämna ut fina detaljer, så pixlar nära en kant kan skilja sig något från färgen du ser mitt i ett område.
• Kanter blandas. Där två färger möts är pixlarna mellan dem blandningar. De är inte en egen färg.
• Färgprofiler skiljer sig åt. Färgväljaren läser de värden som webbläsaren avkodar, och de är i sRGB. Ett foto som sparats med en bred färgprofil kan se annorlunda ut i andra program.
• Skalning blandar pixlar. En skärmbild tagen i en skalad skärmstorlek kan ha blandade pixlar. Ta skärmbilden i full storlek när du kan.
• Mycket stora bilder läses från en kopia. Bilder som är större än 6000 pixlar på den längsta sidan läses från en kopia på 6000 pixlar, så en enskild pixel kan skilja sig något från originalfilen i full storlek.

Välj från mitten av ett jämnt område

Hitta ett område i en enda färg och flytta sedan till dess mitt. Förstoringsglaset visar de 11 × 11 pixlarna runt pekaren, så du ser om platsen är blandad eller jämn. Med tangentbordet flyttar du korshåret en pixel i taget med piltangenterna, eller tio i taget med Shift, och trycker på Enter för att välja. Kontrollera avläsningen innan du kopierar den.

Använd paletten för ett färgschema

Ett foto har sällan bara en färg som du bryr dig om. Paletten visar upp till sex av dess huvudfärger. Den fungerar genom att runda av varje pixel till 16 nivåer per kanal, räkna grupperna och behålla de vanligaste grupperna som skiljer sig från varandra. Varje färgruta visar medelvärdet för sin grupp. Tryck på en färgruta för att kopiera dess HEX-kod. Betrakta paletten som en utgångspunkt, eftersom den är ett medelvärde och inte en uppmätt varumärkesfärg.

Omvandla mellan format

Om ett designverktyg vill ha ett annat format klistrar du in HEX-koden i en färgkonverterare. Den konverterar mellan HEX, RGB och HSL utan att ändra färgen, så resultatet stämmer med koden du valde.

Senaste val och integritet

Verktyget sparar dina senaste val på sidan så att du kan jämföra dem. De finns bara i minnet för den här fliken och försvinner när du stänger den. Bilden läses i din webbläsare och skickas aldrig till någon server.

Så här gör du med fixmint

1. Öppna bildfärgväljaren och släpp in fotot.
2. För pekaren över platsen. Eller markera bilden och använd piltangenterna för att flytta korshåret en pixel i taget, med Shift för tio pixlar.
3. Klicka, eller tryck på Enter, för att välja färgen. Kontrollera avläsningen innan du kopierar den.
4. Använd knappen Kopiera bredvid HEX, RGB eller HSL för att kopiera det värde du behöver.
5. Om ett designverktyg vill ha ett annat format klistrar du in värdet i färgkonverteraren.

Snabba svar

Varför ser färgen annorlunda ut på min skärm? Din skärm visar en färghanterad, skalad version av filen. Välj från mitten av ett jämnt område och jämför HEX-koden mot en känd färgruta.

Vilket format ska jag kopiera? HEX för webbsidor och de flesta designverktyg. Använd RGB eller HSL när ett verktyg ber om det.

Laddar verktyget upp min bild? Nej. Bilden avkodas och läses i din webbläsare.