Програма піпетка для визначення кольору. App Store Колориметр

Якщо у вас є свій сайт, то мимоволі чи мимоволі вам доведеться опановувати інструменти та навички різних інтернет-професій. Інструменти дизайнера доведеться вивчати особливо ретельно, оскільки шлях до серця читача лежить через професійне зображення. Красиві та правильно підібрані картинки на вашому сайті збільшують ймовірність прочитання інформації, це факт! Те, що ці картинки мають бути унікальними, це також незаперечний факт. Для того, щоб навчитися самостійно робити картинки, ми повинні дізнатися про масу деталей, і одна з них — визначення кольору будь-якого елемента на інтернет-сторінці. Про те, як дізнатися колір фону на сторінці, і сьогодні піде мова.

Знаю, що є безліч інших способів та інструментів, але я ділюся практичним, своїм досвідом зі створення картинок. Якщо ви не професійний дизайнер, то тоді вам ця стаття стане в нагоді в подальшій роботі. Розпізнати колір на сторінці можна за допомогою корисного плагіна ColorZilla для браузерів Mozilla Firefox та Google Chrome.

Коли нам потрібний цей інструмент?

- Якщо ви проектуєте дизайн сайту;
— Якщо ви створюєте новий рекламний блок, який відповідає кольоровій палітрі майданчика;
- Якщо ви складаєте кольорову гаму стилів для сайту;
- Якщо ви зайняті промальовуванням елементів віртуального проекту;
- Якщо ви створюєте будь-яке зображення;
— У всіх інших випадках, коли потрібно визначити колір пікселя, не запускаючи масштабних та ресурсомістких програм типу PhotoShop або ColorDraw.

Як користуватись ColorZilla?

Все дуже просто! Переходимо на сайт, натискаємо на ліву іконку і вибираємо ту вкладку, яка вам найбільше потрібна:

- Mozilla Firefox (інструмент для браузера);
- Google Chrome (інструмент для браузера);
- Gradient Generator (онлайн-інструмент).

Завантажуйте потрібний плагін для браузера і після встановлення іконка розширення буде весь час перебувати в панелі вашого браузера. Не забудьте активувати плагін, для цього достатньо клацнути мишкою на іконку.

Як працювати з розширенням ColorZilla

Напишу простими словами, як я працюю з цим розширенням. У момент створення або редагування картинки в редакторі Canva, про який докладніше ви можете прочитати, якщо перейдете по цій , необхідно додати фон, такий же, як у початкового зображення. На зображенні ви бачите, що з правого боку є частина білого фону, який можна було б пофарбувати в колір фону. Не маючи такого розширення під рукою, зробити це дуже проблематично, може, якщо методом підбору, що не дасть 100% ідентичності. Натискаючи на піпетку в розширенні, а потім натиснувши лівою кнопкою мишки на будь-який піксель картинки, вгорі з'являється чудова підказка, яка дає мені код кольору в шістнадцятковому форматі і в RGB.

Для роботи з редактором Canva мені потрібний лише шістнадцятковий формат. Я його копіюю, і потім вже в редакторі Canva вношу значення цього кольору, і результат мене дуже тішить. Ось так, буквально за пару рухів я можу підібрати ідентичний колір, тим самим надавши унікальності початковій картинці, змінивши її розмір.

Я пропоную вам трохи посидіти та познайомитися з усіма інструментами цього розширення, що знаходяться в меню. Ви обов'язково знайдете парочку з них, якими користуватиметеся з особливим задоволенням. А решту оволодієте з часом. Ви краще за мене знаєте, що в картинці можна змінити не тільки тло, а також буває необхідність щось написати. Підібрати відповідний колір шрифту - теж не така проста справа, як здається на перший погляд. Можливо, вам більше сподобається палітра або генератор градієнта, ніж піпетка. В одному я впевнена точно: із ColorZilla всі питання можна вирішити дуже швидко.

Як завжди, краще один раз побачити, ніж сто разів прочитати! Тому пропоную подивитися відео, в якому ви навчитеся встановлювати розширення ColirZilla і використовувати його у своїй роботі. Бажаю приємного перегляду та красивих унікальних картинок!

