CodeKitHubVad är detta verktyg?
En färgväljare omvandlar ett visuellt val — den här nyansen av blått, exakt den där pixeln i en logotyp — till de numeriska koder mjukvara förstår. Samma färg har flera likvärdiga notationer: HEX (#3b82f6) dominerar CSS och designöverlämningar, RGB (59, 130, 246) matchar hur skärmar och kod representerar färg, och HSL (217°, 91%, 60%) beskriver nyans, mättnad och ljushet på ett sätt människor kan resonera kring.
Den andra halvan av verktyget är en bildpipett. Ladda upp en skärmdump, logotyp eller ett foto och klicka på valfri punkt för att sampla färgen under markören — det vanliga sättet att svara på "exakt vilken färg är det här?". Där webbläsaren stöder EyeDropper-API:et används den inbyggda förstoringsluppen; i andra webbläsare läser verktyget pixelvärdet från en canvas-kopia av bilden. I båda fallen sker bearbetningen lokalt: bilden laddas aldrig upp.
Varför använda det?
- Tre format samtidigt: varje vald färg visas som HEX, RGB och HSL samtidigt, var och en med en kopieringsknapp med ett klick — inget separat konverteringssteg.
- Välj från en bild: ladda upp valfri bild och klicka för att sampla den exakta pixelfärgen — perfekt för att extrahera varumärkesfärger från en logotyp eller matcha en färg som setts i en skärmdump.
- Använder webbläsarens inbyggda EyeDropper med förstoringsglas när det finns tillgängligt, och faller annars tillbaka på exakt canvas-pixelavläsning.
- Ett förhandsvisningsprov i realtid visar den aktuella färgen på en blick, så du kan verifiera valet innan du kopierar.
- Gratis, direkt och helt lokalt: färger beräknas och bilder läses i din webbläsare — inget laddas upp, lagras eller loggas.
Så använder du det
- Välj en färg med färgfältet, eller klistra in/redigera ett värde direkt.
- För att sampla från en bild, ladda upp en bild och klicka på punkten vars färg du vill ha.
- Läs HEX-, RGB- och HSL-värdena, visade tillsammans med ett förhandsvisningsprov i realtid.
- Klicka på kopieringsknappen bredvid det format du behöver — HEX för CSS, RGB eller HSL för kod.
Exempel
Inmatning
Klicka på det blå området i en uppladdad logotypResultat
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Alla tre rader beskriver identisk färg. Använd HEX i stilmallar och designverktyg, RGB där kod förväntar sig kanalvärden, och HSL när du vill härleda ljusare eller mörkare varianter genom att bara ändra den sista siffran.
Vilket färgformat för vilket jobb
Modern CSS accepterar alla tre överallt en färg är tillåten, så valet handlar om arbetsflöde, inte kompatibilitet. Team standardiserar ofta på HEX i designtokens och använder sedan HSL vid utforskning av variationer — ändra ljusheten med 10–15 punkter för att få ett användbart hover-läge utan att förskjuta nyansen.
| Format | Exempel | Bäst för |
|---|---|---|
| HEX | #3b82f6 | CSS, designverktyg, dela färger i chatt och specifikationer |
| RGB | rgb(59, 130, 246) | Kod som manipulerar kanaler, canvas-ritning, rgba()-transparens |
| HSL | hsl(217, 91%, 60%) | Skapa ljusare/mörkare/hover-varianter, bygga paletter |
Från vald färg till färdig CSS
Att sampla en färg är oftast steg ett i en styling-uppgift. Om du behöver samma färg i andra notationer — CMYK för tryck eller ett OKLCH-värde för brett färgomfång i CSS — fortsätter Color Converter där den här väljaren slutar.
Den valda färgen går ofta rakt in i en visuell effekt: Box Shadow Generator tar ett HEX-värde för realistiska skuggor, och rundade kort byggda med Border Radius Generator färdigställer utseendet.
→ Färgkonverterare · Box Shadow-generator · Border Radius-generator
Vanliga frågor
Vad är skillnaden mellan HEX, RGB och HSL?
De är tre notationer för samma färgmodell. HEX packar de röda, gröna och blå kanalerna i sex hexadecimala siffror (#3b82f6) och är den vanligaste formen i CSS och designverktyg. RGB listar samma tre kanaler som decimaltal från 0 till 255. HSL uttrycker om färgen som nyans (0–360°), mättnad och ljushet — betydligt mer intuitivt när du vill ha "samma färg, bara ljusare". Att konvertera mellan dem ändrar aldrig färgen.
Hur fungerar det att välja en färg från en bild?
Den uppladdade bilden ritas upp på en osynlig canvas i din webbläsare. När du klickar läser verktyget de röda, gröna och blå värdena för pixeln på exakt den positionen och konverterar dem till HEX, RGB och HSL. I webbläsare som stöder EyeDropper-API:et (Chrome och Edge på skrivbordet) öppnas istället en inbyggd förstoringslupp så du kan välja med pixelprecision var som helst på skärmen.
Laddas min bild upp någonstans?
Nej. Bilden öppnas direkt av din webbläsare och läses lokalt från en canvas; ingen fil och ingen färgdata överförs eller lagras någonsin. Du kan ladda sidan, gå offline, och både väljaren och bildpipetten fortsätter fungera — vilket gör det säkert för icke-publicerade designer och interna skärmdumpar.
Varför matchar den valda färgen inte exakt vad jag ser på skärmen?
Två vanliga orsaker. Kantutjämning: pixlar vid kanterna av text och former blandas med bakgrunden, så att klicka en pixel fel ger en mellanliggande färg — sampla istället från den solida mitten av ett område. Färghantering: JPG/PNG-filer med ovanliga färgprofiler kan renderas något olika mellan skärmar; verktyget rapporterar pixelvärdet som det lagras i filen, vilket är det värde du vill ha för designarbete.
Vilket format bör jag kopiera för CSS?
HEX är det säkraste standardvalet — varje webbläsare och verktyg accepterar det. Använd HSL när du planerar att skapa hover- eller mörkt-läge-varianter, eftersom att bara justera ljushetskomponenten håller nyans och mättnad konsekventa. RGB är främst användbart när kod bygger färger från numeriska kanaler, eller vid tillägg av transparens, där rgba(59, 130, 246, 0.5) läses tydligare än en åttasiffrig HEX.