Värinvalitsin kuvasta — Hanki HEX- ja RGB-värikoodit

Lataa mikä tahansa JPG, PNG, WebP tai GIF ja napsauta mitä tahansa näytetyn kuvan kohtaa – kohdistimen alla oleva tarkka pikseli otetaan näytteistä ja näytetään HEX-, RGB- ja HSL-muodossa yhdellä napsautuskopiolla kullekin muodolle. Hyödyllinen brändin värin sovittamiseen, mallikappaleen ottamisen valokuvasta tai korostussävyjen poimimiseen suunnittelumallista.

Napsauta mitä tahansa pikseliä, niin tämä värivalitsin näyttää sen HEX-värikoodin (esimerkiksi #FF6B35) RGB- ja HSL-arvojen rinnalla — samat HTML/CSS-värikoodit, jotka liität suoraan tyylitiedostoon, suunnittelutokeniin tai HTML-attribuuttiin. Napsauta Kopioi saadaksesi heksakoodin yhdellä napsautuksella.

Kuva pienennetään 320 pikseliin pidemmältä sivultaan, minkä jälkeen jokainen pikseli lajitellaan koreihin kanavakohtaisten neljän ylimmän bitin perusteella. Eniten täytetyt korit keskiarvoistetaan takaisin täydeksi 8-bittiseksi väriksi, lajitellaan yleisyyden mukaan ja palautetaan paletiksesi. Tulos on tyypillisesti 5–24 hallitsevaa väriä, jotka tiivistävät kuvan visuaalisesti.

Kyllä. Latauspainikkeet tuottavat kaksi muotoa: CSS-muuttujalohkon, joka on valmis liitettäväksi :root-valitsimeen (--color-1, --color-2…), ja JSON-tiedoston, jossa on heksa-, RGB-komponentit ja painoprosentti jokaiselle värille. Molemmat muodot integroituvat siististi design-tokeneihin, Tailwind-asetuksiin ja palettikirjastoihin.

Ei — värien poiminta ja palettien luonti tapahtuvat kokonaan selaimessasi HTML canvas API:n avulla. Kuva pysyy laitteellasi, mikä tekee työkalusta turvallisen julkaisemattomille tuotekuville, luonnosmalleille ja salassapitosopimuksen alaisille brändiaineistoille.

Brändi- identiteettityössä 5–8 väriä on ihanteellinen määrä – se vangitsee hallitsevan teeman laimentamatta korostusvalintoja. Datavisualisointiin suosittelemme 10–16 väriä, jotta saat riittävästi luokittelevia sävyjä. Liukusäätimellä voit valita 5:n ja 24:n väliltä.

Pikselit, joiden alfa on alle 128, jätetään huomiotta, joten läpinäkyvät taustat eivät saastuta palettia "tausta"-väreillä. Tämä tekee kuvan värivalitsimesta erityisen hyvän tuoteleikkauksiin, tarrataideteoksiin ja eristettyihin kohteisiin.

HEX (#RRGGBB) on tiivein ja se, mitä CSS, Figma ja Sketch käyttävät oletuksena. RGB näyttää kolme komponenttiarvoa väliltä 0–255 – hyödyllistä, kun käsittelet kuvadataa ohjelmallisesti. HSL (sävy, kylläisyys, vaaleus) on intuitiivinen värien säätämiseen: muuta sävyä vaihtaaksesi väriperhettä ja säädä vaaleutta vaaleampia ja tummempia sävyjä varten.

Kyllä. Se toimii selaimessa eikä vaadi tiliä. Mitään asennettavaa ei ole, eikä tarkastettavien palettien lukumäärää ole rajoitettu.

Kuvaa ei tarvita. Yläosassa oleva Color Picker & Wheel toimii itsenäisesti – vedä kylläisyyden/kirkkauden neliötä ja sävyn liukusäädintä tai valitse mikä tahansa HEX-, RGB- tai HSL-arvo valitaksesi tarkan värin. Kuvan lataaminen on valinnaista, jos haluat poistaa valokuvasta värejä.

Valitse perusvärisi, ja Väriharmoniat-paneeli rakentaa välittömästi täydentäviä, analogisia, triadisia, split-komplementaarisia, tetradisia ja monokromaattisia malleja väripyöräteorian avulla. Napsauta mitä tahansa värimallia kopioidaksesi sen HEX-koodi.

Erillisessä värivalitsimessa ja väripyörässä säädä värisi, niin paneeli näyttää sen kontrastisuhteen puhtaaseen valkoiseen ja puhtaaseen mustaan verrattuna sekä WCAG-luokituksen — AAA, AA, AA Large tai Fail. Käytä tätä ennen tekstin tai painikkeen värin viimeistelyä, jotta se pysyy luettavana ja täyttää WCAG 2.1 -saavutettavuusohjeet.

Kyllä. Erillinen Color Picker & Wheel näyttää lähimmän nimetyn CSS-värin sen HEX-, RGB- tai HSL-arvon vieressä, jonka olet asettanut, mikä on kätevää sävyn nopeaan kuvaamiseen muistiossa, tiketissä tai suunnittelumäärityksessä arvailematta.

Napsauta Random Color Picker & Wheel -kohdassa hypätäksesi uuteen väriin ja käytä sitten sen alla olevaa Color harmonies -paneelia nähdäksesi täydentävät, analogiset, triadiset ja muut yhtenäiset paletit, jotka on rakennettu kyseisestä väristä — nopea tapa löytää lähtökohta, kun suunnittelet tyhjästä sen sijaan, että poimisit värejä olemassa olevasta kuvasta.

Käytä paletin yläpuolella olevaa Koko-pudotusvalikkoa valitaksesi 5, 8, 10, 16 tai 24 hallitsevaa väriä — paletti laskeutuu uudelleen välittömästi, kun muutat sitä. Yhdistä pieni koko kuten 5 puhdasta brändipalettia varten poimintavärin pipetin kanssa napataksesi yhden tai kaksi tarkkaa korostussävyä, jotka automaattinen poiminta saattaisi keskiarvoistaa pois.

Kyllä — itsenäinen Värinvalitsin ja pyörä näyttää nykyisen värisi kontrastisuhteen puhdasta valkoista ja puhdasta mustaa vasten aivan näytteen alla, merkittynä AAA, AA, AA Large tai Fail WCAG-kynnysarvojen mukaan (7:1, 4.5:1, 3:1). Käytä sitä tarkistaaksesi, että teksti/tausta-pari täyttää esteettömyysstandardit, ennen kuin lukitset suunnitteluvärin.

Värinpoimin ja väriympyrä sovittavat automaattisesti minkä tahansa värin, jonka olet valinnut — poimimen, HEX-laatikon tai RGB/HSL-kenttien kautta — sen lähimpään vakiomuotoiseen CSS-värinimeen, joka näytetään 'Lähin nimi' -tekstinä värinäytteen vieressä. Se on nopea tapa kuvailla väri sanallisesti tai löytää sen lähin web-turvallinen vastine.

Kyllä — jokainen napsautus tai napautus ladatussa kuvassa lisää uuden värinäytteen Poimitut värit -luetteloosi sen sijaan, että se korvaisi edellisen, joten voit koota mukautetun joukon tarkkoja pikselivärejä valokuvan eri osista. Poista mikä tahansa yksittäinen näyte sen × -painikkeella tai tyhjennä koko luettelo Tyhjennä poimitut -toiminnolla.

Kyllä — Värinvalitsin ja pyörä -osion Satunnainen-painike (sekoituskuvake) hyppää uuteen sävyn, kylläisyyden ja kirkkauden yhdistelmään yhdellä napsautuksella, mikä on hyödyllistä luovan lukon murtamiseen tai sellaisen paletin tutkimiseen, jota et olisi kirjoittanut käsin. HEX, RGB, HSL ja alla olevat harmonianäytteet päivittyvät kaikki yhdessä.

Kosketusnäytöllä vedä sormeasi kuvan yli esikatsellaksesi sen alla olevaa väriä reaaliaikaisessa kelluvassa värinäytteessä ja nosta sitten sormesi lisätäksesi juuri kyseisen pikselin Valitut värit -luetteloosi — erillistä vahvistusnapautusta ei tarvita. Sama palettikoon pudotusvalikko ja vientipainikkeet toimivat samalla tavalla mobiilissa.

Kyllä. Sivun yläreunassa olevassa väriympyrässä on Satunnainen-painike, joka hyppää satunnaiseen väriin ja näyttää heti sen HEX-, RGB- ja HSL-koodit, lähimmän nimetyn värin, kontrastisuhteet valkoisella ja mustalla sekä täydet harmoniasarjat — komplementaarisen, analogisen, triadisen, jaetun komplementaarisen, tetradisen ja monokromaattisen. Se on nopea tapa löytää lähtökohtia paletille.

Tämä työkalu poimii värejä ladatusta kuvasta tai sisäänrakennetusta väriympyrästä sen sijaan, että se lukisi näyttöäsi reaaliajassa. Nopein kiertotie näytön väripipetille: ota kuvakaappaus, pudota se sivulle ja klikkaa haluamaasi pikseliä — saat samat HEX-, RGB- ja HSL-koodit ilman laajennuksen asentamista, eikä kuvakaappaus koskaan poistu selaimestasi.

Kyllä — Pixoate tukee erä- ja joukkokäsittelyä. Vaihda erätilaan, lisää enintään 60 kuvaa Premiumissa tai 200 Prossa, aseta asetukset kerran, ja jokainen kuva käsitellään samoilla asetuksilla ennen kuin lataat yhden laskentataulukon – palettirivin per kuva. Joukkokäsittely on Premium-ominaisuus; lähtö käyttää samaa laatua ja asetuksia kuin yksitila.

Kyllä – joukkokäsittelyssä määrität asetukset kerran, ja ne koskevat kaikkia erän kohteita – jopa 60 kuvaa Premiumissa tai 200 Prossa. Asennusta ei tarvitse toistaa kohdetta kohti, ja paletin purkaminen suoritetaan selaimessasi. vain valmis laskentataulukko tallennetaan ladattavaksi.

Syynä on lähes aina jokin kolmesta asiasta. Tiedosto ylittää ilmaisen lähetyksen 11 MB:n rajan — Premium hyväksyy enintään 50 MB ja Pro 120 MB. Työkalu ei ehkä tue tiedostomuotoa, joten tarkista lähetyspaneelissa näkyvä luettelo. Tiedoston todellinen muoto ei myöskään välttämättä vastaa sen nimeä: tiedoston nimeäminen uudelleen ei muuta sen sisältöä, minkä vuoksi kelvolliselta näyttävä kuva voidaan hylätä.

Se ilmoittaa, mitä tiedostossa todella on, joten tyhjä tai yllättävä tulos tarkoittaa yleensä sitä, että tiedot eivät koskaan olleet siellä – ne on poistettu viimeksi tallennetun sovelluksen toimesta, ne on poistettu alustan latauksen yhteydessä tai ne puuttuivat alkuperäisestä. Kokeile koskematonta alkuperäistä tiedostoa suoraan kamerasta tai lähteestä viestintäsovelluksen kautta lähetetyn kopion sijaan.

Ei. Voit suorittaa Color Pickerin ja ladata ilmaisen tuloksen ilman tiliä, eikä siinä ole vesileimaa. Premium on mitä ostat, kun rajat alkavat purra: jopa 60 tiedostoa yhdessä erässä, suuremmat lataukset, ei päivittäistä enimmäismäärää ja alkuperäisen resoluution tulos. Latausvaiheessa ei paljasteta mitään, mikä ei ollut näkyvissä ennen aloittamista.

Ei. Color Picker toimii selaimessa tietokoneella ja puhelimella. Mitään ei tarvitse asentaa, kokeilua aloittaa tai lisenssiä ostaa ennen kuin näet, sopiiko se tarpeeseesi. Kokeile sitä omalla ongelmatiedostollasi esimerkin sijaan.