Tietyn värin tunnistaminen sovelluksesta tai verkkosivustosta

Kuvittele, että selaat kuvia ja löydät täydellisen värin – juuri sen sävyn, jota tarvitset seuraavaan suunnitteluprojektiisi. Internetissä on joitain mahtavia työkaluja, joiden avulla voit tunnistaa tietyt värit missä tahansa sovelluksessa tai verkkosivustossa. Katsotaanpa joitain niistä parhaista vaihtoehdoista.

1. Kehittäjätyökalujen käyttäminen Chrome-selaimessa

Yksi vaihtoehto, jota voit kokeilla, on Chrome-kehittäjätyökalu. Chromessa on paljon hyödyllisiä ominaisuuksia kehittäjille, mikä helpottaa tehtävien suorittamista. Seuraavien vaiheiden avulla voit tunnistaa tietyt värit missä tahansa sovelluksessa tai verkkosivustossa.

• Avaa verkkosivusto, jonka värin haluat tunnistaa Chrome-selaimessa
• Napsauta Chromen oikeassa yläkulmassa olevaa kolmen pisteen kuvaketta. Näkyviin tulee ponnahdusikkuna, jossa on joukko vaihtoehtoja.
• Napsauta Lisää työkaluja ja valitse sitten avautuvasta ponnahdusikkunasta Kehittäjätyökalut.
• Käytä Ctrl + Shift + I, jos haluat ohittaa yllä olevat vaiheet
• Nyt ikkuna jakaantuu kahteen ruutuun – verkkosivun vasemmalle puolelle ja verkkosivuston koodiin oikealle
• Kirjoita näppäimistöllä Ctrl + Shift + C. Tämä näyttää kaikki tietyn verkkosivuston elementin tiedot, kun viemme hiiren osoittimen elementtien päälle.
• Löydät elementin värikoodin ja muita hyödyllisiä tietoja.

Esimerkki

Oletetaan, että olet kiinnostunut joidenkin seuraavan verkkosivuston elementtien erityisistä värikoodeista:

Voit valita kehittäjätyökalut napsauttamalla kolmea pistettä näytön kulmassa. Valitse avattavasta valikosta Lisää työkaluja ja sitten Kehittäjätyökalut.

Näyttö jaetaan visuaalisesti kahdelle sivulle. Näet verkkosivun vasemmalla ja sivuston koodin oikealla.

Kirjoita komento ja pikanäppäin "Ctrl + Shift + C" ja vie hiiren osoitin verkkosivuston elementtien päälle. Tämä näyttää kyseisen elementin värin sekä muita hyödyllisiä tietoja. Alla on kaksi esimerkkiä, joista löydämme hakutyökalun alapuolelta navigointipalkin värin ja kojelaudan.

Täältä löydät värikoodin navigointipalkin ponnahdusikkunasta. Värikoodi on #333333.

Kojelaudan väri löytyy muiden hyödyllisten yksityiskohtien ohella. Väri: #333333, Taustaväri: #5D4A8E. Vaikka se saattaa aluksi näyttää hieman pelottavalta, ohjelmasta tulee paljon helpompi käyttää hieman harjoittelemalla.

2. Eye Dripper Chrome Extension

Eye Dropper on suosittu ja laajalti käytetty Chrome-laajennus, joka auttaa sinua löytämään tietyt värit miltä tahansa verkkosivustolta tai sovelluksesta.

Noudata alla olevia ohjeita tunnistaaksesi tietyt värit verkkosivustolla tai sovelluksessa käyttämällä Eye Dropper -laajennustyökalua.

• Avaa mikä tahansa verkkosivusto tai sovellus Chrome-selaimella
• Napsauta Eye Dropper -laajennuskuvaketta
• Valitse Valitse väri verkkosivulta ja vie hiiren osoitin sovelluksen tai verkkosivuston eri elementtien päälle.

Löydät elementtien värikoodit verkkosivun oikeasta alakulmasta.

Esimerkki

Okei, käytetään pipetin laajennustyökalua tosielämän esimerkissä. Aloitamme avaamalla verkkosivuston ja napsauttamalla Eye Dropper -laajennuskuvaketta

Kun viet hiiren osoittimen verkkosivuston eri elementtien päälle, näet värikoodit näkyvät osiossa näytön oikeassa alakulmassa.

Kun pidän kohdistinta V-muotoisen kuvakkeen päällä, näen sen värikoodin ikkunan alaosassa, kuten mainittiin. Tämän työkalun etuna on, että löydät myös RGB-koodin elementin hex-värikoodin ohella. Menetelmä on joustava käytettäväksi niille, jotka haluavat yksinkertaisen ja nopean tavan napata koodit suosikkiväreilleen.