Färgväljare

Q: Hur hittar jag HEX-koden för en färg på skärmen?

I Chrome, Edge och andra Chromium webbläsare klickar du på Hämta från skärmen och sedan var som helst på skärmen. I andra webbläsare är knappen dold eftersom funktionen EyeDropper inte finns; ta då en skärmbild och använd ett verktyg som hämtar färger från bilder.

Q: Varför ser den tryckta färgen inte ut som på skärmen?

Skärmar blandar ljus RGB medan skrivare blandar tryckfärg CMYK , och många klara skärmfärger går inte att trycka alls. CMYK värdena här är en enkel konvertering utan färgprofil, så be tryckeriet om ett korrektur när färgåtergivningen är viktig.

Q: Kan jag skriva färgnamn?

Ja, de engelska CSS namnen. Alla 148 CSS färgnamn känns igen, till exempel rebeccapurple , navy eller coral , och verktyget konverterar dem till alla format. Svenska namn som ”röd” känns inte igen.

Färgväljare

Gratis färgväljare online. Välj valfri färg och kopiera direkt dess HEX-, RGB-, HSL-, HSV- och CMYK-koder, med kontrast mot vitt och svart.

Välj en färg Färgkod

#1E90FF

Färgkoder

CMYK är en förenklad konvertering utan ICC-profil: tryckta färger kommer att avvika.

Så använder du färgväljaren

Klicka på färgrutan under Välj en färg för att öppna webbläsarens färgväljare och välj sedan en färg. Du kan också skriva eller klistra in ett värde i fältet Färgkod: en HEX-kod som #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) eller ett CSS-namn som tomato.
Den stora förhandsvisningen uppdateras direkt, med HEX-koden skriven i svart eller vitt, beroende på vad som syns bäst mot bakgrunden.
Under Färgkoder kopierar du det format du behöver med knappen Kopiera bredvid det: HEX, RGB, HSL, HSV eller CMYK.
Klicka på Slumpmässig färg när du vill ha inspiration, eller på Hämta från skärmen (i webbläsare som stöder det, till exempel Chrome och Edge) för att hämta färgen från valfri pixel på skärmen, även i andra fönster.

Allt sker i din webbläsare: ingen färg och ingen bild skickas någonstans.

Vad färgkoderna betyder

HEX är den sexsiffriga hexadecimala notationen som används i HTML och CSS. Varje sifferpar är en kanal (röd, grön, blå) från 00 till FF, så #1E90FF betyder röd 30, grön 144, blå 255.
RGB anger samma tre kanaler som decimaltal från 0 till 255. Det är vad de flesta designprogram och programbibliotek förväntar sig.
HSL beskriver en färg med nyans (en vinkel från 0° till 360° på färghjulet), mättnad och ljushet. Det är praktiskt när du vill göra en färg ljusare eller mörkare genom att ändra ett enda tal.
HSV (även kallat HSB) använder nyans, mättnad och värde (ljusstyrka). Det är modellen bakom färgfälten i Photoshop, Figma och många andra program.
CMYK uttrycker färgen som procentandelar av cyan, magenta, gult och svart tryckfärg.

Om CMYK-värdena

CMYK-koderna är en förenklad konvertering: K = 1 − max(R, G, B), sedan C = (1 − R − K) / (1 − K), och på samma sätt för M och Y. Det är standardformeln från läroböckerna, men den använder ingen ICC-profil. Verkligt tryck beror på tryckpress, papper och tryckfärger, så ett tryckeri konverterar dina färger med sin egen profil och resultatet kan skilja sig. Använd siffrorna som en utgångspunkt, inte som ett korrektur för tryck.

Så läser du kontrastvärdena

Under HEX-koden visar förhandsvisningen Kontrast mot vitt och Kontrast mot svart, beräknade med formeln för relativ luminans i WCAG 2. Ett förhållande på minst 4,5:1 krävs för vanlig brödtext på nivå AA, och 3:1 för stor text och gränssnittselement. Om din färg bara når 3:1 mot vitt bör du använda den för stora rubriker eller ikoner och välja en mörkare nyans för text.

Tips

Du kan klistra in HEX-koder utan #: 1e90ff fungerar också, liksom korta former som f60.
Värden med transparens, till exempel rgb(0 0 0 / 50%), accepteras; färgväljaren visar den täckande färgen.
Webbläsarens egen färgdialog ser olika ut i olika system. Behöver du ett exakt värde är det alltid säkrast att skriva det i fältet Färgkod.

Vanliga frågor

Hur hittar jag HEX-koden för en färg på skärmen?

I Chrome, Edge och andra Chromium-webbläsare klickar du på Hämta från skärmen och sedan var som helst på skärmen. I andra webbläsare är knappen dold eftersom funktionen EyeDropper inte finns; ta då en skärmbild och använd ett verktyg som hämtar färger från bilder.

Är HEX-koden samma sak som RGB-koden?

Ja, de beskriver exakt samma färg. HEX skriver de tre kanalerna i bas 16, RGB i bas 10. #FF8000 och rgb(255, 128, 0) är identiska.

Varför ser den tryckta färgen inte ut som på skärmen?

Skärmar blandar ljus (RGB) medan skrivare blandar tryckfärg (CMYK), och många klara skärmfärger går inte att trycka alls. CMYK-värdena här är en enkel konvertering utan färgprofil, så be tryckeriet om ett korrektur när färgåtergivningen är viktig.

Vad säger kontrastvärdet?

Det visar hur läsbar text i den färgen skulle vara mot en vit eller svart bakgrund. WCAG kräver minst 4,5:1 för vanlig text och 3:1 för stor text.

Kan jag skriva färgnamn?

Ja, de engelska CSS-namnen. Alla 148 CSS-färgnamn känns igen, till exempel rebeccapurple, navy eller coral, och verktyget konverterar dem till alla format. Svenska namn som ”röd” känns inte igen.