CDRN

De kleur van een pixel uit een afbeelding pakken

  • Dashboard
  • Documentatie
  • API
haalt de exacte kleur van een pixel uit je afbeelding (RGB, HSL, hexadecimaal) door op de plek van je keuze te klikken

Wat is een afbeeldings color picker?

Een color picker (in het Nederlands kleurpipet of kleurkiezer) is een tool die de exacte waarde van een gekozen pixel op een afbeelding teruggeeft. U laadt een foto, u klikt op het punt dat u interesseert, en de tool geeft de precieze kleur terug in HEX-, RGB- en HSL-vorm. Het is het webequivalent van de pipet in ontwerpsoftware zoals Photoshop, GIMP of Figma.

Onze tool werkt rechtstreeks in uw browser. U uploadt uw afbeelding, deze wordt weergegeven op de pagina, en u hoeft alleen maar op een pixel te klikken om de kleur terug te krijgen. Het lezen van de pixel gebeurt aan de clientkant via de canvas-API, zonder serverronde, zonder hercompressie en zonder verzending van de afbeelding via het netwerk voor de selectie.

Verschil met een kleurenextractor

Onze kleurenextractor en onze color picker beantwoorden twee verschillende behoeften, die het nuttig is om goed te onderscheiden:

  • De extractor analyseert de hele afbeelding en geeft het dominante palet terug (de 5, 8 of 10 meest vertegenwoordigde tinten). Het is de tool bij uitstek om de kleursfeer van een foto samen te vatten, een moodboard te maken of een huisstijl te voeden.
  • De color picker geeft de exacte kleur terug van een precieze pixel die u aanwijst. Het is de tool bij uitstek wanneer u weet waar u moet kijken: een logo in een schermafbeelding, een precieze nuance van een verloop, een referentie-wallpaper.

De extractor werkt op miljoenen pixels en past clustering toe om groepen kleuren te laten verschijnen; de picker leest gewoon de RGB-waarde die op de positie waar u klikt is opgeslagen. De eerste generaliseert, de tweede is chirurgisch.

Hoe het technisch werkt

Een digitale afbeelding is een raster van pixels, waarbij elke pixel drie RGB-kanalen (rood, groen, blauw) bevat, meestal gecodeerd op 8 bits, oftewel 256 waarden per kanaal. Wanneer u op een punt klikt, doet de tool:

  1. Tekent uw afbeelding in een canvas-element, met behoud van de oorspronkelijke afmetingen (met een plafond van 1500 pixels breed om comfortabel te blijven op het scherm).
  2. Converteert de positie van de klik in oorspronkelijke afbeeldingscoördinaten, met compensatie voor de weergaverescaling van de browser.
  3. Leest de RGBA-waarde van de pixel via de API canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Toont een preview van de gekozen kleur. Bij verzending leest de server dezelfde positie met PHP GD en berekent de definitieve HEX-, RGB- en HSL-codes.

De HSL-waarde wordt berekend door onze kleurconversieservice, identiek aan die welke onze kleurconverter gebruikt. End-to-end consistentie, u krijgt dezelfde waarden alsof u de HEX-code in de converter had ingevoerd.

Typische gebruiksgevallen

  • Een schermafbeeldingskleur reproduceren: u hebt een schermafbeelding van een site, u wilt precies de tint van een knop of achtergrond overnemen. De picker geeft u de precieze HEX-code om opnieuw in uw CSS te plakken.
  • Een huisstijlkleur op een foto identificeren: een presentatie-PDF, een magazinepagina, een productvisual. U hoeft de huisstijl niet meer op te vragen, u leest de kleur direct.
  • Reverse engineering van een visuele identiteit: het exacte blauw van een logo, het roze van een banner, het oranje van een call-to-action vastleggen.
  • Inspiratie en designwatching: u ziet een foto die u bevalt, u haalt de exacte tint van een bloem, een muur, een poster eruit.
  • Frontend debug: een screenshot van een bug toont een verkeerde kleur, u leest de werkelijke waarde om te vergelijken met die welke in de mockup wordt verwacht.
  • Palet creëren vanuit een referentie: u kiest meerdere punten van een zelfde afbeelding om een persoonlijk palet te reconstrueren.

