Як визначити певний колір у програмі чи на веб-сайті
Різне / / October 04, 2023
Незалежно від дизайну веб-сайтів і програм, передачі емоцій, брендингу чи покращення взаємодії з користувачем, кольори, безперечно, відіграють життєво важливу роль. Однак знайти правильний колір або поєднання кольорів легше сказати, ніж зробити. На щастя, у нашому розпорядженні є деякі інструменти для визначення конкретних кольорів у програмі чи на веб-сайті, тож ми можемо вибрати та зберегти кольори, які привернули нашу увагу.
Уявіть, що ви прокручуєте веб-сайт і знаходите ідеальний колір, точний відтінок, який вам потрібен для вашого наступного проекту. Тоді дозвольте нам допомогти вам знайти точний колір фону чи будь-яких інших елементів на веб-сайті чи в додатку.
Один із найпростіших способів отримати колірний код із веб-сайту — це використовувати спеціальні веб-інструменти та веб-сайти вибору кольорів. Незалежно від того, який браузер ви використовуєте, чи a На основі хрому, с глибока веб-сумісністьабо Safari від Apple за замовчуванням, цей метод застосовний.
Крім того, незалежно від того, користуєтеся ви Mac, ноутбуком Windows, iPhone, iPad або пристроєм Android, ці веб-інструменти для визначення кольорів стануть зручним доповненням до вашого арсеналу. Ми протестували кілька варіантів, і ось той, який нам найбільше підходить.
Крок 1: відкрийте браузер і перейдіть на ImageColorPicker.com
ImageColorPicker
Крок 2: натисніть/торкніться Використовуйте своє зображення, щоб надати URL-адресу веб-сайту/зображення або завантажити зображення.
Крок 3: Тепер ви можете або,
- Скопіюйте адресу сайту
- Скопіюйте зображення або його URL-адресу
- Зробіть скріншот сторінки
Крок 4: Після обробки зображення ви можете переміщати курсор, щоб вибрати колір.
Крок 5: Відповідно, ви побачите код HEX або RGB, скопіюйте/вставте та використовуйте їх за потреби.
Якщо вам не подобається ImageColorPicker.com або вам потрібні додаткові параметри, ви можете спробувати такі веб-сайти.
Вибір кольору RedKetchup
Кольорові коди HTML
Соснові інструменти
Однак, на відміну від ImageColorPicker, ці веб-сайти не підтримують URL-адреси веб-сайтів або зображень. Вони покладаються на вас, щоб завантажити зображення. Отже, вам доведеться зробити скріншоти, завантажити їх, а потім знайти колір.
2. Виберіть колір із веб-сайту за допомогою програмного забезпечення для редагування фотографій
Якщо ви використовуєте інструмент для редагування фотографій, вам не потрібно шукати далі. Незалежно від розширеного програмного забезпечення для редагування фотографій, як-от Photoshop, чи онлайн-інструментів, як-от Canva, більшість програм для редагування фотографій оснащено зручним інструментом вибору кольорів/піпетки, зокрема Швидкий огляд Mac, і Редактор скріншотів iPhone.
Однак не всі можуть допомогти вам отримати код кольору з веб-сайту чи програми. Вони дозволять вам вибирати та використовувати колір у своєму вікні. Якщо вам це круто, скористайтеся інструментом для редагування фотографій на ваш вибір, щоб визначити конкретні кольори, які ми використовуємо Canva як приклад.
Крок 1: зробіть знімок екрана веб-сайту або програми.
Крок 2: відкрийте Canva у браузері (або програмі на мобільному пристрої).
Крок 3: виберіть полотно та завантажте зображення.
Крок 4: Далі відкрийте будь-який пов’язаний із кольором інструмент, текст, малюнок, елементи тощо.
Крок 5: виберіть поле кольору, а потім натисніть значок «+ Додати новий колір».
Крок 6: прокрутіть до кольору та натисніть/торкніться, щоб вибрати потрібний колір.
3. Використовуйте палітру кольорів у Firefox, щоб знайти колір на будь-якому веб-сайті
Окрім програмного забезпечення для редагування фотографій, браузер Firefox також може похвалитися вбудованою піпеткою. Хоча це трохи приховано, тож давайте розкриємо хак.
Крок 1: запустіть Firefox і відкрийте веб-сайт, з якого ви хочете вибрати колір.
Крок 2: торкніться піктограми з трьома лініями у верхньому правому куті
Крок 3: виберіть «Інші інструменти», а потім «Піпетка».
Крок 4: Тепер просто наведіть курсор на колір, який ви хочете визначити, Firefox миттєво знайде шістнадцятковий код кольору та представить його вам.
Крок 5: Зокрема, Eyedropper продовжуватиме перевіряти та надавати кольорові коди, доки ви не вийдете. Щоб закрити інструмент, просто натисніть будь-де на екрані.
Так само, як Firefox, навіть Chrome має деякі інструменти розробника, які можуть допомогти вам визначити конкретні кольори на веб-сайті. Однак тут є заковика; давай дізнаємось.
Інструмент вибору кольорів Google Chrome досить обмежений. Цей трюк може визначити лише кольори елементів, закодованих на веб-сайті, тобто кольори, згадані в кодах. Таким чином, ви не можете отримати будь-яку пов’язану з кольором інформацію про імпортовані елементи, такі як логотипи, зображення тощо.
Крок 1: запустіть Chrome і відкрийте веб-сайт, з якого потрібно вибрати колір.
Крок 2: Далі натисніть значок із трьома крапками у верхньому правому куті.
Крок 3: Виберіть Інші інструменти, а потім Інструменти розробника.
Примітка: Ваш екран буде візуально розділений на дві сторінки. Ліворуч ви побачите веб-сайт, а праворуч – код сайту.
Крок 4: щоб вибрати колір із веб-сайту, введіть Ctrl + Shift + C і перемістіть курсор до кольору, який потрібно вибрати.
Крок 5: тепер ви можете переглядати код кольору фону, тексту або елемента.
5. Використовуйте розширення браузера, щоб знайти шістнадцятковий код кольору на веб-сайтах
Розширення для браузера може не тільки підвищити вашу продуктивність, але й зробити ідентифікацію кольорів ще зручнішою. На щастя, більшість поширених браузерів, включаючи підтримку Chrome і Firefox, мають такі розширення в своєму арсеналі.
Розширення Chrome для визначення кольору
Шістнадцяткова панель вибору кольорів
Очна піпетка
Кольорова крапельниця
Розширення Firefox для визначення кольору
ColorZilla
Піпетка Colorpick
Щойно ви додасте потрібне розширення до свого браузера, решта стане дитячою грою. Відкрийте веб-сайт → виберіть розширення на панелі меню → наведіть курсор на колір → отримайте код кольору.
Виберіть свій колір
Незалежно від того, чи ви дизайнер, розробник чи хтось, кому цікавий колір, з яким ви зіткнулися, визначати конкретні кольори в додатку чи на веб-сайті — корисна навичка. Таким чином, ми розглянули кілька методів і інструментів, які допоможуть вам знайти цей невловимий код кольору або назву кольору.
Сподіваюся, ми можемо бути вам корисні. Якщо вам потрібні ще якісь подібні хаки чи пропозиції чи потрібні відповіді на якісь загадкові питання, пов’язані з технікою, розділ коментарів завжди відкритий.