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