Iedomājieties, ka ritiniet attēlus un atrodat perfektu krāsu — tieši to toni, kas jums nepieciešams nākamajam dizaina projektam. Internetā ir daži lieliski rīki, kas palīdz noteikt konkrētas krāsas jebkurā lietotnē vai vietnē. Apskatīsim dažas no labākajām iespējām.
1. Izstrādātāja rīku izmantošana pārlūkprogrammā Chrome
Viena iespēja, ko varat izmēģināt, ir Chrome izstrādātāja rīks. Pārlūkā Chrome ir daudz izstrādātājiem noderīgu funkciju, kas atvieglo uzdevumu izpildi. Varat izmantot tālāk norādītās darbības, lai identificētu konkrētas krāsas jebkurā lietotnē vai vietnē.
- Atveriet vietni, kurā vēlaties noteikt krāsu pārlūkprogrammā Chrome
- Noklikšķiniet uz trīs punktu ikonas pārlūka Chrome augšējā labajā stūrī. Tiks parādīts uznirstošais logs ar daudzām opcijām.
- Noklikšķiniet uz "Vairāk rīku" un pēc tam parādītajā uznirstošajā logā atlasiet "Izstrādātāja rīki".
- Izmantojiet Ctrl + Shift + I, ja vēlaties izlaist iepriekš minētās darbības
- Tagad logs ir sadalīts divos ekrānos – mājas lapa pa kreisi un vietnes kods labajā pusē
- Tastatūrā ierakstiet Ctrl + Shift + C. Tas parāda visu informāciju par konkrētu vietnes elementu, kad mēs novietojam peles kursoru uz elementiem.
- Jūs varat atrast elementa krāsu kodu kopā ar citu noderīgu informāciju.
Piemērs
Pieņemsim, ka jūs interesē konkrēti krāsu kodi dažiem elementiem šajā vietnē:
Izstrādātāja rīkus varat izvēlēties, noklikšķinot uz trim punktiem ekrāna stūrī. Nolaižamajā izvēlnē atlasiet Citi rīki, pēc tam atlasiet Izstrādātāja rīki.
Ekrāns tiks vizuāli sadalīts divās lapās. Kreisajā pusē būs redzama vietne, bet labajā pusē - vietnes kods.
Ierakstiet komandu un saīsni “Ctrl + Shift + C” un novietojiet peles kursoru virs vietnes elementiem. Tas parādīs šī elementa krāsu kopā ar citu noderīgu informāciju. Tālāk ir sniegti divi piemēri, kuros mēs atrodam navigācijas joslas krāsu un informācijas paneli zem meklēšanas rīka.
Šeit mēs varam atrast krāsu kodu navigācijas joslas uznirstošajā logā. Krāsas kods ir #333333.
Informācijas paneļa krāsu var atrast kopā ar citām noderīgām detaļām. Krāsa: #333333, Fona krāsa: #5D4A8E. Lai gan sākumā tas varētu šķist nedaudz biedējoši, programmu kļūst daudz vieglāk lietot, nedaudz praktizējot.
2. Eye Dropper Chrome Extension
Eye Dropper ir populārs un plaši izmantots Chrome paplašinājums, kas palīdz atrast noteiktas krāsas jebkurā vietnē vai lietotnē.
Veiciet tālāk norādītās darbības, lai noteiktu konkrētas krāsas vietnē vai lietotnē, izmantojot paplašinājuma rīku Eye Dropper.
- Atveriet jebkuru vietni vai lietotni Chrome tīmekļa pārlūkprogrammā
- Noklikšķiniet uz Eye Dropper paplašinājuma ikonas
- Atlasiet “Izvēlēties krāsu no tīmekļa lapas” un novietojiet peles kursoru uz dažādiem lietotnes vai vietnes elementiem.
Tīmekļa lapas apakšējā labajā stūrī norādīto elementu krāsu kodu varat atrast.
Piemērs
Labi, izmantosim acu pilinātāja pagarināšanas rīku reālā piemērā. Mēs sāksim, atverot vietni un noklikšķinot uz Eye Dropper paplašinājuma ikonas
Novietojot kursoru uz dažādiem vietnes elementiem, ekrāna apakšējā labajā stūrī esošajā sadaļā varat redzēt krāsu kodus.
Novietojot kursoru uz V formas ikonas, loga apakšējā daļā redzu tās krāsu kodu, kā minēts. Šī rīka priekšrocība ir tā, ka varat atrast arī RGB kodu kopā ar elementa hex krāsu kodu. Metode ir elastīga lietošanai tiem, kuri vēlas vienkāršu un ātru veidu, kā iegūt iecienītāko krāsu kodus.