CDRN

Уловяване на цвят на пиксел от изображение

  • Табло
  • Документация
  • API
извлича точния цвят на пиксел от вашето изображение (RGB, HSL, шестнадесетичен), кликвайки върху избраната точка

Какво е инструмент за избор на цвят на изображение?

Избор на цвят (на френски цветна пипета или улавяне на цвят) е инструмент, който възстановява точната стойност на избран пиксел върху изображение. Качваш снимка, ти щракнете върху точката, която ви интересува, и инструментът връща точния цвят в HEX, RGB и HSL форма. Това е уеб еквивалентът на пипетката в софтуер за дизайн като Photoshop, GIMP или Figma.

Нашият инструмент работи директно във вашия браузър. Качвате вашето изображение, то се показва в страницата и просто трябва да щракнете върху пиксел, за да извлечете цвета му. Четене на пиксела се извършва от страна на клиента чрез API на canvas, без обиколки на сървъра, без повторно компресиране и без изпращане изображението в мрежата за избор.

Разлика с цветен екстрактор

Нашият извличащ цвят и инструментът за избор на цвят отговарят на две различни нужди, които е полезно ясно да се разграничат:

  • Програмата за извличане анализира цялото изображение и връща доминиращата палитра (5, 8 или 10 най-често срещани нюанса). Това е инструментът на избор за синтезиране на атмосферата колориметрия на снимка, създаване на табло за настроение или подхранване на харта.
  • Инструментът за избор на цвят връща точния цвят на конкретен пиксел, който сте обозначавам. Това е инструментът на избор, когато знаете къде да търсите: лого в заснемане, нюанс прецизен градиент, референтен тапет.

Екстракторът работи върху милиони пиксели и прилага групиране, за да изведе групи цветове; инструментът за избор просто чете RGB стойността, съхранена в позицията, върху която щракнете. The първият е генерализиран, вторият е хирургичен.

Как работи, технически

Цифровото изображение е мрежа от пиксели, като всеки пиксел носи три RGB канала (червен, зелен, син) обикновено кодирани на 8 бита или 256 стойности на канал. Когато щракнете върху точка, инструментът:

  1. Начертава изображението ви в елемент на платно, като запазва естествените му размери (с таван 1500 пиксела ширина, за да остане удобно на екрана).
  2. Преобразува позицията на щракване в естествени координати на изображението, като компенсира преоразмеряването дисплей на браузъра.
  3. Чете RGBA стойността на пиксела чрез API canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Показва визуализация на инструмента за избор на цвят. При изпращане сървърът чете същата позиция с PHP GD и изчислява крайните HEX, RGB и HSL кодове.

Стойността на HSL се изчислява от нашата услуга за преобразуване на цветовете, същата като използваната от нашата конвертор на цветове. Получавате последователност от край до край същите стойности, както ако сте въвели HEX кода в конвертора.

Типични случаи на употреба

  • Възпроизвеждане на цвят на екранна снимка: имате екранна снимка на сайт, вие искате да съответствате на точния цвят на бутон или фон. Инструментът за избор ви дава HEX кода прецизно за поставяне във вашия CSS.
  • Идентифицирайте цвят на диаграма в снимка: PDF презентация, страница от списание, визуален продукт. Вече няма нужда да искате диаграма, четете цвета директно.
  • Обратно инженерство на визуална идентичност: улавяне на точното синьо на лого, розовото на банер, оранжевото на призив за действие.
  • Наблюдение на вдъхновение и дизайн: виждате снимка, която харесвате, получавате я точният нюанс на цвете, стена, плакат.
  • Предна част за отстраняване на грешки: екранната снимка на грешка показва неправилен цвят, четете действителната стойност за сравнение с очакваната в модела.
  • Създаване на палитра от справка: избирате няколко точки от a същото изображение за пресъздаване на персонализирана палитра.

Как да използвате инструмента за избор на цвят

  1. Качете вашето изображение (PNG, JPG, GIF, BMP, WebP, до 20 MB).
  2. Визуализация се показва на страницата. Кликнете върху пиксел, за да извлечете цвета му.
  3. Визьор маркира щракната позиция и предварителен преглед на цвета се появява до него.
  4. Потвърдете с бутона за изпращане, за да получите крайния резултат: цветен квадрат, HEX, RGB и HSL код.
  5. За да трансформирате стойността между форматите, използвайте нашия конвертор на цветове.

Често задавани въпроси

Каква е разликата между HEX, RGB и HSL?

Това са три изображения от един и същи цвят. HEX (#ff0000) е най-използваният формат в CSS. RGB изразява трите канала червено/зелено/синьо стойности 0-255. HSL (Hue, Saturation, Lightness) е по-интуитивен за регулиране на нюанс: това е предпочитаният формат, когато искате да потъмните, обезнаситете или модифицирате a цвят без промяна на основния нюанс.

Защо кликването ми не връща точно очаквания цвят?

В област с градиент два съседни пиксела могат да имат много различни стойности. освен това JPG изображенията са компресирани със загуба: цветът на пиксела може леко да се различава от оригинала. За надеждни цветови кодове предпочитайте PNG или некомпресирани изображения.

Координатите ми от екрана ли са или от изображението?

Тези от оригиналното изображение. Нашият JavaScript скрипт автоматично преобразува позицията на кликване (в екранни пиксели) до позицията в основното изображение. Ако вашето изображение е 4000x3000 и то се показва на 800x600, щракването в центъра ще ви върне (2000, 1500), а не (400, 300).

Инструментът за избор работи ли с прозрачни изображения?

да Ако щракнете върху прозрачен пиксел, вие извличате съхранения там RGB цвят (често бяло или черно в зависимост от оригиналния издател). Самата прозрачност (алфа канал) не се връща в резултата; За да анализирате алфа канал, отворете изображението в a графичен редактор.

Какъв размер на изображението се приема?

До 20 MB, PNG, JPG, GIF, BMP и WebP формати. Много големи изображения се показват на 1500 максимална ширина на пикселите, за да остане удобно на екрана, но прочетеният цвят остава този на оригинален пиксел, без повторно семплиране.

Изображенията ми съхраняват ли се на сървъра?

Не. Изборът се прави във вашия браузър. В момента на изпращане файлът се обработва в движение, за да потвърдите цвета на искания пиксел, след което временният файл се изтрива. Никакви изображения не се съхраняват, индексират или споделят.

Какво се случва, ако JavaScript е деактивиран?

Класическото подаване на формуляр остава възможно. Координатите x и y се управляват от скрити полета, които JavaScript попълва при щракване. Без JavaScript тези полета остават празни и форма ще съобщи, че липсва позиция, но самото изображение се предава на сървър за обработка.

Пример за заявка

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

Входна схема

Поле Тип Задължително По подразбиране
image file ✓ –
x string – –
y string – –

този инструмент очаква файл - използвайте Content-Type multipart/form-data вместо application/json

Крайни точки

  • GET https://cdrn.fr/api/v1/tools - изброява всички достъпни инструменти
  • GET https://cdrn.fr/api/v1/tools/color-picker - извлича схемата на този инструмент
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - изпълнява този инструмент с JSON payload