CDRN

Püüa pildipiksli värv

  • Töölaud
  • Dokumentatsioon
  • API
hangib teie pildi piksli täpse värvi (RGB, HSL, kuueteistkümnend), klõpsates valitud punktil

Mis on pildi värvivalija?

värvivalija (prantsuse keeles värvipipett või värvihõive) on tööriist, mis taastab pildil valitud piksli täpse väärtuse. Laadite üles foto, sina klõpsake teid huvitaval punktil ja tööriist tagastab täpse värvi HEX-, RGB- ja HSL-vormingus. See on disainitarkvaras, nagu Photoshop, GIMP või Figma, silmatilguti veebiekvivalent.

Meie tööriist töötab otse teie brauseris. Laadite oma pildi üles, see kuvatakse lehel ja peate lihtsalt klõpsama pikslil, et selle värvi hankida. Piksli lugemine tehakse kliendi poolel lõuendi API kaudu, ilma serveri edasi-tagasi reisideta, uuesti tihendamiseta ja saatmiseta pilt võrgus valimiseks.

Erinevus värvieemaldajaga

Meie värvitõmmis ja meie värvivalija vastavad kahele selged vajadused, mida on kasulik selgelt eristada:

  • Ekstraktor analüüsib kogu pilti ja tagastab domineeriva paleti (5, 8 või 10 enim esindatud tooni). See on valitud tööriist atmosfääri sünteesimiseks foto kolorimeetriline, meeleolutahvli loomine või harta toitmine.
  • Värvivalija tagastab teie konkreetse piksli täpse värvi määrama. See on valitud tööriist, kui tead, kust otsida: logo jäädvustamisel, nüanss täpne gradient, võrdlustapeet.

Ekstraktor töötab miljonitel pikslitel ja rakendab rühmade esiletoomiseks rühmitamist värvid; valija lihtsalt loeb RGB-väärtust, mis on salvestatud teie klõpsatavasse kohta. The esimene üldistab, teine on kirurgiline.

Kuidas see tehniliselt töötab

Digitaalne pilt on pikslite ruudustik, kus igal pikslil on kolm RGB-kanalit (punane, roheline, sinine) tavaliselt kodeeritud 8 bitti ehk 256 väärtust kanali kohta. Kui klõpsate punktil, teeb tööriist järgmist.

  1. Joonistab teie kujutise lõuendielemendina, säilitades selle loomulikud mõõtmed (laega 1500 pikslit lai, et ekraanil mugavalt püsida).
  2. Teendab klõpsu asukoha kujutise algkoordinaatideks, kompenseerides suuruse muutmise brauseri kuva.
  3. Loeb API kaudu piksli RGBA väärtust canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Näitab värvivalija eelvaadet. Esitamisel loeb server sama positsiooni PHP-ga GD ja arvutab lõplikud HEX-, RGB- ja HSL-koodid.

HSL-i väärtuse arvutab meie värvide teisendusteenus, mis on sama, mida kasutab meie värvimuundur. Otsast lõpuni järjepidevus, saate aru samad väärtused, nagu oleksite HEX-koodi konverterisse sisestanud.

Tüüpilised kasutusjuhud

  • Ekraanipildi värvi reprodutseerimine: teil on saidi ekraanipilt, soovite täpselt ühtida nupu või tausta värviga. Valija annab teile HEX-koodi täpne oma CSS-i kleepimiseks.
  • Tuvastage fotol diagrammi värv: esitlus PDF-fail, lehekülg ajakiri, tootevisuaal. Enam pole vaja diagrammi küsida, värvi loete otse.
  • Visuaalse identiteedi pöördprojekteerimine: logo täpse sinise, roosa jäädvustamine bännerist, oranžist üleskutsest tegevusele.
  • Inspiratsiooni ja disaini jälgimine: näete fotot, mis teile meeldib, ja saate selle lille, seina, plakati täpne toon.
  • Silumise kasutajaliides: vea ekraanipilt näitab vale värvi, loete tegelik väärtus, mida võrrelda mudelis eeldatavaga.
  • Paleti loomine viitest: valite mitu punkti a sama pilt isikupärastatud paleti taasloomiseks.

