CDRN

Välj en pixelfärg från en bild

  • Panel
  • Dokumentation
  • API
hämtar den exakta färgen för en pixel från din bild (RGB, HSL, hexadecimal) genom att klicka på den punkt du väljer

Vad är en bild-color-picker?

En color picker (på svenska färgpipett eller färgväljare) är ett verktyg som ger det exakta värdet på en utvald pixel i en bild. Du laddar upp ett foto, klickar på den punkt som intresserar dig, och verktyget returnerar den exakta färgen som HEX, RGB och HSL. Det är webbmotsvarigheten till pipetten i designprogram som Photoshop, GIMP eller Figma.

Vårt verktyg fungerar direkt i din webbläsare. Du laddar upp din bild, den visas på sidan och du behöver bara klicka på en pixel för att få dess färg. Avläsningen av pixeln sker på klientsidan via canvas-API:t, utan server-rundtur, utan omkomprimering och utan att bilden skickas över nätverket för urvalet.

Skillnad mot en färgextraktor

Vår färgextraktor och vår color picker svarar på två olika behov, som det är värt att skilja på:

  • Extraktorn analyserar hela bilden och returnerar den dominerande paletten (de 5, 8 eller 10 mest representerade nyanserna). Det är verktyget för att sammanfatta ett fotos kromatiska stämning, skapa ett moodboard eller mata in en designprofil.
  • Color picker returnerar den exakta färgen för en specifik pixel som du pekar ut. Det är verktyget när du vet var du ska titta: en logotyp i en skärmdump, en exakt nyans i en gradient, en referensbakgrund.

Extraktorn arbetar på miljontals pixlar och tillämpar klustring för att framhäva färggrupper ; pickern nöjer sig med att läsa RGB-värdet lagrat på den position du klickar. Den första generaliserar, den andra är kirurgisk.

Hur det fungerar tekniskt

En digital bild är ett rutnät av pixlar, där varje pixel bär tre RGB-kanaler (röd, grön, blå) kodade i regel på 8 bitar, det vill säga 256 värden per kanal. När du klickar på en punkt gör verktyget:

  1. Ritar din bild i ett canvas-element, behåller dess ursprungliga dimensioner (med ett tak på 1500 pixels bred för att förbli bekvämt på skärmen).
  2. Konverterar klickpositionen till ursprungliga bildkoordinater, kompenserar för webbläsarens visningsstorlek.
  3. Läser pixelns RGBA-värde via API:t canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Visar en förhandsgranskning av pickerns färg. Vid skickning läser servern samma position med PHP GD och räknar ut de slutgiltiga HEX-, RGB- och HSL-koderna.

HSL-värdet beräknas av vår färgkonverteringstjänst, identisk med den vår färgkonverterare använder. Konsekvens från början till slut, du får samma värden som om du hade skrivit in HEX-koden i konverteraren.

Typiska användningsfall

  • Återskapa en färg från en skärmdump: du har en skärmdump av en sajt, du vill ta exakt samma nyans på en knapp eller bakgrund. Pickern ger dig den exakta HEX-koden att klistra in i din CSS.
  • Identifiera en grafisk profilfärg i ett foto: en presentations-PDF, en sida i ett magasin, en produktbild. Du behöver inte längre fråga efter profilen, du läser färgen direkt.
  • Reverse engineering av visuell identitet: fånga den exakta blå i en logo, rosa i en banner, orange i en call-to-action.
  • Inspiration och designspaning: du ser ett foto du gillar, du hämtar den exakta nyansen från en blomma, en vägg, en affisch.
  • Frontend-debug: en buggskärmdump visar en felaktig färg, du läser det faktiska värdet för att jämföra med det förväntade i mockupen.
  • Skapa palett från en referens: du picker flera punkter i samma bild för att bygga en anpassad palett.

Så använder du color picker

  1. Ladda upp din bild (PNG, JPG, GIF, BMP, WebP, upp till 20 MB).
  2. En förhandsgranskning visas på sidan. Klicka på en pixel för att få dess färg.
  3. Ett sikte markerar klickpositionen och en förhandsgranskning av färgen visas bredvid.
  4. Bekräfta med skicka-knappen för att få slutresultatet: färgad ruta, HEX-, RGB- och HSL-koder.
  5. För att omvandla värdet mellan format, använd vår färgkonverterare.

Vanliga frågor

Vad är skillnaden mellan HEX, RGB och HSL?

Det är tre representationer av samma färg. HEX (#ff0000) är det mest använda formatet i CSS. RGB uttrycker de tre röd/grön/blå-kanalerna i värden 0-255. HSL (Hue, Saturation, Lightness) är mer intuitivt för att justera en nyans: det är formatet att föredra när du vill mörka, mätta ner eller ändra en färg utan att ändra grundnyansen.

Varför returnerar mitt klick inte exakt den färg jag förväntade mig?

I ett gradientområde kan två närliggande pixlar ha mycket olika värden. Dessutom är JPG-bilder komprimerade med förlust: en pixels färg kan skilja sig något från originalets. För pålitliga färgkoder, föredra PNG eller bilder som inte har komprimerats om.

Är mina koordinater skärmens eller bildens?

Originalbildens. Vårt JavaScript konverterar automatiskt klickpositionen (i skärmpixlar) till positionen i originalbilden. Om din bild är 4000x3000 och visas som 800x600, ger ett klick i mitten dig (2000, 1500) och inte (400, 300).

Fungerar pickern med transparenta bilder?

Ja. Om du klickar på en transparent pixel får du tillbaka RGB-färgen som lagrats där (ofta vitt eller svart beroende på den ursprungliga editorn). Själva transparensen (alfakanalen) återges inte i resultatet; för att analysera en alfakanal, öppna bilden i en grafikredigerare.

Vilken bildstorlek accepteras?

Upp till 20 MB, formaten PNG, JPG, GIF, BMP och WebP. Mycket stora bilder visas i 1500 pixels bredd maximalt för att förbli bekväma på skärmen, men den avlästa färgen är fortfarande den från originalpixeln, utan omsampling.

Lagras mina bilder på servern?

Nej. Urvalet sker i din webbläsare. Vid skickningen behandlas filen i farten för att bekräfta den begärda pixelfärgen, sedan raderas den tillfälliga filen. Ingen bild sparas, indexeras eller delas.

Vad händer om JavaScript är inaktiverat?

Klassisk formulärskickning är fortfarande möjlig. X- och y-koordinaterna hanteras av dolda fält som JavaScript fyller i vid klick. Utan JavaScript förblir dessa fält tomma och formuläret signalerar att en position saknas, men själva bilden skickas till servern för behandling.

Exempelförfrågan

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

Indatasschema

Fält Typ Obligatorisk Standard
image file ✓ –
x string – –
y string – –

detta verktyg förväntar sig en fil - använd Content-Type multipart/form-data istället för application/json

Slutpunkter

  • GET https://cdrn.fr/api/v1/tools - listar alla tillgängliga verktyg
  • GET https://cdrn.fr/api/v1/tools/color-picker - hämtar schemat för detta verktyg
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - kör detta verktyg med en JSON-payload