Hoe u de color picker gebruikt

  1. Upload uw afbeelding (PNG, JPG, GIF, BMP, WebP, tot 20 MB).
  2. Een preview verschijnt op de pagina. Klik op een pixel om de kleur ervan terug te krijgen.
  3. Een vizier markeert de geklikte positie en een preview van de kleur verschijnt ernaast.
  4. Bevestig met de verzendknop om de eindweergave te krijgen: gekleurd vierkant, HEX-, RGB- en HSL-code.
  5. Om de waarde tussen formaten te transformeren, gaat u via onze kleurconverter.

Veelgestelde vragen

Wat is het verschil tussen HEX, RGB en HSL?

Dat zijn drie representaties van dezelfde kleur. HEX (#ff0000) is het meest gebruikte formaat in CSS. RGB drukt de drie kanalen rood/groen/blauw uit in waarden 0-255. HSL (Hue, Saturation, Lightness) is intuïtiever om een tint aan te passen: het is het voorkeursformaat wanneer u wilt verdonkeren, ontzadigen of een kleur wijzigen zonder de basistint te veranderen.

Waarom geeft mijn klik niet precies de verwachte kleur terug?

Op een verloopzone kunnen twee naburige pixels zeer verschillende waarden hebben. Bovendien zijn JPG-afbeeldingen gecomprimeerd met verlies: de kleur van een pixel kan licht afwijken van het origineel. Voor betrouwbare kleurcodes geeft u de voorkeur aan PNG's of niet-gehercomprimeerde afbeeldingen.

Zijn mijn coördinaten die van het scherm of van de afbeelding?

Die van de oorspronkelijke afbeelding. Ons JavaScript-script converteert automatisch de klikpositie (in schermpixels) naar de positie in de oorspronkelijke afbeelding. Als uw afbeelding 4000x3000 is en wordt weergegeven op 800x600, geeft een klik in het midden (2000, 1500) en niet (400, 300).

Werkt de picker met transparante afbeeldingen?

Ja. Als u op een transparante pixel klikt, krijgt u de RGB-kleur terug die op die plek is opgeslagen (vaak wit of zwart afhankelijk van de oorspronkelijke editor). De transparantie zelf (alfakanaal) wordt niet teruggegeven in het resultaat; om een alfakanaal te analyseren, opent u de afbeelding in een grafische editor.

Welke afbeeldingsgrootte wordt geaccepteerd?

Tot 20 MB, formaten PNG, JPG, GIF, BMP en WebP. Zeer grote afbeeldingen worden weergegeven op maximaal 1500 pixels breed om comfortabel te blijven op het scherm, maar de gelezen kleur blijft die van de oorspronkelijke pixel, zonder hersampling.

Worden mijn afbeeldingen op de server opgeslagen?

Nee. De selectie gebeurt in uw browser. Op het moment van verzending wordt het bestand ad hoc verwerkt om de kleur van de gevraagde pixel te bevestigen, daarna wordt het tijdelijke bestand verwijderd. Geen enkele afbeelding wordt bewaard, geïndexeerd of gedeeld.

Wat gebeurt er als JavaScript is uitgeschakeld?

De klassieke verzending van het formulier blijft mogelijk. De x- en y-coördinaten worden beheerd door verborgen velden die JavaScript bij de klik invult. Zonder JavaScript blijven deze velden leeg en zal het formulier signaleren dat er een positie ontbreekt, maar de afbeelding zelf wordt wel verzonden naar de server voor verwerking.

Voorbeeldverzoek

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -F "image=@/path/to/file" \
  -F "x=..." \
  -F "y=..."

Invoerschema

Veld Type Vereist Standaard
image file ✓ –
x string – –
y string – –

deze tool verwacht een bestand - gebruik Content-Type multipart/form-data in plaats van application/json

Endpoints

  • GET https://cdrn.fr/api/v1/tools - toont alle beschikbare tools
  • GET https://cdrn.fr/api/v1/tools/color-picker - geeft het schema van deze tool terug
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - voert deze tool uit met een JSON-payload