Как да идентифицирате специфичен цвят в приложение или уебсайт

Представете си, че прелиствате изображения и намирате перфектния цвят – точния нюанс, от който се нуждаете за следващия си дизайнерски проект. В интернет има някои страхотни инструменти, които да ви помогнат да идентифицирате конкретни цветове във всяко приложение или уебсайт. Нека да разгледаме някои от най-добрите варианти за тях.

1. Използване на инструменти за програмисти в уеб браузъра Chrome

Една опция, която можете да опитате, е инструментът за разработчици на Chrome. Chrome идва с много полезни функции за разработчиците, което прави задачите много по-лесни за изпълнение. Можете да използвате следните стъпки, за да идентифицирате конкретни цветове във всяко приложение или уебсайт.

• Отворете уебсайта, на който искате да идентифицирате цвят, в уеб браузъра Chrome
• Кликнете върху иконата с три точки в горния десен ъгъл на Chrome. Ще се появи изскачащ прозорец с куп опции.
• Щракнете върху „Още инструменти“ и след това изберете „Инструменти за разработчици“ от изскачащия прозорец.
• Използвайте Ctrl + Shift + I, ако искате да пропуснете горните стъпки
• Сега прозорецът се разделя на два екрана – уебсайтът вляво и кодът на уебсайта вдясно
• Въведете Ctrl + Shift + C на клавиатурата си. Това ви показва всички подробности за конкретен елемент на уебсайта, когато задържим курсора на мишката върху елементите.
• Можете да намерите цветния код на елемента заедно с друга полезна информация.

Пример

Да приемем, че се интересувате от специфичните цветови кодове за някои елементи на следния уебсайт:

Можете да изберете инструментите за разработчици, като щракнете върху трите точки в ъгъла на екрана. В падащото меню изберете Още инструменти, след това Инструменти за разработчици.

Екранът ще бъде визуално разделен на две страници. Ще видите уебсайта вляво и кода на сайта вдясно.

Въведете командата и прекия път „Ctrl + Shift + C“ и задръжте курсора на мишката върху елементите на уебсайта. Това ще покаже цвета на този елемент, заедно с друга полезна информация. По-долу са дадени два примера, където намираме цвета на лентата за навигация и таблото за управление под инструмента за търсене.

Тук можем да намерим цветния код в изскачащия прозорец за навигационната лента. Цветовият код е #333333.

Цветът на таблото може да бъде намерен заедно с други полезни детайли. Цвят: #333333, Цвят на фона: #5D4A8E. Въпреки че в началото може да изглежда малко плашещо, програмата става много по-лесна за използване с малко практика.

2. Хромиран удължител за капкомер за очи

Eye Dropper е популярно и широко използвано разширение за Chrome, което ви помага да намерите определени цветове на всеки уебсайт или приложение.

Следвайте стъпките по-долу, за да идентифицирате конкретни цветове на уебсайт или приложение, като използвате инструмента за разширение на капкомер за очи.

• Отворете всеки уебсайт или приложение в уеб браузъра Chrome
• Щракнете върху иконата за разширение на капкомер за очи
• Изберете „Избор на цвят от уеб страница“ и задръжте курсора на мишката върху различни елементи в приложението или уебсайта.

Можете да намерите цветния код на елементите, изброени в долния десен ъгъл на уеб страницата.

Пример

Добре, нека използваме инструмента за удължаване на капкомер в пример от реалния живот. Ще започнем с отваряне на уебсайт и натискане на иконата за разширение на капкомер за очи

Когато задържите курсора на мишката върху различни елементи на уебсайта, можете да видите как цветните кодове се появяват в секция в долния десен ъгъл на екрана.

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