Как да идентифицирате конкретен цвят в приложение или уебсайт
Miscellanea / / October 04, 2023
Независимо дали става въпрос за уеб дизайн и дизайн на приложения, предаване на емоции, брандиране или подобряване на потребителското изживяване, цветовете със сигурност играят жизненоважна роля. Намирането на правилния цвят или комбинация от цветове обаче е по-лесно да се каже, отколкото да се направи. За щастие, има някои инструменти на наше разположение за идентифициране на конкретни цветове в приложение или уебсайт, така че можем да изберем и запазим цветовете, които са привлекли вниманието ни.
![Как_да_идентифицирам_специфичен_цвят_на_приложение_или_уебсайт](/f/6e1a5c1f201aa0007b51936c5fcc23a4.jpg)
Представете си, че превъртате през уебсайт и намирате идеалния цвят, точния нюанс, от който се нуждаете за следващия си проект. Добре тогава нека ви помогнем да намерите точния цвят на фона или други елементи на уебсайт или приложение.
Един от най-лесните начини да получите цветен код от уебсайт е чрез използване на специални уеб инструменти и уебсайтове за избор на цвят. Без значение кой браузър използвате, дали a На базата на хром, с дълбока уеб съвместимостили Safari по подразбиране на Apple, този метод е приложим.
Освен това, независимо дали използвате Mac, лаптоп с Windows, iPhone, iPad или устройство с Android, тези уеб инструменти за идентифициране на цветове ще бъдат удобно допълнение към вашия арсенал. Тествахме няколко опции и ето тази, която ни подхожда най-добре.
Етап 1: Отворете браузъра си и отидете на ImageColorPicker.com
ImageColorPicker
Стъпка 2: Щракнете/докоснете Използвайте вашето изображение, за да предоставите URL адреса на уебсайта/изображението или да качите изображението.
![Намерете HEX цветен код на уебсайтове с помощта на ImageColorPicker 1](/f/91311f8f159377d9762b8662c5f7c10f.png)
Стъпка 3: Сега можете или,
- Копирайте адреса на уебсайта
- Копирайте изображението или неговия URL адрес
- Направете екранна снимка на страницата
![Намерете HEX цветен код на уебсайтове с помощта на ImageColorPicker 2](/f/653ee71f44db35dc788e7b0aef2ab173.png)
Стъпка 4: След като изображението е обработено, можете да се движите около курсора, за да изберете цвета.
Стъпка 5: Съответно ще видите HEX или RGB кода, копирайте/поставете и ги използвайте според нуждите.
![Намерете HEX цветен код на уебсайтове с помощта на ImageColorPicker 3](/f/aba29317f8eca5c9996d34baf0ef43c5.png)
Ако не харесвате ImageColorPicker.com или искате повече опции, можете да опитате следните уебсайтове.
Избор на цвят RedKetchup
HTML цветни кодове
Борови инструменти
Въпреки това, за разлика от ImageColorPicker, тези уебсайтове не поддържат URL адреси на уебсайтове или изображения. Те разчитат на вас да качвате изображения. Така че ще трябва да направите екранни снимки, да ги качите и след това да намерите цвета.
2. Изберете цвят от уебсайт чрез софтуер за редактиране на снимки
Ако използвате инструмент за редактиране на снимки, всъщност не е нужно да търсите повече. Независимо дали усъвършенстван софтуер за редактиране на снимки като Photoshop или онлайн инструменти като Canva, повечето софтуери за редактиране на снимки са оборудвани с удобен инструмент за избор на цвят/капкомер, включително Бърз поглед на Mac, и Редактор на екранни снимки на iPhone.
Въпреки това, не всички може да ви помогнат да получите цветовия код от уебсайт или приложение. Те ще ви позволят да изберете и използвате цвета в прозореца им. Ако това е страхотно за вас, продължете напред и използвайте инструмент за редактиране на снимки по ваш избор, за да идентифицирате конкретни цветове, които вземаме Canva като пример.
Етап 1: Направете екранна снимка на уебсайта или приложението.
Стъпка 2: Отворете Canva в браузър (или приложение на вашето мобилно устройство).
Стъпка 3: Изберете платно и качете изображението.
![Качете изображение, за да изберете цвят](/f/8bddceefc80c205cb1c1502037284f0b.png)
Стъпка 4: След това отворете всеки инструмент, свързан с цвят, текст, рисунка, елементи и т.н.
Стъпка 5: Изберете цветното поле и след това щракнете върху иконата „+ Добавяне на нов цвят“.
![Изберете инструмента за цвят](/f/b091d99b241e241bf437690f46a0f010.png)
Стъпка 6: Превъртете до цвета и щракнете/докоснете, за да изберете желания цвят.
![Използвайте капкомер, за да изберете цвета](/f/eaf3ca5aa43ba4a71bfd7a22b3fa9cb6.png)
3. Използвайте Color Picker във Firefox, за да намерите цвят от всеки уебсайт
Освен софтуер за редактиране на снимки, браузърът Firefox може да се похвали и с вграден инструмент за капкомер. Въпреки че е малко скрит, така че нека разкрием хака.
Етап 1: Стартирайте Firefox и отворете уебсайта, от който искате да изберете цвят.
Стъпка 2: Докоснете иконата с три реда от горния десен ъгъл
Стъпка 3: Изберете More Tools и след това Eyedropper.
![Изберете More Tools и след това Eyedropper](/f/649ac9ecc69dcf2805f5edaa7ef94178.png)
Стъпка 4: Сега просто преместете курсора до цвета, който искате да идентифицирате, Firefox незабавно ще намери шестнадесетичния код на цвета и ще ви го представи.
![Изберете цвета с помощта на инструментите на Firefox](/f/1c0653d4f7fbf77b3c51c9cbc418db3c.png)
Стъпка 5: По-специално, Eyedropper ще продължи да проверява и доставя цветни кодове, докато излезете. За да затворите инструмента, просто щракнете където и да е на екрана.
Точно като Firefox, дори Chrome има някои инструменти за разработчици, които могат да ви помогнат да идентифицирате конкретни цветове на уебсайт. Има обаче уловка; Нека разберем.
Инструментът за избор на цвят на Google Chrome е доста ограничен. Този трик може да определи само цветовете на елементите, кодирани в уебсайта, т.е. цветовете, споменати в кодовете. Така че не можете да получите информация, свързана с цвета, за импортирани елементи като лога, изображения и т.н.
Етап 1: Стартирайте Chrome и отворете уебсайта, от който искате да изберете цвят.
Стъпка 2: След това щракнете върху иконата с три точки от горния десен ъгъл.
Стъпка 3: Изберете Още инструменти и след това Инструменти за разработчици.
![Изберете Още инструменти и след това Инструменти за разработчици](/f/4391b30c5b390e280fc887410d882d86.png)
Забележка: Вашият екран ще бъде визуално разделен на две страници. Ще видите уебсайта отляво и кода на сайта отдясно.
Стъпка 4: За да изберете цвят от уебсайта, въведете Ctrl + Shift + C и преместете курсора до цвета, който искате да изберете.
Стъпка 5: Вече можете да видите кода на цвета на фона, текста или елемента.
![Изберете елемента, за да намерите цвят](/f/f3d4f7aae5a7ab4dd6919e01c718e688.png)
5. Използвайте разширения на браузъра, за да намерите шестнадесетичния код на цвят в уебсайтове
Разширения на браузъра може не само да повиши вашата производителност, но и да направи цветовата идентификация още по-удобна. За щастие, повечето често срещани браузъри, включително поддръжката на Chrome и Firefox, имат такива разширения в своя арсенал.
Разширение за Chrome за идентифициране на цвят
Шестнадесетичен избор на цвят
Капкомер за очи
Цветен капкомер
Разширение за Firefox за идентифициране на цвят
ColorZilla
Colorpick капкомер
След като добавите желаното разширение към браузъра си, останалото е детска игра. Отворете уебсайта → изберете разширението от лентата с менюта → преместете курсора до цвета → вземете цветовия код.
![Използвайте разширения на браузъра, за да намерите шестнадесетичния код на цвят в уебсайтове](/f/b1dbabc33d22f70a2a4d0519acf93793.png)
Изберете своя цвят
Независимо дали сте дизайнер, разработчик или някой, който се интересува от цвят, който сте срещнали, идентифицирането на конкретни цветове в приложение или уебсайт е полезно умение. По този начин ние покрихме множество методи и инструменти, за да ви помогнем да намерите този неуловим цветен код или име на цвят.
Надяваме се, че можем да ви бъдем полезни. Ако имате нужда от още подобни хакове или предложения или имате нужда от отговори на някои озадачаващи въпроси, свързани с технологиите, разделът за коментари е винаги отворен.