CodeKitHubMikä tämä työkalu on?
Värivalitsin muuttaa visuaalisen valinnan — tämän sävyn sinistä, tuon tarkan pikselin logossa — numeerisiksi koodeiksi, joita ohjelmistot ymmärtävät. Samalla värillä on useita vastaavia merkintätapoja: HEX (#3b82f6) hallitsee CSS:ää ja suunnittelun luovutuksia, RGB (59, 130, 246) vastaa sitä, miten näytöt ja koodi esittävät väriä, ja HSL (217°, 91 %, 60 %) kuvaa sävyä, kylläisyyttä ja valoisuutta tavalla, jota ihminen pystyy hahmottamaan.
Työkalun toinen puolisko on kuvapipetti. Lataa kuvakaappaus, logo tai valokuva ja napsauta mitä tahansa pistettä poimiaksesi kursorin alla olevan värin — vakiotapa vastata kysymykseen 'mikä tämä väri tarkalleen on?'. Kun selain tukee EyeDropper-rajapintaa, käytetään natiivia suurentavaa luuppia; muissa selaimissa työkalu lukee pikseliarvon kuvan canvas-kopiosta. Kummassakin tapauksessa käsittely on paikallista: kuvaa ei koskaan ladata palvelimelle.
Miksi käyttää sitä?
- Kolme muotoa kerralla: jokainen poimittu väri näytetään HEX-, RGB- ja HSL-muodossa samanaikaisesti, kukin omalla yhden napsautuksen kopiointipainikkeella — ei erillistä muunnosvaihetta.
- Poimi kuvasta: lataa mikä tahansa kuva ja napsauta poimiaksesi tarkan pikselivärin — ihanteellinen brändivärien poimimiseen logosta tai kuvakaappauksessa nähdyn värin täsmäyttämiseen.
- Käyttää selaimen natiivia EyeDropper-toimintoa suurennuslasilla, kun se on saatavilla, ja siirtyy muualla tarkkaan canvas-pikselinlukuun.
- Live-esikatselunäyte näyttää nykyisen värin silmäyksellä, joten voit varmistaa poiminnan ennen kopiointia.
- Ilmainen, välitön ja täysin paikallinen: värit lasketaan ja kuvat luetaan selaimessasi — mitään ei ladata, tallenneta tai loggata.
Käyttöohje
- Valitse väri värikentällä, tai liitä/muokkaa arvoa suoraan.
- Poimiaksesi värin kuvasta, lataa kuva ja napsauta pistettä, jonka väri haluat.
- Lue HEX-, RGB- ja HSL-arvot, näytettynä yhdessä live-esikatselunäytteen kanssa.
- Napsauta tarvitsemasi muodon vieressä olevaa kopiointipainiketta — HEX CSS:ää varten, RGB tai HSL koodia varten.
Esimerkki
Syöte
Ladatun logon sinisen alueen napsauttaminenTuloste
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Kaikki kolme riviä kuvaavat samaa väriä. Käytä HEX:iä tyylitiedostoissa ja suunnittelutyökaluissa, RGB:tä missä koodi odottaa kanava-arvoja, ja HSL:ää, kun haluat johtaa vaaleampia tai tummempia muunnelmia muuttamalla vain viimeistä numeroa.
Mikä väriformaatti mihinkin työhön
Moderni CSS hyväksyy kaikki kolme muotoa aina, kun väri sallitaan, joten valinta on työnkulusta kiinni, ei yhteensopivuudesta. Tiimit standardoivat tyypillisesti HEX:in suunnittelutokeneihin ja käyttävät sitten HSL:ää muunnelmia tutkiessaan — vaihda valoisuutta 10–15 pistettä saadaksesi käyttökelpoisen hover-tilan sävyä siirtämättä.
| Muoto | Esimerkki | Paras käyttö |
|---|---|---|
| HEX | #3b82f6 | CSS, suunnittelutyökalut, värien jakaminen chatissa ja spekseissä |
| RGB | rgb(59, 130, 246) | Koodi joka käsittelee kanavia, canvas-piirto, rgba()-läpinäkyvyys |
| HSL | hsl(217, 91%, 60%) | Vaaleampien/tummempien/hover-muunnelmien tekeminen, paletin rakentaminen |
Poimitusta väristä valmiiksi CSS:ksi
Värin poimiminen on yleensä tyylitystehtävän ensimmäinen vaihe. Jos tarvitset saman värin muissa merkinnöissä — CMYK painatukseen tai OKLCH-arvo laajan väriavaruuden CSS:ää varten — Värimuunnin jatkaa siitä, mihin tämä valitsin päättyy.
Poimittu väri menee usein suoraan visuaaliseen tehosteeseen: Box Shadow -generaattori ottaa HEX-arvon realistisia varjoja varten, ja Border Radius -generaattorilla rakennetut pyöristetyt kortit täydentävät ilmeen.
→ Värimuunnin · Box Shadow -generaattori · Border Radius -generaattori
Usein kysytyt kysymykset
Mitä eroa on HEX:llä, RGB:llä ja HSL:llä?
Ne ovat kolme merkintätapaa samalle värimallille. HEX pakkaa punaisen, vihreän ja sinisen kanavan kuuteen heksadesimaalinumeroon (#3b82f6) ja on yleisin muoto CSS:ssä ja suunnittelutyökaluissa. RGB listaa samat kolme kanavaa desimaalilukuina väliltä 0–255. HSL ilmaisee värin uudelleen sävynä (0–360°), kylläisyytenä ja valoisuutena — paljon intuitiivisemmin, kun haluat 'saman värin, vain vaaleampana'. Muuntaminen niiden välillä ei koskaan muuta väriä.
Miten värin poimiminen kuvasta toimii?
Ladattu kuva piirretään näkymättömälle canvasille selaimessasi. Kun napsautat, työkalu lukee kyseisessä pisteessä olevan pikselin punaisen, vihreän ja sinisen arvon ja muuntaa ne HEX-, RGB- ja HSL-muotoon. Selaimissa, jotka tukevat EyeDropper-rajapintaa (Chrome ja Edge työpöydällä), avautuu sen sijaan natiivi suurentava luuppi, jotta voit poimia pikselintarkasti mistä tahansa ruudulta.
Ladataanko kuvani jonnekin?
Ei. Kuva avataan suoraan selaimessasi ja luetaan paikallisesti canvasista; mitään tiedostoa tai väritietoa ei koskaan lähetetä tai tallenneta. Voit ladata sivun, mennä offline-tilaan, ja sekä valitsin että kuvapipetti jatkavat toimintaansa — mikä tekee siitä turvallisen julkaisemattomille suunnitelmille ja sisäisille kuvakaappauksille.
Miksi poimittu väri ei täysin täsmää ruudulla näkemääni?
Kaksi yleistä syytä. Reunanpehmennys: tekstin ja muotojen reunapikselit sekoittuvat taustaan, joten yhden pikselin ohi napsauttaminen antaa välivärin — poimi sen sijaan alueen kiinteästä keskikohdasta. Värienhallinta: JPG/PNG-tiedostot, joissa on epätavallisia väriprofiileja, voivat renderöityä hieman eri tavoin eri näytöillä; työkalu ilmoittaa pikseliarvon sellaisena kuin se on tallennettu tiedostoon, mikä on juuri se arvo, jota suunnittelutyössä tarvitset.
Minkä muodon pitäisi kopioida CSS:ää varten?
HEX on turvallisin oletus — jokainen selain ja työkalu hyväksyy sen. Käytä HSL:ää, kun aiot luoda hover- tai tumman tilan muunnelmia, koska vain valoisuuskomponentin säätäminen pitää sävyn ja kylläisyyden johdonmukaisina. RGB on hyödyllisin, kun koodi rakentaa värejä numeerisista kanavista, tai kun lisätään läpinäkyvyyttä, jolloin rgba(59, 130, 246, 0.5) on selkeämpi luettava kuin kahdeksannumeroinen HEX.