CodeKitHubHvad er dette værktøj?
En farvevælger omdanner et visuelt valg — denne nuance af blå, netop den pixel i et logo — til de numeriske koder, software forstår. Den samme farve har flere ækvivalente notationer: HEX (#3b82f6) dominerer CSS og designoverdragelser, RGB (59, 130, 246) matcher, hvordan skærme og kode repræsenterer farve, og HSL (217°, 91%, 60%) beskriver farvetone, mætning og lyshed på en måde, mennesker kan ræsonnere om.
Den anden halvdel af værktøjet er en billedpipette. Upload et screenshot, logo eller foto, og klik et hvilket som helst sted for at hente farven under markøren — den standardmæssige måde at besvare "hvilken præcis farve er det her?". Hvor browseren understøtter EyeDropper API'en, bruges den indbyggede forstørrende lup; i andre browsere læser værktøjet pixelværdien fra en canvas-kopi af billedet. I begge tilfælde foregår behandlingen lokalt: billedet uploades aldrig.
Hvorfor bruge det?
- Tre formater på én gang: hver valgt farve vises som HEX, RGB og HSL samtidig, hver med en kopieringsknap i ét klik — intet separat konverteringstrin.
- Vælg fra et billede: upload et hvilket som helst billede, og klik for at hente den nøjagtige pixelfarve — ideelt til at udtrække brandfarver fra et logo eller matche en farve set i et screenshot.
- Bruger browserens indbyggede EyeDropper med lup, når den er tilgængelig, og falder ellers tilbage på præcis canvas-pixelaflæsning.
- En live forhåndsvisningsprøve viser den aktuelle farve med det samme, så du kan bekræfte valget, før du kopierer.
- Gratis, øjeblikkeligt og fuldt lokalt: farver beregnes og billeder læses i din browser — intet uploades, gemmes eller logges.
Sådan bruger du det
- Vælg en farve med farvefeltet, eller indsæt/redigér en værdi direkte.
- For at hente farve fra et billede skal du uploade et billede og klikke på det punkt, hvis farve du ønsker.
- Læs HEX-, RGB- og HSL-værdierne, vist sammen med en live forhåndsvisningsprøve.
- Klik på kopieringsknappen ud for det format, du har brug for — HEX til stylesheets, RGB eller HSL til kode.
Eksempel
Input
At klikke på det blå område af et uploadet logoOutput
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Alle tre linjer beskriver den identiske farve. Brug HEX i stylesheets og designværktøjer, RGB hvor kode forventer kanalværdier, og HSL når du vil udlede lysere eller mørkere varianter ved kun at ændre det sidste tal.
Hvilket farveformat til hvilken opgave
Moderne CSS accepterer alle tre, hvor som helst en farve er tilladt, så valget handler om arbejdsgang, ikke kompatibilitet. Teams standardiserer typisk på HEX i designtokens og bruger derefter HSL, mens de udforsker variationer — ændr lysheden med 10-15 point for at få en brugbar hover-tilstand uden at skifte farvetonen.
| Format | Eksempel | Bedst til |
|---|---|---|
| HEX | #3b82f6 | CSS, designværktøjer, deling af farver i chat og specifikationer |
| RGB | rgb(59, 130, 246) | Kode der manipulerer kanaler, canvas-tegning, rgba()-gennemsigtighed |
| HSL | hsl(217, 91%, 60%) | At lave lysere/mørkere/hover-varianter, opbygge paletter |
Fra valgt farve til færdig CSS
At hente en farve er normalt trin ét i en styling-opgave. Har du brug for den samme farve i andre notationer — CMYK til print eller en OKLCH-værdi til bredt farvegamut-CSS — fortsætter Color Converter, hvor denne vælger slipper.
Den valgte farve går ofte direkte videre til en visuel effekt: Box Shadow Generator tager en HEX-værdi til realistiske skygger, og runde kort bygget med Border Radius Generator fuldender udseendet.
→ Farvekonverter · Box Shadow-generator · Border Radius-generator
Ofte stillede spørgsmål
Hvad er forskellen på HEX, RGB og HSL?
Det er tre notationer for den samme farvemodel. HEX pakker de røde, grønne og blå kanaler ind i seks hexadecimale cifre (#3b82f6) og er den mest almindelige form i CSS og designværktøjer. RGB angiver de samme tre kanaler som decimaltal fra 0 til 255. HSL udtrykker farven som farvetone (0–360°), mætning og lyshed — langt mere intuitivt, når du vil have "samme farve, bare lysere". At konvertere mellem dem ændrer aldrig farven.
Hvordan fungerer det at vælge en farve fra et billede?
Det uploadede billede tegnes på et usynligt canvas i din browser. Når du klikker, læser værktøjet de røde, grønne og blå værdier for pixlen på netop den position og konverterer dem til HEX, RGB og HSL. I browsere, der understøtter EyeDropper API'en (Chrome og Edge på desktop), åbnes i stedet en indbygget forstørrende lup, så du kan vælge med pixelpræcision hvor som helst på skærmen.
Bliver mit billede uploadet nogen steder?
Nej. Billedet åbnes direkte af din browser og læses lokalt fra et canvas; ingen fil og ingen farvedata sendes eller gemmes nogensinde. Du kan indlæse siden, gå offline, og både vælgeren og billedpipetten bliver ved med at virke — hvilket gør det sikkert for uudgivne designs og interne screenshots.
Hvorfor matcher den valgte farve ikke helt det, jeg ser på skærmen?
To almindelige grunde. Anti-aliasing: pixler ved kanten af tekst og former blandes med baggrunden, så et klik en pixel forkert giver en mellemfarve — hent i stedet farven fra midten af et solidt område. Farvestyring: JPG/PNG-filer med usædvanlige farveprofiler kan gengives lidt forskelligt på tværs af skærme; værktøjet rapporterer pixelværdien, som den er gemt i filen, hvilket er den værdi, du ønsker til designarbejde.
Hvilket format bør jeg kopiere til CSS?
HEX er det sikreste standardvalg — enhver browser og ethvert værktøj accepterer det. Brug HSL, når du planlægger at lave hover- eller dark mode-varianter, fordi det kun at justere lyshedskomponenten holder farvetone og mætning konsistente. RGB er primært nyttigt, når kode bygger farver ud fra numeriske kanaler, eller ved tilføjelse af gennemsigtighed, hvor rgba(59, 130, 246, 0.5) læses tydeligere end en otte-cifret HEX.