Напевно, одна з перших утиліт подібного плану, проте вона не втрачає своєї популярності серед веб-майстрів.
Програма показує HTML код вибраного кольору і, навпаки, вкаже колір за кодом.

Для визначення кольору на моніторі клацаємо по кнопці Screen, наводимо покажчик у потрібну точку, клікнемо один раз на цьому місці. У полі HTML Code виведеться колір у HTML Code. Залишилося лише скопіювати цей код у буфер обміну та вставити у потрібне місце.
Переваги: ​​програма дуже мало важить і вкрай проста

Програма Color Picker

Перевагою цієї програми є показ кольору в RGB або HSL коді, і звичайно, в HTML.

Для визначення кольору треба клацнути по кнопці "Select Color with Mouse", курсор миші набуде форми піпетки, залишається навести курсор у потрібне місце і клацнути по ньому. Програма сумісна з версіями Windows XP та вище.
Потребує інсталяції на комп'ютер.

Програма Just Color Picker

Мабуть, мені вона найбільше подобається. Конкретно мені дуже допомагає те, що після захоплення кольору в інтерфейсі з'являється смуга зі змінною тональністю і яскравістю цього кольору. Тобто. я можу навести мишку на смугу і захопити ще кілька близьких кольорів, наприклад, трохи яскравіше, для подальшого вибору оптимального.

  • При першому запуску пропонує вибрати мову, російську присутній.
  • В інтерфейсі Just Color Picker є екранна лупа.
  • Дозволяє зберегти кілька кольорів.
  • Знімає показ не кліком мишки, а гарячими клавішами Alt+X(за замовчуванням), що дозволяє точніше визначити колір
  • Після визначення кольору програма автоматично визначить додаткові кольори, які гармоніюватимуть із вибраним і які можна буде використовувати у дизайні.
  • Не потребує встановлення, працює у фоновому режимі.

Програма сумісна з версіями Windows XP та вище.

Також не можна не відзначити безкоштовну програму ColorPic 4.1. Єдиним її недоліком і те, що вона вимагає інсталяції на комп'ютер, тобто. не може працювати у фоновому режимі.

Але переваг у неї хоч відбавляй. Програма не зовсім проста, тому опис та посібник з роботи з нею наводиться на цьому сайті в окремій статті

Дуже часто під час роботи з сайтами та картинками потрібно визначити колір будь-якої точки Вашого екрану монітора.

Наприклад, Ви хочете зробити колір фону на сайті таким самим, як колір блакитного неба на фотографії. Або шрифт заголовків зробити такий, як колір морської хвилі. Або навпаки, колір шрифту використовувати як фон для створення банера. Словом, варіантів багато. Ретельний підбір кольорів дуже багато означає як у веб-дизайні, так і в роботі вебмайстра.

Визначення кольору означає знаходження коду. Потім код, залежно від Ваших цілей, можна використовувати як у різних графічних редакторах, так і у коді html.

Найчастіше при цьому використовується , в якому код можна подати в десятковій та шістнадцятковій системі.

Дуже зручно для визначення кольору використовувати піпетку. Але крім цієї програми є й інші, за допомогою яких можна це робити.

Піпетка програми Adobe Photoshop

Думаю, небагато користувачів цієї програми знають, що за допомогою неї можна визначити колірне тільки будь-якої точки на картинці, відкритій у редакторі, але й будь-якої точки на екрані Вашого монітора.

Робиться це дуже просто. Відкриваєте , створюєте зображення, і, не відпускаючи ліву клавішу миші, переводіть курсор піпетки туди, де знаходиться обрана Вами точка. Це може бути будь-яка точка за межами вікна програми. У міру руху курсору Ви бачитимете, як змінюється колір малювання на палітрі кольорів. Після вибору потрібної точки відпускаєте клавішу миші. Клацаєте по віконце кольору малювання на палітрі кольорів, і дивіться код Вашого кольору.

Такий спосіб визначення кольору зручний тим, що не вимагає встановлення жодних додаткових програм, крім фотошопу, який більшість користувачів і так вже встановлено.

HEX/HTML

Колір у форматі HEX ​​- це ні що інше, як шістнадцяткове уявлення RGB.

Кольори видаються у вигляді трьох груп шістнадцяткових цифр, де кожна група відповідає за свій колір: #112233, де 11 – червоний, 22 – зелений, 33 – синій. Усі значення мають бути між 00 та FF.

