Як визначити певний колір у додатку чи на веб-сайті

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

1. Використання інструментів розробника у веб-переглядачі Chrome

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

  • Відкрийте веб-сайт, на якому потрібно визначити колір, у веб-переглядачі Chrome
  • Натисніть значок із трьома крапками у верхньому правому куті Chrome. З'явиться спливаюче вікно з купою параметрів.
  • Натисніть «Інші інструменти», а потім у спливаючому вікні виберіть «Інструменти розробника».
  • Використовуйте Ctrl + Shift + I, якщо ви хочете пропустити наведені вище кроки
  • Тепер вікно ділиться на два екрани – веб-сайт зліва та код веб-сайту праворуч
  • Введіть Ctrl + Shift + C на клавіатурі. Це показує вам усі деталі конкретного елемента на веб-сайті, коли ми наводимо курсор миші на елементи.
  • Ви можете знайти колірний код елемента разом з іншою корисною інформацією.

Приклад

Скажімо, вас цікавлять конкретні коди кольорів для деяких елементів на такому веб-сайті:

Як визначити певний колір у додатку чи на веб-сайті

Ви можете вибрати інструменти розробника, натиснувши три крапки в кутку екрана. У спадному меню виберіть Інші інструменти, а потім Інструменти розробника.

Як визначити певний колір у додатку чи на веб-сайті

Як визначити певний колір у додатку чи на веб-сайті

Екран буде візуально розділений на дві сторінки. Зліва ви побачите веб-сайт, а праворуч — код сайту.

Як визначити певний колір у додатку чи на веб-сайті

Введіть команду та ярлик «Ctrl + Shift + C» і наведіть курсор миші на елементи веб-сайту. Це покаже колір цього елемента разом з іншою корисною інформацією. Нижче наведено два приклади, де ми знаходимо колір панелі навігації та інформаційної панелі під інструментом пошуку.

Тут ми можемо знайти колірний код у спливаючому вікні для панелі навігації. Код кольору #333333.

Як визначити певний колір у додатку чи на веб-сайті

Колір приладової панелі можна знайти разом з іншими корисними деталями. Колір: #333333, колір фону: #5D4A8E. Хоча на початку це може виглядати трохи лякаючим, програмою стає набагато легше користуватися, якщо трохи потренуватися.

2. Розширення очної крапельниці Chrome

Eye Dropper – це популярне й широко використовуване розширення для Chrome, яке допомагає знаходити певні кольори на будь-якому веб-сайті чи в програмі.

Як визначити певний колір у додатку чи на веб-сайті

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

  • Відкрийте будь-який веб-сайт або програму у веб-переглядачі Chrome
  • Натисніть на піктограму розширення Eye Dropper
  • Виберіть «Вибрати колір з веб-сторінки» та наведіть курсор миші на різні елементи програми чи веб-сайту.

Як визначити певний колір у додатку чи на веб-сайті

Ви можете знайти колірний код елементів, перерахованих у нижньому правому куті веб-сторінки.

Приклад

Гаразд, давайте використаємо інструмент розширення піпетки на прикладі з реального життя. Ми почнемо з того, що відкриємо веб-сайт і натиснемо значок розширення Eye Dropper

Як визначити певний колір у додатку чи на веб-сайті

Коли ви наводите курсор на різні елементи веб-сайту, ви можете побачити, що кольорові коди з’являються в розділі в нижньому правому куті екрана.

Як визначити певний колір у додатку чи на веб-сайті

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

Залишити коментар

Як змінити швидкість відео на Android

Як змінити швидкість відео на Android

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

Zoom: Як додати відеофільтр

Zoom: Як додати відеофільтр

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

Facebook: Як перевірити, чи хтось онлайн

Facebook: Як перевірити, чи хтось онлайн

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

Facebook: Як приховати позначені тегами фотографії

Facebook: Як приховати позначені тегами фотографії

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

Facebook: Як отримувати сповіщення, коли хтось публікує дописи

Facebook: Як отримувати сповіщення, коли хтось публікує дописи

Щоб отримувати сповіщення, коли хтось публікує щось у Facebook, перейдіть у налаштування та ввімкніть сповіщення. Потім додайте цю людину до списку близьких друзів.

Як користуватися Samsung Pay з Galaxy Z Fold 5

Як користуватися Samsung Pay з Galaxy Z Fold 5

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

Samsung Galaxy Z Fold 5: Як підключити до ПК

Samsung Galaxy Z Fold 5: Як підключити до ПК

Samsung Galaxy Z Fold 5, завдяки своєму інноваційному складаному дизайну та передовим технологіям, пропонує різні способи підключення до ПК. Незалежно від того, чи ви

Початок сеансу Google Meet з Gmail

Початок сеансу Google Meet з Gmail

Google Meet – чудова альтернатива іншим додаткам для відеоконференцій, таким як Zoom. Він може не мати тих самих функцій, але ви все одно можете використовувати інші. Ви можете розпочати сеанс Google Meet безпосередньо зі сторінки Gmail. Дізнайтеся, як це зробити, виконавши ці кроки.

Firefox: Як визначити певний колір на веб-сторінці

Firefox: Як визначити певний колір на веб-сторінці

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

Що робити, коли WhatsApp Web не працює

Що робити, коли WhatsApp Web не працює

Веб-версія WhatsApp не працює? Не хвилюйтеся. Ось кілька корисних порад, які ви можете спробувати, щоб WhatsApp знову запрацював.