Kujutage ette, et kerite pilte ja leiate ideaalse värvi – täpselt selle tooni, mida vajate järgmise disainiprojekti jaoks. Internetis on mõned suurepärased tööriistad, mis aitavad teil tuvastada mis tahes rakenduses või veebisaidil konkreetseid värve. Vaatame mõnda neist parimatest valikutest.
1. Arendaja tööriistade kasutamine Chrome'i veebibrauseris
Üks võimalus, mida saate proovida, on Chrome'i arendaja tööriist. Chrome pakub arendajatele palju kasulikke funktsioone, mis muudavad ülesannete tegemise palju lihtsamaks. Konkreetsete värvide tuvastamiseks mis tahes rakenduses või veebisaidil saate kasutada järgmisi samme.
- Avage Chrome'i veebibrauseris veebisait, millel soovite värvi tuvastada
- Klõpsake Chrome'i paremas ülanurgas kolme punktiga ikoonil. Ilmub hüpikaken koos hulga valikutega.
- Klõpsake valikul "Rohkem tööriistu" ja seejärel valige ilmuvast hüpikaknas "Arendaja tööriistad".
- Kasutage Ctrl + Shift + I, kui soovite ülaltoodud sammud vahele jätta
- Nüüd jaguneb aken kaheks ekraaniks – vasakul pool veebisait ja paremal veebisaidi kood
- Sisestage klaviatuuril Ctrl + Shift + C. See näitab teile veebisaidi konkreetse elemendi kõiki üksikasju, kui hõljutame hiirekursori elementide peal.
- Elemendi värvikoodi leiate koos muu kasuliku teabega.
Näide
Oletame, et olete huvitatud mõne elemendi konkreetsetest värvikoodidest järgmisel veebisaidil:
Saate valida arendaja tööriistad, klõpsates ekraani nurgas kolmel punktil. Valige rippmenüüst Rohkem tööriistu ja seejärel Arendaja tööriistad.
Ekraan jagatakse visuaalselt kaheks leheküljeks. Näete veebisaiti vasakul ja saidi koodi paremal.
Tippige käsk ja kiirklahv "Ctrl + Shift + C" ja hõljutage hiirekursorit veebisaidi elementide kohal. See näitab selle elemendi värvi koos muu kasuliku teabega. Allpool on kaks näidet, kus leiame otsingutööriista alt navigeerimisriba värvi ja armatuurlaua.
Siit leiame navigeerimisriba hüpikakna värvikoodi. Värvikood on #333333.
Armatuurlaua värvi leiate koos muude kasulike detailidega. Värv: #333333, Taustavärv: #5D4A8E. Kuigi see võib alguses tunduda pisut hirmutav, muutub programmi kasutamine veidi harjutades palju lihtsamaks.
2. Silmatilguti kroompikendus
Eye Dropper on populaarne ja laialdaselt kasutatav Chrome'i laiendus, mis aitab teil leida igal veebisaidil või rakenduses teatud värve.
Veebisaidil või rakenduses konkreetsete värvide tuvastamiseks, kasutades laiendustööriista Eye Dropper, järgige alltoodud samme.
- Avage Chrome'i veebibrauseris mis tahes veebisait või rakendus
- Klõpsake silmatilkade laienduse ikooni
- Valige „Vali veebilehelt värv” ja hõljutage hiirekursorit rakenduse või veebisaidi erinevate elementide kohal.
Loetletud elementide värvikoodid leiate veebilehe paremast alanurgast.
Näide
Olgu, kasutame tilguti pikendamise tööriista päriselus. Alustuseks avame veebisaidi ja vajutame Eye Dropper laienduse ikooni
Kui hõljutate kursorit veebisaidi erinevate elementide peal, näete ekraani paremas alanurgas olevas jaotises kuvatavaid värvikoode.
Kui hõljutan kursorit V-kujulisel ikoonil, näen selle värvikoodi alumises aknas, nagu mainitud. Selle tööriista eeliseks on see, et leiate ka RGB-koodi koos elemendi hex-värvikoodiga. Meetod on paindlik kasutamiseks neile, kes soovivad lihtsat ja kiiret viisi oma lemmikvärvide koodide hankimiseks.