CDRN

Capturarea culorii unui pixel de imagine

  • Panou de control
  • Documentație
  • API
recuperează culoarea exactă a unui pixel din imaginea dvs. (RGB, HSL, hexazecimal) făcând clic pe punctul ales

Ce este un color picker de imagine?

Un color picker (în română pipetă de culori sau captură de culoare) este un instrument care restituie valoarea exactă a unui pixel ales pe o imagine. Încarci o fotografie, apeși pe punctul care te interesează, și instrumentul returnează culoarea precisă sub formă HEX, RGB și HSL. Este echivalentul web al pipetei software-urilor de design precum Photoshop, GIMP sau Figma.

Instrumentul nostru funcționează direct în browserul tău. Încarci imaginea ta, se afișează în pagină, și îți este suficient să apeși pe un pixel pentru a recupera culoarea sa. Citirea pixelului se face pe partea client prin API canvas, fără dus-întors server, fără recompresie și fără trimiterea imaginii pe rețea pentru selecție.

Diferența cu un extractor de culori

Extractorul nostru de culori și color picker-ul nostru răspund la două nevoi distincte, pe care este util să le distingem bine:

  • Extractorul analizează ansamblul imaginii și returnează paleta dominantă (cele 5, 8 sau 10 nuanțe cel mai mult reprezentate). Este instrumentul de alegere pentru a sintetiza ambianța colorimetrică a unei fotografii, a crea un mood board sau a alimenta o identitate.
  • Color picker-ul returnează culoarea exactă a unui pixel precis pe care îl desemnezi. Este instrumentul de alegere când știi unde să privești: un logo într-o captură, o nuanță precisă a unui gradient, un fundal de ecran de referință.

Extractorul lucrează pe milioane de pixeli și aplică clustering pentru a face să apară grupuri de culori; picker-ul se mulțumește să citească valoarea RGB stocată la poziția pe care apeși. Primul generalizează, al doilea este chirurgical.

Cum funcționează, tehnic

O imagine digitală este o grilă de pixeli, fiecare pixel purtând trei canale RGB (roșu, verde, albastru) codate în general pe 8 biți, adică 256 de valori per canal. Când apeși pe un punct, instrumentul:

  1. Desenează imaginea ta într-un element canvas, păstrând dimensiunile sale native (cu un plafon de 1500 pixeli lățime pentru a rămâne confortabil pe ecran).
  2. Convertește poziția clic-ului în coordonate de imagine native, compensând redimensionarea de afișare a browserului.
  3. Citește valoarea RGBA a pixelului prin API canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Afișează o previzualizare a culorii picker. La trimitere, serverul citește aceeași poziție cu PHP GD și calculează codurile HEX, RGB și HSL definitive.

Valoarea HSL este calculată de serviciul nostru de conversie culoare, identic cu cel pe care îl utilizează convertorul nostru de culori. Coerență cap la cap, obții aceleași valori ca și cum ai fi tastat codul HEX în convertor.

Cazuri de utilizare tipice

  • Reproducerea unei culori de captură de ecran: ai o captură a unui site, vrei să preiei exact nuanța unui buton sau a unui fundal. Picker-ul îți dă codul HEX precis de relipit în CSS-ul tău.
  • Identificarea unei culori de identitate pe o fotografie: un PDF de prezentare, o pagină de revistă, un vizual produs. Nu mai e nevoie să ceri identitatea, citești culoarea direct.
  • Reverse engineering de identitate vizuală: capturarea albastrului exact al unui logo, rozul unui banner, portocaliul unui apel la acțiune.
  • Inspirație și veghe design: vezi o fotografie care îți place, recuperezi nuanța exactă a unei flori, a unui zid, a unui afiș.
  • Debug front-end: un screenshot de bug arată o culoare incorectă, citești valoarea reală pentru a compara cu cea așteptată în machetă.
  • Crearea unei palete dintr-o referință: piker mai multe puncte ale unei aceeași imagini pentru a reconstitui o paletă personalizată.

Cum să utilizezi color picker-ul

  1. Încarcă imaginea ta (PNG, JPG, GIF, BMP, WebP, până la 20 Mo).
  2. O previzualizare se afișează în pagină. Apasă pe un pixel pentru a recupera culoarea sa.
  3. Un țintă marchează poziția apăsată și o previzualizare a culorii apare alături.
  4. Validează cu butonul de trimitere pentru a obține randarea finală: pătrat colorat, cod HEX, RGB și HSL.
  5. Pentru a transforma valoarea între formate, treci prin convertorul nostru de culori.

Întrebări frecvente

Care este diferența între HEX, RGB și HSL?

Sunt trei reprezentări ale aceleiași culori. HEX (#ff0000) este formatul cel mai utilizat în CSS. RGB exprimă cele trei canale roșu / verde / albastru în valori 0-255. HSL (Hue, Saturation, Lightness) este mai intuitiv pentru a ajusta o nuanță: este formatul de privilegiat când vrei să întuneci, să desaturizi sau să modifici o culoare fără să schimbi nuanța de bază.

De ce clic-ul meu nu returnează exact culoarea așteptată?

Pe o zonă de gradient, doi pixeli vecini pot avea valori foarte diferite. În plus, imaginile JPG sunt comprimate cu pierdere: culoarea unui pixel poate diferi ușor de original. Pentru coduri de culoare fiabile, preferă PNG-uri sau imagini necomprimate din nou.

Coordonatele mele sunt cele ale ecranului sau ale imaginii?

Cele ale imaginii originale. Script-ul nostru JavaScript convertește automat poziția clic-ului (în pixeli de ecran) spre poziția în imaginea nativă. Dacă imaginea ta face 4000x3000 și se afișează la 800x600, un clic în centru îți va returna (2000, 1500) și nu (400, 300).

Picker-ul funcționează cu imaginile transparente?

Da. Dacă apeși pe un pixel transparent, recuperezi culoarea RGB stocată la acel loc (adesea alb sau negru în funcție de editorul de origine). Transparența însăși (canal alfa) nu este restituită în rezultat; pentru a analiza un canal alfa, deschide imaginea într-un editor grafic.

Ce dimensiune de imagine este acceptată?

Până la 20 Mo, formate PNG, JPG, GIF, BMP și WebP. Imaginile foarte mari sunt afișate la 1500 pixeli lățime maxim pentru a rămâne confortabile pe ecran, dar culoarea citită rămâne cea a pixelului de origine, fără reșeantilonare.

Imaginile mele sunt stocate pe server?

Nu. Selecția se face în browserul tău. La momentul trimiterii, fișierul este tratat din mers pentru a confirma culoarea pixelului cerut, apoi fișierul temporar este șters. Nicio imagine nu este păstrată, indexată sau partajată.

Ce se întâmplă dacă JavaScript este dezactivat?

Trimiterea clasică a formularului rămâne posibilă. Coordonatele x și y sunt gestionate de câmpuri ascunse pe care JavaScript le completează la clic. Fără JavaScript, aceste câmpuri rămân goale și formularul va semnala că lipsește o poziție, dar imaginea însăși este transmisă bine la server pentru tratament.

Exemplu de cerere

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

Schema de intrare

Câmp Tip Obligatoriu Implicit
image file ✓ –
x string – –
y string – –

acest instrument așteaptă un fișier - utilizați Content-Type multipart/form-data în loc de application/json

Puncte de acces

  • GET https://cdrn.fr/api/v1/tools - listează toate instrumentele disponibile
  • GET https://cdrn.fr/api/v1/tools/color-picker - obține schema acestui instrument
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - execută acest instrument cu un payload JSON