Farvevælger giver et pixel-præcist eyedropper-værktøj til at vælge farver fra et element på en webside — tekst, baggrunde, billeder, gradienter eller en synlig pixel. Få den præcise farveværdi simultant i HEX-, RGB- og HSL-format med en forstørret pixel-forhåndsvisning til præcis målretning. Tidligere valgte farver gemmes i en historiestribe for hurtig genbrug.
At udtrække præcise farveværdier fra en webside er en almindelig opgave — at matche en brandfarve, referere til et design eller kontrollere en nuance brugt på en konkurrents sted. Browser-DevTools viser farver i Stilarter-panelet, men kun for elementer med eksplicitte CSS-farveegenskaber — ikke for billeder, gradienter eller nedarvede farver. Farvevælger-eyedropperen fungerer på pixelniveau — den læser den faktisk gengivede farve af den pixel, der er under din markør, uanset hvordan den farve opstod. Klik på en blå himmel i et hero-billede, et gradient-midtpunkt eller et semitransparent overlay, og få den præcise sammensatte farveværdi. Den forstørrede forhåndsvisningscirkel viser en zoomet visning af omgivende pixels, så du kan målrette den præcise pixel, du ønsker. Alle tre formatoutputs (HEX, RGB, HSL) vises simultant — klik på et format for at kopiere. Dine seneste valg gemmes i en farvehistoriestribe i bunden, så du nemt kan vende tilbage til en tidligere valgt farve.
En forstørret cirkulær forhåndsvisning viser zoomede pixels omkring din markør med trådkors-målretning til præcist pixelvalg. Vælg farver fra tekst, baggrunde, billeder, gradienter, SVG'er eller en synlig pixel på siden.
Hver valgt farve vises i alle tre formater på én gang: HEX (#7c3aed), RGB (rgb(124, 58, 237)) og HSL (hsl(262, 83%, 58%)). Ingen skift eller konvertering — alle formater er øjeblikkeligt tilgængelige.
Klik på en formatrække (HEX, RGB eller HSL) for at kopiere den specifikke værdi til din udklipsholder øjeblikkeligt. En kort Kopieret!-animation bekræfter handlingen. Indsæt direkte i din CSS, designværktøj eller farvespecifikation.
Dine senest valgte farver gemmes i en visuel historiestribe, der viser farveprøver. Klik på en prøve for at genvælge den farve og se dens værdier igen. Historikken forbliver under din session — vælg farver fra flere sider.
Den valgte farve vises som en stor prøve over formatværdierne, hvilket gør det nemt at se og verificere farven. Prøven er stor nok til at vise subtile nuanceforskelle, der kan se identiske ud ved mindre størrelser.
Vælger farver fra en synlig pixel: CSS-farver, CSS-gradienter, billeder (PNG, JPG, SVG), canvas-elementer, videoframes, semitransparente overlays (vælger den sammensatte farve) og endda iframes. Hvis du kan se det, kan du vælge det.
Vælg den præcise brandfarve fra en virksomheds websted for at sikre, at dit design eller indhold bruger den korrekte nuance. Få den præcise HEX-værdi i stedet for at gætte eller søge gennem brandretningslinjer.
Vælg farver direkte fra hero-billeder, produktfotos eller illustrationer. Udtræk en dominerende farve fra et foto til brug som en komplementær baggrund i dit design.
Designspecifikationen siger, at knappen skal være #7c3aed. Vælg farven fra den implementerede knap for at verificere, at den stemmer overens. Fanger subtile farveforskelle, der er usynlige for det blotte øje.
Gennemse designinspirationswebsteder og vælg farver, der fanger dit øje. Historiestriben opbygger en palet af farver, du har valgt under sessionen — brug den som udgangspunkt for dit eget farveskema.
Vælg farver ved forskellige punkter langs en CSS-gradient for at se den præcise farve ved hver position. Nyttigt til at replikere gradienter eller forstå, hvordan gradientstop blender.
Åbn den flydende DevSuite Pro-dock, og klik på Farvevælger-ikonet. Markøren ændres til en eyedropper med en forstørret forhåndsvisningscirkel.
Flyt din markør over siden. Den forstørrede forhåndsvisning viser en zoomet visning af pixels omkring din markør med et trådkors, der angiver den præcise målpixel.
Klik et sted på siden for at vælge farven ved den pixel. Farveprøven, HEX-, RGB- og HSL-værdierne opdateres alle øjeblikkeligt.
Klik på HEX-, RGB- eller HSL-rækken for at kopiere den værdi til din udklipsholder. En Kopieret!-bekræftelse vises kortvarigt.
Fortsæt med at klikke for at vælge flere farver. Hvert valg tilføjes til historiestriben. Klik på en historieprøve for at genkalde den farve.
Installer DevSuite Pro gratis og lås op for 39+ udviklerværktøjer til din browser.