У багатьох додатках допускається скорочена форма запису шістнадцяткових кольорів. Якщо кожна з трьох груп містить однакові символи, наприклад #112233, їх можна записати як #123.

  1. h1 ( color: #ff0000; ) /* червоний */
  2. h2 ( color: #00ff00; ) /* зелений */
  3. h3 ( color: #0000ff; ) /* синій */
  4. h4 ( color: #00f; ) /* той же синій, скорочений запис */

RGB

Колірний простір RGB (Red, Green, Blue) складається з усіх можливих кольорів, які можуть бути отримані шляхом змішування червоного, зеленого та синього. Ця модель популярна у фотографії, телебаченні, та комп'ютерній графіці.

Значення RGB задаються цілим числом від 0 до 255. Наприклад, rgb(0,0,255) відображається як синій, тому що синій параметр встановлений у найвище значення (255), а інші встановлені в 0.

Деякі програми (зокрема, веб-браузери) підтримують відсотковий запис значень RGB (від 0% до 100%).

  1. h1 ( color: rgb(255, 0, 0); ) /* червоний */
  2. h2 ( color: rgb(0, 255, 0); ) /* зелений */
  3. h3 ( color: rgb(0, 0, 255); ) /* синій */
  4. h4 ( color: rgb(0%, 0%, 100%); ) /* той же синій, відсотковий запис */

Значення кольорів RGB підтримуються у всіх основних браузерах.

RGBA

З недавніх пір сучасні браузери навчилися працювати з колірною моделлю RGBA - розширенням RGB за допомогою альфа-каналу, що визначає непрозорість об'єкта.

Значення кольору RGBA визначається як: rgba(red, green, blue, alpha). Параметр alpha – це число в діапазоні від 0.0 (повністю прозорий) до 1.0 (повністю непрозорий).

  1. h1 ( color: rgb(0, 0, 255); ) /* синій у звичайному RGB */
  2. h2 ( color: rgba(0, 0, 255, 1); ) /* той же синій в RGBA, тому що непрозорість: 100% */
  3. h3 ( color: rgba(0, 0, 255, 0.5); ) /* непрозорість: 50% */
  4. h4 ( color: rgba(0, 0, 255, .155); ) /* непрозорість: 15.5% */
  5. h5 ( color: rgba(0, 0, 255, 0); ) /* повністю прозорий */

RGBA підтримується в IE9+, Firefox 3+, Chrome, Safari, та в Opera 10+.

HSL

Колірна модель HSL є поданням моделі RGB у циліндричній системі координат. HSL представляє кольори більш інтуїтивним та зрозумілим для сприйняття чином, ніж типове RGB. Модель часто використовується в графічних додатках, палітрах кольорів, і для аналізу зображень.

HSL розшифровується як Hue (колір/відтінок), Saturation (насиченість), Lightness/Luminance (світло/світлість/світлість, не плутати з яскравістю).

Hue задає положення кольору на колі (від 0 до 360). Saturation є відсоткове значення насиченості (від 0% до 100%). Lightness є відсотковим значенням світлості (від 0% до 100%).

  1. h1 (color: hsl(120, 100%, 50%); ) /* зелений */
  2. h2 (color: hsl(120, 100%, 75%); ) /* світло-зелений */
  3. h3 (color: hsl(120, 100%, 25%); ) /* темно-зелений */
  4. h4 (color: hsl(120, 60%, 70%); ) /* пастельний зелений */

HSL підтримується в IE9+, Firefox, Chrome, Safari та Opera 10+.

HSLA

За аналогією з RGB/RGBA, HSL є режим HSLA з підтримкою альфа-каналу для вказівки непрозорості об'єкта.

Значення кольору HSLA визначається як: hsla(hue, saturation, lightness, alpha). Параметр alpha – це число в діапазоні від 0.0 (повністю прозорий) до 1.0 (повністю непрозорий).

  1. h1 ( color: hsl(120, 100%, 50%); ) /* зелений у звичайному HSL */
  2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* той же зелений в HSLA, тому що непрозорість: 100% */
  3. h3 (color: hsla(120, 100%, 50%, 0.5); ) /* непрозорість: 50% */
  4. h4 (color: hsla(120, 100%, 50%, .155); ) /* непрозорість: 15.5% */
  5. h5 ( color: hsla(120, 100%, 50%, 0); ) /* повністю прозорий */

CMYK

Колірна модель CMYK часто асоціюється з кольоровим друком, з поліграфією. CMYK (на відміну від RGB) є субтрактивною моделлю, це означає, що більш високі значення пов'язані з темнішими кольорами.

Кольори визначаються співвідношенням блакитного (Cyan), пурпурового (Magenta), жовтого (Yellow) з додаванням чорного (Key/blacK).

Кожне з чисел, що визначає колір CMYK, є відсоток фарби даного кольору, що становить колірну комбінацію, а точніше, розмір точки растру, що виводиться на фотонабірному апараті на плівці даного кольору (або прямо на друкованій формі у випадку з CTP).

Наприклад, для отримання кольору PANTONE 7526 слід змішати 9 частин блакитної фарби, 83 частин пурпурової фарби, 100 - жовтої фарби, і 46 - чорної. Це можна позначити так: (9,83,100,46). Іноді мають такі позначення: C9M83Y100K46, або (9%, 83%, 100%, 46%), або (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (також відома як HSV) схожа на HSL, але це дві різні колірні моделі. Вони обидві засновані на циліндричній геометрії, але HSB/HSV заснована на моделі "hexcone", у той час як HSL заснована на моделі "bi-hexcone". Художники часто вважають за краще використовувати цю модель, прийнято вважати, що пристрій HSB/HSV ближче до природного сприйняття кольорів. Зокрема, колірна модель HSB застосовується у Adobe Photoshop.

HSB/HSV розшифровується як Hue (колір/відтінок), Saturation (насиченість), Brightness/Value (яскравість/значення).

Hue задає положення кольору на колі (від 0 до 360). Saturation є відсоткове значення насиченості (від 0% до 100%). Brightness є відсотковим значенням яскравості (від 0 до 100%).

XYZ

Колірна модель XYZ (CIE 1931 XYZ) є суто математичним простором. На відміну від RGB, CMYK та інших моделей, у XYZ основні компоненти є «уявними», тобто ви не можете співвіднести X, Y, і Z з будь-яким набором кольорів для змішування. XYZ є майстер-моделлю майже всіх інших колірних моделей, які у технічних областях.

LAB

Колірна модель LAB (CIELAB, CIE 1976 L*a*b*) обчислюється з простору CIE XYZ. При розробці Lab переслідувалася мета створення колірного простору, зміна кольору в якому буде більш лінійним з погляду людського сприйняття (порівняно з XYZ), тобто для того, щоб однакова зміна значень координат кольору в різних областях колірного простору виробляло однакове відчуття зміни кольору.

При роботі із зображеннями часто потрібно точно визначити колір пікселя. Це потрібно для корекції зображення або у дизайнерських роботах для налаштування кольорової гами фону, панелей або кнопок своєї сторінки в інтернеті чи на сайті.

Цей сервіс дозволить вам дізнатися колір точки онлайн без завантаження та встановлення додаткових програм. Працюючи в нашому сервісі піпетка онлайн, ви швидко і легко зможете дізнатися колір будь-якого фрагмента зображення.

Для цього необхідно завантажити картинку на сайт. Щоб завантажити файл, натисніть кнопку «Огляд». Виберіть потрібний файл із зображенням та натисніть «Завантажити». Як тільки зображення завантажиться, ви побачите його на екрані. Потім потрібно навести курсор на той піксель, колір якого хочете визначити. В окремому вікні ви зможете побачити колір пікселя, а в полі «Поточне значення» з'явиться відповідний номер пікселя HTML і RGB кольору пікселя.

Сервіс передбачає збереження коду кольору у форматі HTML та RGB кольору. Для цього потрібно навести курсор на потрібний піксель і натиснути лівою кнопкою миші. У полі «Збережені значення» в окремому вікні можна побачити колір пікселя, а також збережені значення коду пікселя у форматі HTML і RGB кольору.

Відгуки

Та начебто непогано, дякую
Норм
щедевр
наїс.
Допомогли дуже лойс вам
mob_info