Pikselintarkka värien poiminta digitaalisista kuvista
Digitaalisessa suunnittelussa ja ohjelmistokehityksessä tarkkojen väriarvojen määrittäminen on keskeinen osa työnkulkua. Kuvan värivalitsin on työkalu, jonka avulla voit ladata kuvan suoraan laitteeltasi ja analysoida sen yksittäisiä pikseleitä. Työkalu tarjoaa suurennetun näkymän, joka auttaa kohdistamaan valinnan tarkasti haluttuun kohtaan. Kun pikseli valitaan, sen väriarvot esitetään välittömästi useassa eri muodossa, ja ne voidaan kopioida suoraan leikepöydälle.
Kun kuva ladataan työkaluun, se näyttää välittömästi kuvan keskimmäisen pikselin väriarvot ja koordinaatit. Liikuttamalla osoitinta kuvan päällä voit analysoida värejä pikseli pikseliltä. Klikkaamalla kuvaa voit tallentaa senhetkisen värin talteen. Työkalu tukee myös näppäimistönavigointia: voit siirtää tähtäintä kuvan päällä nuolinäppäimillä. Painamalla Shift-näppäintä samanaikaisesti nuolinäppäinten kanssa tähtäin liikkuu 10 pikselin askeleilla. Voit tallentaa valitun värin painamalla Enter- tai Space-näppäintä.
Tuetut tiedostomuodot ja kuvien käsittely
Työkalu käsittelee kuvatiedostoja suoraan selaimessa. Voit valita analysoitavaksi yhden kuvatiedoston kerrallaan. Työkalu tukee seuraavia tiedostomuotoja ja MIME-tyyppejä:
- PNG (
image/png) - JPG / JPEG (
image/jpeg) - WebP (
image/webp) - GIF (
image/gif) - AVIF (
image/avif) - HEIC / HEIF (
image/heic,image/heif)
Jos yrität ladata tiedostoa, jota ei tueta, työkalu näyttää virheilmoituksen: "Tiedostotyyppiä ei tueta. Kokeile PNG-, JPG-, WebP-, GIF-, AVIF- tai HEIC-kuvaa." Jos kuva on vioittunut tai sitä ei voida avata, näytetään ilmoitus: "Kuvaa ei voitu avata. Se voi olla vioittunut tai sen muotoa ei tueta."
Suurikokoisten kuvien suorituskyvyn ja käsittelyn varmistamiseksi kuvat, joiden pisin sivu ylittää 4096 pikseliä, skaalataan automaattisesti pienemmiksi. "Aloita alusta" -painike tyhjentää ladatun kuvan, tyhjentää tallennettujen värien historian ja palauttaa työkalun alkutilaan.
Värijärjestelmät: HEX, RGB ja HSL
Työkalu kääntää jokaisen poimitun pikselin väriarvon kolmeen käytetyimpään digitaaliseen värijärjestelmään:
- HEX: Heksadesimaalikoodi on yleisin tapa määritellä värejä verkkosivuilla ja CSS-tyyleissä. Se esittää punaisen, vihreän ja sinisen määrän kuusimerkkisenä koodina (esimerkiksi #FF5733).
- RGB: Punaisen (Red), vihreän (Green) ja sinisen (Blue) valon yhdistelmään perustuva malli. Arvot ilmoitetaan välillä 0–255. Tämä malli vastaa suoraan sitä, miten näytöt tuottavat värejä.
- HSL: Sävy (Hue), kylläisyys (Saturation) ja valoisuus (Lightness) kuvaavat väriä ihmiselle luonnollisemmalla tavalla. Sävy ilmoitetaan asteina (0°–360°), kun taas kylläisyys ja valoisuus ilmoitetaan prosentteina.
Klikkaamalla mitä tahansa näistä näytetyistä arvoista (HEX, RGB tai HSL) arvo kopioituu suoraan leikepöydälle. Jos selain estää pääsyn leikepöydälle, työkalu näyttää virheilmoituksen: "Kopiointi epäonnistui – selaimesi esti pääsyn leikepöydälle."
Pakkauksen, reunojen pehmennyksen ja läpinäkyvyyden vaikutus väreihin
Kun poimit värejä kuvasta, on tärkeää ymmärtää, että työkalu lukee kuvaan tallennetun tarkan pikseliarvon. Tämä arvo voi poiketa siitä, miltä väri näyttää silmämääräisesti tarkasteltuna. Tähän vaikuttavat erityisesti seuraavat tekijät:
- Kuvan pakkaus: Häviölliset pakkausmenetelmät, kuten JPEG-formaatissa käytettävät algoritmit, luovat kuvaan pakkausartefakteja. Tämä tarkoittaa, että tasaiselta näyttävä väripinta voi todellisuudessa koostua useista hieman erisävyisistä pikseleistä.
- Reunojen pehmennys (Anti-aliasing): Kuvakaappauksissa ja grafiikassa käytetään usein reunojen pehmennystä, jotta vinot viivat ja tekstin reunat näyttäisivät tasaisemmilta. Tämä luo siirtymäalueille välimuotoisia pikseleitä, jotka poikkeavat alkuperäisistä pääväreistä.
- Läpinäkyvyys (Alfa-kanava): Jos pikseli on osittain läpinäkyvä, työkalu lukee sen oman väriarvon ottamatta huomioon sitä, mitä pikselin takana tai taustalla on. Jos pikselissä on läpinäkyvyyttä, työkalu näyttää ilmoituksen muodossa: "Alfa
{n}% – tämä pikseli on osittain läpinäkyvä."
Värihistorian hallinta
Työkalu sisältää tallennustoiminnon, jonka avulla voit kerätä väripalettia useista eri kohdista kuvaa.
- Kun klikkaat kuvaa, valittu väri tallentuu historiaan. Tällöin näytetään ilmoitus: "Tallennettu
{hex}suosikkeihisi." - Värihistoria voi tallentaa enintään 12 väriä kerrallaan.
- Jos kaksi väriä sisältävät samat RGB-arvot mutta eri alfa-arvot (läpinäkyvyys), ne tallennetaan historiaan erillisinä merkintöinä.
- Jos historiassa ei ole vielä tallennettuja värejä, sen kohdalla näkyy teksti: "Tallentamasi värit näkyvät tässä – klikkaa väriruutua ladataksesi sen uudelleen." Klikkaamalla mitä tahansa tallennettua väriruutua voit palauttaa kyseisen värin tiedot tarkasteltavaksi.
Tietosuoja ja paikallinen käsittely
Tämän työkalun toiminta perustuu kokonaan paikalliseen käsittelyyn. Kun valitset kuvan laitteeltasi, kuva luetaan suoraan laitteeltasi eikä se koskaan lähde selaimestasi. Mitään tietoja tai kuvatiedostoja ei ladata BroBroGo-palvelimelle. Kaikki värianalyysi, pikselien poiminta ja koordinaattien laskenta tapahtuvat suoraan selaimesi suoritusympäristössä.
Usein kysytyt kysymykset
Miten poimin värin kuvasta?
Liikuta osoitinta kuvan päällä, niin paneeli näyttää sen alla olevan värin. Suurennuslasi auttaa kohdistamaan tarkasti haluamaasi pikseliin. Klikkaa tallentaaksesi värin suosikkeihisi. Voit myös aktivoida kuvan ja liikuttaa tähtäintä nuolinäppäimillä ja painaa Enter.
Mitä värimuotoja voin käyttää?
Jokainen poimimasi pikseli näytetään samanaikaisesti HEX-, RGB- ja HSL-muodossa. Klikkaa mitä tahansa arvoa kopioidaksesi sen suoraan CSS-koodiin tai suunnittelutyökaluun.
Miksi poimittu väri ei aina vastaa odotuksiani?
Saat tarkan pikseliarvon, joka on tallennettu kuvaan. Jos kyseessä on JPEG tai kuvakaappaus, pakkaus ja reunojen pehmennys (anti-aliasing) ovat saattaneet jo muuttaa viereisten pikselien arvoja hieman. Puoliläpinäkyvä pikseli luetaan sellaisenaan, ilman sen takana olevaa taustaa.