tigtools

Kuvan värinvalitsin

Lataa kuva ja napsauta mitä tahansa kohtaa, niin saat kyseisen pikselin tarkan värin, tai anna työkalun etsiä koko kuvan päävärit.

Toimii selaimessasi Ei rekisteröitymistä

JPEG, PNG, WebP, GIF, AVIF tai BMP, enintään 25 Mt. Kuva pysyy laitteellasi.

Käyttöohje

  1. Valitse kuva tai pudota se ruutuun.
  2. Siirrä osoitin kuvan päälle, niin suurennuslasi näyttää pikselit sen ympärillä.
  3. Valitse väri napsauttamalla tai napauttamalla ja kopioi se HEX-, RGB- tai HSL-muodossa.
  4. Vieritä alas nähdäksesi päävärit, valitse haluamasi määrä ja kopioi ne tai lataa ne CSS-muuttujina.

Näin se toimii

Kuva piirretään selaimesi canvas-elementtiin, ja kohdistimen alla olevan tarkan pikselin väri luetaan siitä. Suurennuslasi näyttää 11 × 11 pikselin alueen suurennettuna, ja valittu pikseli on rajattu. Kuvat, jotka ovat yli 4096 pikseliä leveitä tai korkeita, pienennetään ensin, joten hyvin suurissa valokuvissa yksi valittu pikseli on usean alkuperäisen pikselin keskiarvo.

Vallitsevat värit etsitään k-means-klusteroinnilla: pikselit ryhmitellään ensin 32 768 pieneen väriluokkaan, minkä jälkeen luokat yhdistetään valitsemaasi määrään värejä painottaen kunkin luokan pikselimäärää. Aloituspisteet valitaan deterministisesti, joten sama kuva tuottaa aina saman paletin.

Värit luetaan sRGB-väriavaruudessa, jota selain käyttää näyttämiseen. Jos kuvassa on upotettu laajan väriavaruuden profiili, arvot voivat poiketa hieman kuvaeditorin näyttämistä. Selaimissa, jotka tukevat sitä (työpöydän Chrome ja Edge), Poimi ruudulta -painike käyttää sisäänrakennettua EyeDropper-toimintoa värin ottamiseksi mistä tahansa näytöllä.

Esimerkit

Brändivärin sovittaminen

Lataa kuvakaappaus logosta, napsauta sen pääväriä ja kopioi #1a73e8 tai rgb(26, 115, 232) CSS:ään.

Väripaletti valokuvasta

Rantakuva jaettuna kuuteen väriin antaa hiekan, meren ja taivaan sävyt, joista kullekin näytetään sen peittämä osuus kuvasta suuruusjärjestyksessä suurimmasta pienimpään.

Sävyn tarkistaminen

Suurenna suurennuslasilla, jotta voit valita ohuen viivan tarkan pikselin sen vieressä olevan reunapehmennetyn reunan sijaan.

Usein kysytyt kysymykset

Miksi väri poikkeaa hieman kuvaeditorin näyttämästä?

Selaimet muuntavat kuvat sRGB-muotoon näyttöä varten. Valokuvat, joissa on laajan väriavaruuden profiili (Display P3, Adobe RGB), voivat näyttää arvoja, jotka poikkeavat hieman editorissa, joka säilyttää alkuperäisen profiilin.

Miksi Poimi ruudulta -painike puuttuu?

Se edellyttää EyeDropper API:a, jota vain osa selaimista tukee, tällä hetkellä työpöydän Chrome ja Edge. Ladatusta kuvasta poimiminen toimii kaikissa.

Miten päävärit valitaan?

Kaikkien pikselien k-means-klusteroinnilla, painotettuna kunkin värin yleisyydellä. Pienet mutta elävät yksityiskohdat voivat sulautua viereiseen suurempaan väriin; lisää värien määrää, niin ne erottuvat.

Ladataanko kuva palvelimelle?

Ei. Tämä sivu purkaa ja analysoi sen selaimessasi, eikä se koskaan poistu laitteeltasi.

Tietosuoja

Kuva käsitellään kokonaan selaimessasi. Sitä ei ladata palvelimelle, eikä poimittuja värejä lähetetä tai tallenneta.