Kuidas kasutada värvivalijat

  1. Laadige üles oma pilt (PNG, JPG, GIF, BMP, WebP, kuni 20 MB).
  2. Lehel kuvatakse eelvaade. Selle värvi leidmiseks klõpsake pikslil.
  3. Pildiotsija märgib klõpsamise koha ja selle kõrvale kuvatakse värvi eelvaade.
  4. Lõpptulemuse saamiseks kinnitage saatmisnupuga: värviline ruut, HEX-, RGB- ja HSL-kood.
  5. Väärtuse teisendamiseks vormingute vahel kasutage meie värvimuundur.

Korduma kippuvad küsimused

Mis vahe on HEX, RGB ja HSL vahel?

Need on kolm sama värvi kujutist. HEX (#ff0000) on CSS-is enimkasutatav formaat. RGB väljendab kolme kanalit: punane / roheline / sinine väärtused 0-255. HSL (Hue, Saturation, Lightness) on intuitiivsem reguleerimiseks tint: see on eelistatud vorming, kui soovite tumedamaks muuta, desatureerida või muuta a värvi ilma alustooni muutmata.

Miks minu klikk ei tagasta täpselt oodatud värvi?

Gradientialal võivad kahel naaberpikslil olla väga erinevad väärtused. Lisaks JPG-pildid on kadudeta tihendatud: piksli värv võib veidi erineda originaal. Usaldusväärsete värvikoodide jaoks eelistage PNG-sid või tihendamata pilte.

Kas minu koordinaadid on ekraanilt või pildilt?

Algse pildi omad. Meie JavaScripti skript teisendab automaatselt klikipositsiooni (ekraani pikslites) algkujutise asukohta. Kui teie pilt on 4000x3000 ja see kuvatakse eraldusvõimega 800x600, klõpsates keskel, kuvatakse teile (2000, 1500) ja mitte (400, 300).

Kas valija töötab läbipaistvate piltidega?

Jah. Kui klõpsate läbipaistval pikslil, saate sinna salvestatud RGB-värvi (sageli valge või must, olenevalt algsest väljaandjast). Läbipaistvus ise (alfakanal) ei tagastata tulemuses; Alfakanali analüüsimiseks avage pilt jaotises a graafiline redaktor.

Milline pildi suurus on aktsepteeritud?

Kuni 20 MB, PNG, JPG, GIF, BMP ja WebP formaadid. Väga suuri pilte kuvatakse 1500 maksimaalselt pikslilaiune, et ekraanil mugavalt püsida, kuid lugemine jääb värvide omaks algne piksel, ilma uuesti proovivõtuta.

Kas minu pildid on serveris salvestatud?

Ei. Valik tehakse teie brauseris. Faili esitamise ajal töödeldakse käigult, et kinnitada soovitud piksli värv, siis ajutine fail kustutatakse. Ühtegi pilti ei salvestata, indekseerita ega jagata.

Mis juhtub, kui JavaScript on keelatud?

Klassikalise vormi esitamine on endiselt võimalik. X- ja y-koordinaate haldab peidetud väljad, mille JavaScript klõpsamisel täidab. Ilma JavaScriptita jäävad need väljad tühjaks ja vorm teatab, et asukoht puudub, kuid pilt ise edastatakse server töötlemiseks.

Päringunäide

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

Sisendskeem

Väli Tüüp Kohustuslik Vaikimisi
image file ✓ –
x string – –
y string – –

see tööriist ootab faili - kasuta Content-Type multipart/form-data application/json asemel

Lõpp-punktid

  • GET https://cdrn.fr/api/v1/tools - loetleb kõik saadaolevad tööriistad
  • GET https://cdrn.fr/api/v1/tools/color-picker - toob selle tööriista skeemi
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - täidab selle tööriista JSON-payloadiga