CDRN

Fang farven på en billedpixel

  • Dashboard
  • Dokumentation
  • API
henter den nøjagtige farve af en pixel fra dit billede (RGB, HSL, hexadecimal) ved at klikke på det valgte punkt

Hvad er en billedfarvevælger?

En farvevælger (på fransk farvepipette eller farveoptagelse) er et værktøj, der gendanner den nøjagtige værdi af en valgt pixel på et billede. Du uploader et billede, du klik på det punkt, du er interesseret i, og værktøjet returnerer den præcise farve i HEX-, RGB- og HSL-form. Det er web-ækvivalenten til pipetten i designsoftware som Photoshop, GIMP eller Figma.

Vores værktøj fungerer direkte i din browser. Du uploader dit billede, det vises på siden, og du skal blot klikke på en pixel for at hente dens farve. Læser pixlen sker på klientsiden via canvas API, uden server round trips, uden rekomprimering og uden afsendelse billedet på netværket til valg.

Forskel med en farveudtrækker

Vores farveudtrækker og vores farvevælger svarer på to særskilte behov, som det er nyttigt at skelne klart:

  • Udtrækkeren analyserer hele billedet og returnerer den dominerende palet (de 5, 8 eller 10 mest repræsenterede nuancer). Det er det foretrukne værktøj til at syntetisere atmosfæren kolorimetrisk af et foto, lav et moodboard eller pleje et charter.
  • Farvevælgeren returnerer den nøjagtige farve på en bestemt pixel, som du udpege. Det er det foretrukne værktøj, når du ved, hvor du skal kigge: et logo i en optagelse, en nuance præcis gradient, et referencetapet.

Udtrækkeren arbejder på millioner af pixels og anvender clustering for at bringe grupper ud farver; vælgeren læser bare RGB-værdien, der er gemt på den position, du klikker på. Den den første generaliserer, den anden er kirurgisk.

Hvordan fungerer det rent teknisk

Et digitalt billede er et gitter af pixels, hvor hver pixel bærer tre RGB-kanaler (rød, grøn, blå) generelt kodet på 8 bit eller 256 værdier pr. kanal. Når du klikker på et punkt, vil værktøjet:

  1. Tegner dit billede i et lærredselement og bevarer dets oprindelige dimensioner (med et loft 1500 pixels bred for at forblive behagelig på skærmen).
  2. Konverterer klikpositionen til native billedkoordinater og kompenserer for størrelsesændring browservisning.
  3. Læser RGBA-værdien for pixlen via API'et canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Viser en forhåndsvisning af farvevælgeren. Ved submit læser serveren den samme position med PHP GD og beregner de endelige HEX-, RGB- og HSL-koder.

HSL-værdien beregnes af vores farvekonverteringsservice, den samme som den, der bruges af vores farvekonverter. Konsistens fra ende til ende, får du de samme værdier, som hvis du havde indtastet HEX-koden i konverteren.

Typiske anvendelsestilfælde

  • Genskab en skærmbilledefarve: du har et skærmbillede af et websted, du ønsker at matche den nøjagtige farve på en knap eller baggrund. Vælgeren giver dig HEX-koden præcis at indsætte i din CSS.
  • Identificer en diagramfarve i et foto: en præsentations-PDF, en side med magasin, et produktvisuelt. Du behøver ikke længere bede om diagrammet, du læser farven direkte.
  • Reverse engineering af visuel identitet: indfanger den nøjagtige blå af et logo, den lyserøde af et banner, orange af en opfordring til handling.
  • Inspiration og designovervågning: du ser et billede, du kan lide, du forstår det den nøjagtige nuance af en blomst, en væg, en plakat.
  • Fejlfinding i frontend: fejlskærmbillede viser forkert farve, læser du den faktiske værdi for at sammenligne med den, der forventes i modellen.
  • Oprettelse af en palet fra en reference: du vælger flere punkter fra en samme billede for at genskabe en personlig palette.

Sådan bruger du farvevælgeren

  1. Upload dit billede (PNG, JPG, GIF, BMP, WebP, op til 20 MB).
  2. Der vises et eksempel på siden. Klik på en pixel for at hente dens farve.
  3. En søger markerer den klikkede position, og en forhåndsvisning af farven vises ved siden af den.
  4. Valider med indsend-knappen for at opnå det endelige resultat: farvet firkant, HEX, RGB og HSL-kode.
  5. For at transformere værdien mellem formater skal du bruge vores farvekonverter.

Ofte stillede spørgsmål

Hvad er forskellen mellem HEX, RGB og HSL?

Dette er tre repræsentationer af samme farve. HEX (#ff0000) er mest brugte format i CSS. RGB udtrykker de tre kanaler rød/grøn/blå i værdier 0-255. HSL (Hue, Saturation, Lightness) er mere intuitiv at justere en farvetone: dette er det foretrukne format, når du ønsker at gøre mørkere, afmætte eller ændre en farve uden at ændre grundnuancen.

Hvorfor returnerer mit klik ikke præcis den forventede farve?

På et gradientområde kan to nabopixels have meget forskellige værdier. Desuden JPG-billeder er komprimerede med tab: farven på en pixel kan afvige en smule fra originalen. For pålidelige farvekoder skal du foretrække PNG'er eller ukomprimerede billeder.

Er mine koordinater fra skærmen eller fra billedet?

Dem af det originale billede. Vores JavaScript-script konverterer automatisk klikpositionen (i skærmpixel) til positionen i det oprindelige billede. Hvis dit billede er 4000x3000 og det vises i 800x600, vil et klik i midten returnere dig (2000, 1500) og ikke (400, 300).

Arbejder vælgeren med gennemsigtige billeder?

Ja. Hvis du klikker på en gennemsigtig pixel, henter du den RGB-farve, der er gemt der (ofte hvid eller sort afhængig af den originale udgiver). Selve gennemsigtigheden (alfakanal) returneres ikke i resultatet; For at analysere en alfakanal skal du åbne billedet i en grafik editor.

Hvilken billedstørrelse accepteres?

Op til 20 MB, PNG, JPG, GIF, BMP og WebP-formater. Meget store billeder vises ved 1500 pixel bred maksimalt for at forblive behagelig på skærmen, men farveaflæsningen forbliver den original pixel uden resampling.

Er mine billeder gemt på serveren?

Nej. Valget foretages i din browser. På tidspunktet for indsendelsen behandles filen på farten for at bekræfte farven på den ønskede pixel, så slettes den midlertidige fil. Ingen billeder gemmes, indekseres eller deles.

Hvad sker der, hvis JavaScript er deaktiveret?

Indsendelse af klassiske formularer er fortsat muligt. X- og y-koordinaterne styres af skjulte felter, som JavaScript udfylder ved klik. Uden JavaScript forbliver disse felter tomme og formularen vil rapportere, at en position mangler, men selve billedet sendes til server til behandling.

Anmodningseksempel

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

Inputskema

Felt Type Påkrævet Standard
image file ✓ –
x string – –
y string – –

dette værktøj forventer en fil - brug Content-Type multipart/form-data i stedet for application/json

Endpoints

  • GET https://cdrn.fr/api/v1/tools - lister alle tilgængelige værktøjer
  • GET https://cdrn.fr/api/v1/tools/color-picker - henter skemaet for dette værktøj
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - udfører dette værktøj med et JSON-payload