Color Picker biedt een pixel-precieze pipetgereedschap voor het selecteren van kleuren uit een willekeurig element op een webpagina — tekst, achtergronden, afbeeldingen, gradiënten of een willekeurige zichtbare pixel. Krijg de exacte kleurwaarde tegelijk in HEX-, RGB- en HSL-indelingen, met een vergrote pixelpreview voor nauwkeurig richten. Eerder geselecteerde kleuren worden in een geschiedenisstrip opgeslagen voor snelle hertoegangst.
Het extraheren van exacte kleurwaarden van een webpagina is een veelgebruikte taak — het aanpassen van een merkkleur, het refereren aan een ontwerp of het controleren van een tint die op een competitorsite wordt gebruikt. Browsertools voor ontwikkelaars tonen kleuren in het paneel Stijlen, maar alleen voor elementen met expliciete CSS-kleureigenschappen — niet voor afbeeldingen, gradiënten of overerfde kleuren. De Color Picker-pipet werkt op pixelniveau — deze leest de werkelijk weergegeven kleur van welke pixel dan ook onder uw cursor, ongeacht hoe die kleur er is gekomen. Klik op een blauwe lucht in een heldscène-afbeelding, een verlooppunt of een semi-transparante overlay en krijg de exacte samengestelde kleurwaarde. De vergrote voorbeeldcirkel toont een ingezoomde weergave van omringende pixels, zodat u de exacte pixel die u wilt richten kunt selecteren. Alle drie de indelingsuitvoer (HEX, RGB, HSL) worden tegelijk weergegeven — klik op een willekeurig formaat om te kopiëren. Uw laatste verschillende selecties worden opgeslagen in een kleurgeschiedenisstrip onderaan, zodat u gemakkelijk een eerder geselecteerde kleur opnieuw kunt benaderen.
Een vergrote cirkelvormige preview toont ingezoomde pixels rond uw cursor, met kruisrood doelwerk voor exacte pixelselectie. Selecteer kleuren uit tekst, achtergronden, afbeeldingen, gradiënten, SVG's of een willekeurige zichtbare pixel op de pagina.
Elke geselecteerde kleur wordt in alle drie indelingen tegelijk weergegeven: HEX (#7c3aed), RGB (rgb(124, 58, 237)) en HSL (hsl(262, 83%, 58%)). Geen schakelen of converteren — alle indelingen zijn onmiddellijk beschikbaar.
Klik op een willekeurige indelingrij (HEX, RGB of HSL) om die specifieke waarde onmiddellijk naar uw klembord te kopiëren. Een korte "Gekopieerd!" animatie bevestigt de actie. Plak rechtstreeks in uw CSS, ontwerpgereedschap of kleurspecificatie.
Uw onlangs geselecteerde kleuren worden opgeslagen in een visuele geschiedenisstrip met kleurstalen. Klik op een willekeurige kleurstaal om die kleur opnieuw te selecteren en de waarden ervan opnieuw te zien. De geschiedenis blijft behouden gedurende uw sessie — selecteer kleuren van meerdere pagina's.
De geselecteerde kleur wordt weergegeven als een grote staal boven de indelingswaarden, waardoor het gemakkelijk is om de kleur te zien en te verifiëren. De staal is groot genoeg om subtiele tonen weer te geven die bij kleinere grootten identiek kunnen lijken.
Selecteer kleuren van een willekeurige zichtbare pixel: CSS-kleuren, CSS-gradiënten, afbeeldingen (PNG, JPG, SVG), canvas-elementen, videoframes, semi-transparante overlays (het selecteren van de samengestelde kleur) en zelfs iframes. Als u het kunt zien, kunt u het selecteren.
Selecteer de exacte merkkleur van de website van een bedrijf om ervoor te zorgen dat uw ontwerp of inhoud de juiste tint gebruikt. Krijg de nauwkeurige HEX-waarde in plaats van te raden of door merkrichtlijnen te zoeken.
Selecteer kleuren rechtstreeks uit heldscène-afbeeldingen, productfoto's of illustraties. Extraheer een dominante kleur van een foto om deze als complementaire achtergrond in uw ontwerp te gebruiken.
De ontwerpspecificatie zegt dat de knop #7c3aed moet zijn. Selecteer de kleur van de geïmplementeerde knop om te verifiëren of deze overeenkomt. Vangt subtiele kleurverschillen op die voor het blote oog onzichtbaar zijn.
Blader door inspiratiesites voor ontwerp en selecteer kleuren die u opvallen. De geschiedenisstrip bouwt een palet van kleuren op die u tijdens de sessie hebt geselecteerd — gebruik dit als startpunt voor uw eigen kleurenschema.
Selecteer kleuren op verschillende punten langs een CSS-verloop om de exacte kleur op elke positie te zien. Handig voor het repliceren van verloopstops of het begrijpen hoe verloopstops elkaar mengen.
Open het floating dock van DevSuite Pro en klik op het Color Picker-pictogram. De cursor verandert in een pipet met een vergrote voorbeeldcirkel.
Beweeg uw cursor over de pagina. De vergrote preview toont een ingezoomde weergave van de pixels rond uw cursor, met een kruishaar die de exacte doelpixel aangeeft.
Klik op een willekeurige plaats op de pagina om de kleur bij die pixel te selecteren. De kleurstaal, HEX-, RGB- en HSL-waarden worden allemaal onmiddellijk bijgewerkt.
Klik op de rij HEX, RGB of HSL om die waarde naar uw klembord te kopiëren. Er verschijnt een korte "Gekopieerd!" bevestiging.
Blijf klikken om meer kleuren te selecteren. Elke selectie wordt aan de geschiedenisstrip toegevoegd. Klik op een willekeurige geschiedeniskleurstaal om die kleur in te terugroepen.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
