Yksinkertainen värinvalitsin

Ilmainen värinvalitsin Chromelle

Poimi värinvalitsimella väri miltä tahansa sivulta. Saat #E8553D

Yksinkertainen värinvalitsin on ilmainen pipetti Chromelle. Paina sen painiketta tai Alt+P, tähtää suurennuslasilla mihin tahansa pikseliin ja napsauta: HEX-, RGB- tai HSL-koodi on heti leikepöydälläsi. 50 viimeisintä väriäsi odottaa ponnahdusikkunassa.

Lisää Chromeen — ilmaiseksi

453 käyttäjää Chrome Web Store -kaupassa

Toimii myös selaimissa Edge, Brave, Opera ja muissa Chromium-pohjaisissa selaimissa.

Neliönmuotoinen suurennuslasi verkkosivun julisteen päällä rajaa yhden pikselin ja näyttää sen HEX-, RGB- ja HSL-koodit. Vieressä Yksinkertainen värinvalitsin näyttää ponnahdusikkunassa koodin #E8553D ja värihistorian

Yhdellä silmäyksellä

Mitä se tekee
Pipetillä varustettu värinvalitsin: tähtää suurennuslasilla mihin tahansa verkkosivun pikseliin ja napsauta. Sen HEX-, RGB- tai HSL-koodi kopioidaan.
Kenelle se sopii
Verkkokehittäjille ja suunnittelijoille, jotka sovittavat värejä selaimessa avoinna olevista sivustoista, malleista ja kuvakaappauksista, sekä kaikille värikoodia tarvitseville.
Hinta
Ilmainen. Ei tiliä eikä maksullista versiota.
Tiedot
Historiasi ja oletusmuotosi säilyvät laajennuksen paikallisessa tallennustilassa laitteellasi. Ei analytiikkaa eikä verkkopyyntöjä.
Missä toimii
Tietokoneella Chromessa ja muissa Chromium-selaimissa, joihin voi asentaa laajennuksia Chrome Web Store -kaupasta. Ei toimi selaimen omilla sivuilla, kuten uudella välilehdellä, asetuksissa tai Chrome Web Store -kaupassa.
Rajoitukset
Poimii värin välilehden näkyvästä osasta aloitushetkellä otetun kuvakaappauksen avulla. Ei CMYK- tai Pantone-tukea, kontrastin tarkistusta eikä värin poimintaa selaimen ulkopuolelta.
Versio
2.7.0, päivitetty 23. lokakuuta 2026

Kolme vaihetta, yksi napsautus

  1. 1

    Käynnistä värinvalitsin

    Napsauta työkalupalkin kuvaketta ja paina Valitse väri, tai paina Alt+P millä tahansa sivulla.

  2. 2

    Tähtää suurennuslasilla

    Neliönmuotoinen suurennuslasi suurentaa osoittimen ympäristön ja rajaa tarkan pikselin. Sen alla oleva värimalli näyttää HEX-, RGB- ja HSL-koodit reaaliajassa.

  3. 3

    Napsauta ja liitä

    Koodi kopioidaan oletusmuodossasi, ja lyhyt ilmoitus vahvistaa sen. Liitä se CSS-koodiin, Figma-suunnitelmaan tai viestiin.

Kuka sitä käyttää

CSS

Käyttöliittymien kehitys

Poimi tarkat arvot suoraan sivustolta CSS- tai SCSS-koodiin tai Tailwind-asetuksiin avaamatta DevTools-työkaluja.

HEX

Suunnittelun ja brändin tarkistus

Poimi paletti käyttöliittymästä, mallista tai viitteestä ja tarkista, että sivu käyttää oikeaa brändiväriä.

HSL

Värien säätäminen

Poimi HSL, kun haluat säätää vaaleutta ja kylläisyyttä käsin, tai RGB, kun koodi tarvitsee numeroarvoja.

Mitä se tekee

  • rajattu pikseli

    Suurennuslasi suurentaa 11 × 11 pikseliä osoittimen ympäriltä, ja tähtäin rajaa poimittavan pikselin. Osu yhden pikselin levyiseen reunaan tai yhteen liukuvärin sävyyn.

  • muotoa

    HEX, kuten #2A6FDB; RGB, kuten rgb(42, 111, 219); HSL, kuten hsl(217, 71%, 51%). Valitse oletusmuoto kerran ponnahdusikkunassa.

  • väriä historiassa

    Jokainen poiminta siirtyy 50 viimeisimmän värisi ruudukon alkuun ilman toistoja. Napsauta värimallia nähdäksesi ja kopioidaksesi kaikki kolme koodia.

  • Alt+P-pikanäppäin

    Aloita poiminta avaamatta ponnahdusikkunaa. Sen näppäinkuvake avaa Chromen pikanäppäinasetukset, jos haluat vaihtaa näppäintä.

  • verkkopyyntöä

    Kaikki toimii selaimessasi. Ei tiliä, analytiikkaa eikä telemetriaa.

  • Vaalea ja tumma

    Ponnahdusikkuna ja suurennuslasi seuraavat järjestelmäsi teemaa. Neutraalit harmaasävyt eivät vääristä arvioimiasi värejä.

