Color Picker tarjoaa pikselintarkan pipettityökalun värien poimimiseen mistä tahansa verkkosivun elementistä — tekstistä, taustoista, kuvista, liukuväreistä tai mistä tahansa näkyvästä pikselistä. Saat tarkan väriarvon samanaikaisesti HEX-, RGB- ja HSL-muodossa suurennetun pikseliesikatselun avulla täsmällistä kohdistamista varten. Aiemmin poimitut värit tallentuvat historiapalkkiin nopeaa uudelleenkäyttöä varten.
Tarkkoja väriarvoja verkkosivulta on usein tarpeen poimia — brändivärin sovittamiseksi, suunnittelun referenssinä tai kilpailijan sivustolla käytetyn sävyn tarkistamiseksi. Selaimen DevTools näyttää värit Tyylit-paneelissa, mutta vain elementeille, joilla on eksplisiittinen CSS-väriominaisuus — ei kuvissa, liukuväreissä tai perityissä väreissä. Color Pickerin pipetti toimii pikselitasolla — se lukee kursorisi alla olevan pikselin todellisen renderöidyn värin riippumatta siitä, miten väri on muodostunut. Klikkaa sankariokuvan sinistä taivasta, liukuvärin keskikohtaa tai puoliläpinäkyvää kerrosta ja saat tarkan yhdistelmäväriarvon. Suurennettu esikatseluympyrä näyttää lähennöksen ympäröivistä pikseleistä, jotta voit kohdistaa haluamasi pikselin täsmällisesti. Kaikki kolme muotoa (HEX, RGB, HSL) näytetään samanaikaisesti — klikkaa mitä tahansa muotoa kopioidaksesi. Viimeisimmät poimintasi tallentuvat alareunan värihistoriapalkkiin, joten voit helposti palata aiemmin poimittuun väriin.
Suurennettu pyöreä esikatselu näyttää lähennöksen kursorin ympärillä olevista pikseleistä, tähtäinristikolla tarkkaa pikselivalintaa varten. Poimi värejä tekstistä, taustoista, kuvista, liukuväreistä, SVG:istä tai mistä tahansa sivun näkyvästä pikselistä.
Jokainen poimittu väri näytetään kerralla kaikissa kolmessa muodossa: HEX (#7c3aed), RGB (rgb(124, 58, 237)) ja HSL (hsl(262, 83%, 58%)). Ei vaihtamista tai muuntamista — kaikki muodot ovat heti käytettävissä.
Klikkaa mitä tahansa muotoriviä (HEX, RGB tai HSL) kopioidaksesi kyseisen arvon leikepöydälle välittömästi. Lyhyt "Kopioitu!"-animaatio vahvistaa toiminnon. Liitä suoraan CSS:ään, suunnittelutyökaluun tai värimäärittelyyn.
Viimeksi poimitut värit tallentuvat visuaaliseen historiapalkkiin, joka näyttää värinäytteet. Klikkaa mitä tahansa näytettä valitaksesi kyseisen värin uudelleen ja nähdäksesi sen arvot. Historia säilyy istunnon ajan — poimi värejä useammalta sivulta.
Poimittu väri näytetään suurena näytteenä muotoarvojen yläpuolella, jolloin värin näkeminen ja tarkistaminen on helppoa. Näyte on riittävän suuri paljastamaan hienovaraiset sävyerot, jotka saattaisivat näyttää identtisiltä pienemmässä koossa.
Poimii värejä mistä tahansa näkyvästä pikselistä: CSS-värit, CSS-liukuvärit, kuvat (PNG, JPG, SVG), canvas-elementit, videokuvat, puoliläpinäkyvät kerrokset (poimii yhdistelmävärin) ja jopa iframet. Jos sen näkee, siitä voi poimia värin.
Poimi tarkka brändiväri yrityksen verkkosivustolta varmistaaksesi, että suunnittelusi tai sisältösi käyttää oikeaa sävyä. Saat tarkan HEX-arvon silmämäärän arvailtavaksi tai brändiohjeiston läpikäymisen sijaan.
Poimi värejä suoraan sankariokuvista, tuotevalokuvista tai kuvituksista. Erota valokuvan hallitseva väri käytettäväksi täydentävänä taustana suunnittelussasi.
Suunnitteluspesifikaatio määrittelee painikkeen väriksi #7c3aed. Poimi väri toteutetusta painikkeesta varmistaaksesi, että se täsmää. Työkalu havaitsee hienovaraiset värierot, jotka ovat paljaalle silmälle näkymättömiä.
Selaa suunnitteluinspiraatiosivustoja ja poimi silmääsi miellyttäviä värejä. Historiapalkki rakentaa paletin istunnon aikana poimituista väreistä — käytä sitä lähtökohtana omalle värivalikoimallesi.
Poimi värejä eri kohdista CSS-liukuväriä nähdäksesi tarkan värin kullakin kohdalla. Hyödyllinen liukuvärien toistamiseen tai liukuväripisteiden sekoittumisen ymmärtämiseen.
Avaa DevSuite Pro -kelluva telakka ja klikkaa Color Picker -kuvaketta. Kursori muuttuu pipetiksi, jossa on suurennettu esikatseluympyrä.
Liiku kursorilla sivun yli. Suurennettu esikatselu näyttää lähennöksen kursorin ympärillä olevista pikseleistä, ja tähtäinristikko osoittaa tarkan kohdepikselin.
Klikkaa mitä tahansa kohtaa sivulla poimiaksesi kyseisen pikselin värin. Värinäyte sekä HEX-, RGB- ja HSL-arvot päivittyvät välittömästi.
Klikkaa HEX-, RGB- tai HSL-riviä kopioidaksesi kyseisen arvon leikepöydälle. Lyhyt "Kopioitu!"-vahvistus ilmestyy hetkeksi.
Jatka klikkaamista poimiaksesi lisää värejä. Jokainen poiminta lisätään historiapalkkiin. Klikkaa mitä tahansa historianäytettä palauttaaksesi kyseisen värin.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
