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

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

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 разом із шістнадцятковим кодом кольору елемента. Цей метод гнучкий для тих, хто хоче отримати простий і швидкий спосіб отримати коди для своїх улюблених кольорів.