Näin saat minkä tahansa verkkosivun kohteen värikoodin

Chromen oma pipetti on DevTools-työkalujen sisällä: avaa tyylipaneeli, etsi väriominaisuus, napsauta sen värimallia ja sitten pipettiä. Se toimii, mutta sen avaaminen vaatii useita vaiheita. Valittu arvo myös korvaa kyseisen ominaisuuden sivun CSS-koodissa sen sijaan, että se kopioituisi leikepöydälle.

Yksinkertainen värinvalitsin tuo pipetin yhden napsautuksen tai pikanäppäimen päähän. Kun aloitat, se ottaa kuvakaappauksen välilehden näkyvästä osasta ja avaa sen päälle neliönmuotoisen suurennuslasin. Näet tarkan pikselin keskiarvon sijaan. Yksi napsautus kopioi koodin, ja ponnahdusikkuna säilyttää sen 50 viimeisimmän värisi joukossa kaikissa kolmessa muodossa.

Vieritä tarvitsemaasi kohtaan ennen aloittamista: suurennuslasi lukee värit tuosta kuvakaappauksesta. Selaimen omat sivut, kuten uusi välilehti, asetukset ja Chrome Web Store, on suljettu kaikilta laajennuksilta.

Yksityisyys osana suunnittelua

  • Ei verkkopyyntöjä

    Laajennus ei koskaan ota yhteyttä palvelimeen. Ei analytiikkaa eikä telemetriaa.

  • Pysyy laitteellasi

    Historiasi ja oletusmuotosi säilyvät laajennuksen paikallisessa tallennustilassa.

  • Neljä käyttöoikeutta

    Aktiivinen välilehti kuvakaappausta varten vain poiminnan alussa; komentosarjojen suoritus suurennuslasin näyttämiseen; tallennustila historialle ja muodolle; leikepöydälle kirjoittaminen koodin kopioimiseen.

DevTools-pipetti ja Yksinkertainen värinvalitsin

DevTools-pipetti ja Yksinkertainen värinvalitsinDevTools-pipettiYksinkertainen värinvalitsin
AloittaminenAvaa DevTools, etsi väri tyyleistä, napsauta värimallia ja sitten pipettiäTyökalupalkin painike tai Alt+P
Tuloksen kohdeAvaamasi CSS-ominaisuus; kopioit sen itseLeikepöytäsi napsautuksella
VärimuodotHEX, RGB, HSL ja muitaHEX, RGB ja HSL
Aiemmin poimitut väritEi säilytetä50 viimeisintä väriäsi, valmiina kopioitaviksi uudelleen
HintaSisältyy ChromeenIlmainen

Kysymyksiä

Miten saan värikoodin verkkosivulta?

Asenna Yksinkertainen värinvalitsin, paina sivulla Alt+P, tähtää suurennuslasilla väriin ja napsauta. HEX-koodi tai halutessasi RGB tai HSL kopioidaan leikepöydällesi.

Miten poimin värinvalitsimella värin verkkosivun kuvasta?

Samalla tavalla: käynnistä värinvalitsin ja napsauta haluamaasi pikseliä kuvassa. Suurennuslasin avulla voit poimia tarkasti yhden pikselin.

Voinko kopioida HSL- tai RGB-koodin HEX-koodin sijaan?

Kyllä. Valitse ponnahdusikkunassa oletusmuoto: HEX, RGB tai HSL. Ikkuna näyttää myös historian jokaisen värin kaikissa kolmessa muodossa, kullakin on oma kopiointipainike.

Mistä löydän aiemmin poimimani värit?

Avaa ponnahdusikkuna: 50 viimeisintä väriäsi ovat siellä värimalleina, uusimmat ensin. Napsauta yhtä nähdäksesi ja kopioidaksesi sen koodit, tai tyhjennä historia.

Miten vaihdan Alt+P-pikanäppäimen?

Napsauta ponnahdusikkunan pikanäppäinkuvaketta. Se avaa Chromen pikanäppäinsivun, jolla voit määrittää toisen näppäimen.

Miksi pipetti ei toimi joillakin sivuilla?

Chrome sulkee omat sivunsa, kuten uuden välilehden, asetukset ja Chrome Web Store -kaupan, kaikilta laajennuksilta. Värinvalitsin lukee vain välilehden näkyvää osaa, joten vieritä ensin värin kohdalle.

Voiko sillä poimia värejä selaimen ulkopuolelta?

Ei. Se poimii värit vain nykyiseltä selainvälilehdeltä. Se ei myöskään muunna värejä CMYK- tai Pantone-muotoon eikä tarkista kontrastia.

Onko se ilmainen? Kerääkö se tietoja?

Se on ilmainen eikä tee verkkopyyntöjä. Historiasi ja oletusmuotosi pysyvät laitteellasi.

Lisää ilmaisia laajennuksia tekijältä PYROCTAL

Tähtää. Napsauta. Liitä.

Lisää Chromeen — ilmaiseksi