Hvad gør denne side unik
Denne side adskiller sig fra søsterværktøjerne, der fokuserer på RGB-funktionsnotation eller HSL, ved at levere hex-farvekoden som det primære output. Hex-koden – en sekscifret (eller trecifret forkortelse) RGB-notation – er standarden i CSS og designværktøjer. Hvor RGB og HSL kræver parenteser og funktionssyntaks (rgb(30,144,255) eller hsl(210,100%,56%)), kan hex-værdien #1E90FF indsættes direkte i enhver CSS-egenskab som color, background-color eller border-color uden ekstra syntaks.
En vigtig detalje: hex-koden i sin sekscifrede form indeholder ingen alfakanal. Gennemsigtighed rapporteres separat som en procentdel – f.eks. “Alpha 67% – this pixel is partly transparent.” Dette er en bevidst beslutning, fordi hex-formatet ikke understøtter alpha i den almindelige sekscifrede notation (der findes en ottecifret variant, men den er sjældent brugt og ikke standard i alle browsere). Siden giver dig altså den rene hex-kode, du kan bruge med det samme, samtidig med at den oplyser om eventuel gennemsigtighed.
Sådan fungerer farveudvælgelse fra billeder
Når du indlæser et billede (PNG, JPG, WebP, GIF, AVIF eller HEIC), vises farveværdierne og koordinaterne for billedets centrumspixel med det samme. Du behøver ikke at flytte musen for at få en startværdi – den er klar ved indlæsning.
Bevæger du markøren over billedet, samples farverne pixel for pixel. En forstørret visning hjælper dig med at ramme præcis den pixel, du ønsker, især i områder med anti-aliasing eller komprimering. Klikker du på billedet, gemmes den aktuelt samplede farve i din farvehistorik.
For tastaturbrugere er der fuld understøttelse: Pil op/ned/venstre/højre flytter et sigtekors en pixel ad gangen. Holder du Shift nede samtidig, springer sigtekorset 10 pixels – nyttigt til at navigere hurtigt over større flader. Tryk på Enter eller Mellemrum for at gemme den aktuelle farve.
Outputfelterne viser:
- Billedets dimensioner (bredde × højde)
- Pixelkoordinater (x, y)
- HEX: Sekscifret hex-farvekode (f.eks.
#FF5733) - RGB: Rød, grøn og blå værdier (0-255)
- HSL: Farvetone (0-360°), mætning (0-100%) og lysstyrke (0-100%)
- Eventuel gennemsigtighed som “Alpha ‹n›% – this pixel is partly transparent.”
Klik på en hvilken som helst farveværdi (HEX, RGB eller HSL) for at kopiere den til udklipsholderen. Hvis browseren blokerer adgangen, vises beskeden: “Could not copy – your browser blocked clipboard access.”
HEX, RGB og HSL – farvemodeller forklaret
For at forstå, hvad du får ud af værktøjet, er det nyttigt at kende forskellen på de tre farvemodeller.
HEX (hexadecimal) er en kompakt repræsentation af RGB. Hver farvekanal (rød, grøn, blå) angives med to hex-cifre (0-9 og A-F). F.eks. er #1E90FF opdelt som:
- Rød:
1E= 30 i decimal - Grøn:
90= 144 i decimal - Blå:
FF= 255 i decimal
HEX er udbredt i webudvikling, fordi det er kort og kan indsættes direkte i CSS uden parenteser. Det er også det foretrukne format i de fleste designværktøjer som Figma, Adobe XD og Sketch.
RGB (rød, grøn, blå) er den additive farvemodel, som skærme bruger. Værdierne angives som heltal mellem 0 og 255. I CSS skrives det som rgb(30,144,255).
HSL (hue, saturation, lightness) beskriver farven ud fra menneskelig perception. Hue er en vinkel på farvecirklen (0° = rød, 120° = grøn, 240° = blå). Saturation angiver farvens intensitet (0% = grå, 100% = fuld farve). Lightness angiver lysstyrken (0% = sort, 100% = hvid). For #1E90FF bliver det hsl(210,100%,56%).
Værktøjet viser alle tre formater, så du kan vælge det, der passer bedst til dit projekt. Men siden er designet med hex som førsteprioritet – det er den værdi, der vises først, og som du forventes at kopiere oftest.
Gennemsigtighed og alfakanal
Mange billedformater (PNG, GIF, WebP, AVIF) understøtter gennemsigtighed via en alfakanal. Hver pixel kan have en alpha-værdi fra 0 (helt gennemsigtig) til 255 (helt uigennemsigtig). Når den samplede pixel har en alpha-værdi under 255, rapporterer værktøjet den som en procentdel.
Det er vigtigt at forstå, at hex-koden ikke indeholder denne information. #1E90FF er altid en helt uigennemsigtig farve, uanset om kilden var gennemsigtig. Derfor vises alpha separat: “Alpha 67% – this pixel is partly transparent.”
Siden læser den eksakte pixelværdi, der er gemt i billedfilen. Der tages ikke hensyn til, hvad der måtte være bagved. Hvis du sampler en pixel med 50% gennemsigtighed i et PNG-billede, får du farven, som den er lagret – ikke den blandede farve med baggrunden. Dette er afgørende for designere, der arbejder med UI-elementer, der skal placeres over forskellige baggrunde.
Hvis du har brug for en hex-kode med alpha, findes der en ottecifret variant (f.eks. #1E90FFAB, hvor AB er alpha i hex). Men siden bruger ikke denne notation, da den ikke er standard i alle browsere og kan forvirre. I stedet gives alpha som en separat værdi.
Hvad påvirker de præcise pixelværdier?
Flere faktorer kan gøre, at den farve, du samler, ikke matcher dine forventninger.
Komprimering i JPEG skaber blokke og artefakter, der ændrer pixelværdier. Selv et tilsyneladende ensfarvet område kan indeholde små variationer. Samme problem opstår med anti-aliasing, hvor kanter mellem farver blødes op med mellemliggende nuancer. Screenshots er ofte påvirket af både komprimering og skærmens farveprofil.
Værktøjet skalerer billeder, hvor den længste side overstiger 4096 pixels, ned til en håndterbar størrelse. Det betyder, at pixels i det viste billede svarer til flere pixels i originalen. Hvis du har brug for ekstrem præcision (f.eks. til at matche en bestemt pixel i et højopløseligt foto), bør du overveje at reducere billedet manuelt, før du indlæser det.
Understøttede formater omfatter PNG, JPG, WebP, GIF, AVIF og HEIC. Hvis du forsøger at indlæse et andet format, får du beskeden: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” Hvis filen er korrupt eller ulæselig: “That image could not be opened. It may be corrupted or in an unsupported format.”
Gem og brug farver i dit workflow
Farvehistorikken gemmer op til 12 farver. Hver gang du klikker på billedet, tilføjes den aktuelt samplede farve med beskeden “Saved ‹hex› to your picks.” Farver med identiske RGB-værdier, men forskellig alpha, gemmes som separate indgange – relevant, når du arbejder med gennemsigtige elementer.
Klik på en sværm i historikken for at indlæse farven igen. Derved vises dens HEX, RGB, HSL og alpha-værdi, som om du havde samplet den på ny. Det gør det let at sammenligne flere farver eller hente en tidligere brugt værdi.
Du kopierer en farveværdi ved at klikke på den ønskede repræsentation (HEX, RGB eller HSL). Det virker både fra hoveddisplayet og fra historikken. Indsæt derefter værdien direkte i CSS, et designværktøj eller en farvepalet.
Start over-knappen rydder billedet, tømmer farvehistorikken og nulstiller værktøjet til starttilstand. Brug den, når du vil begynde forfra med et nyt billede.
Ofte stillede spørgsmål
Hvorfor vises der forskellige farver i et tilsyneladende ensartet område?
Det skyldes ofte JPEG-komprimering eller anti-aliasing. Selv en grå væg i et foto kan have små variationer. Brug forstørrelsesglasset for at vælge præcis den pixel, du ønsker.
Hvordan kopierer jeg hex-koden til mit projekt?
Klik på hex-værdien (f.eks. #1E90FF) i værktøjet. Den kopieres til din computers udklipsholder. Hvis browseren blokerer, vises en fejlmeddelelse; prøv da at indstille tilladelser i browserindstillingerne eller brug en anden browser.
Kan jeg bruge billeder med gennemsigtighed?
Ja. Hvis pixlen er delvist gennemsigtig, vises alpha som en procentdel. Hex-koden er som altid uden alpha. Du skal selv håndtere gennemsigtigheden i dit projekt, f.eks. ved at bruge CSS’ rgba() eller en ottecifret hex.
Hvorfor stemmer farven ikke overens med min skærm?
Skærme har forskellige farveprofiler og kalibrering. Værktøjet læser de rå pixelværdier fra billedfilen, ikke den visuelle gengivelse på din skærm. Hvis du sammenligner med en anden enhed, kan der være afvigelser.
Hvad gør jeg, hvis billedet er for stort?
Billeder med en længste side over 4096 pixels skaleres ned. Hvis du har brug for højere præcision, kan du beskære eller skalere billedet manuelt inden indlæsning.
Hvordan nulstiller jeg værktøjet?
Klik på “Start over”. Billedet fjernes, farvehistorikken tømmes, og du starter forfra med en ren tilstand.