Työkalut95

MUOKKAUS / KÄYTÄNNÖN KUVAOPAS

Kuinka valita kuvan värit ja luoda paletti

Siirry huomaamastasi väristä arvoihin, joita voit käyttää.

Valokuva voi ehdottaa hyödyllistä värisuuntaa, mutta automaattinen paletti on vain lähtökohta. Kuvan värivalitsin yhdistää suurennetun pikselivalitsimen, muokattavat värimallit ja viennit suunnittelua tai koodia varten. Tämä opas käyttää todellista tulosta kuuden värin uuttamisesta kasvinäytteestä.

Seuraa opasta
TODELLINEN SYÖTE JA LADATTU TULOS
Ennen Alkuperäinen valokuva violeteista kukista ja vihreistä lehdistä lämmintä persikanväristä taustaa vasten.

collage-botanical.jpg: 1200 x 900 px, 199,152 tavua.

Jälkeen Varsinainen kuusivärinen paletti, jossa on etiketöidyt persikan, taupen, oliivin ja violetin väriset värimallit poimittuna kasvitieteellisestä valokuvasta.

palette.png: 600 x 500 px, 9,163 tavua.

Alkuperäinen kasvitieteellinen näyte ja varsinainen kuusivärinen PNG paletti. Värit on ryhmitelty pienennetystä näytteestä; kortti sisältää poimitut HEX-arvot, ei uudelleenvärjättyä valokuvaa.
Mainokset
PIKAVIDEO-OPAS How to pick an image color and export a palette Upload an image, inspect a pixel with the magnifier, add its color to the extracted palette, select Start and download a PNG palette. Englanninkielinen selostus Katso video

How to pick an image color and export a palette

Mainokset

Poimi esimerkkipaletti ensin, käytä sitten tarkkaa valintaa ja manuaalisia muokkauksia päättääksesi, mitkä värit kuuluvat omaan projektiisi. Avaa Kuvan värivalitsin.

01

Lataa ja uuta aloituspaletti

Avaa Image Color Picker ja lataa tuettu kuva tai kokeile näytettä. Automaattinen poiminta lataa lähteen palvelimelle. Tämän oppaan näyte on collage-botanical.jpg, 1200 x 900 kokoinen valokuva kukista, lehdistä ja persikanvärisestä taustasta.

Jätä poimittavien värien määräksi 6 ja valitse esimerkkiä varten Dominant. Dominant suosii kuvan päävärejä, kun taas Vibrant antaa värikkäille korostuksille enemmän vaikutusvaltaa. Pyyntö voi käyttää 3–12 väriä; kuva, jossa on vähemmän erottuvia näkyviä ryhmiä, voi palauttaa vähemmän värejä.

Varsinainen Dominant-tulos sisältää värit #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F ja #C297CA. Suurin ryhmä on #E3B49F, joka vastaa noin 28.88 %:a näytteistetyistä näkyvistä pikseleistä. Poiminnassa käytettiin 512 x 384 näytettä; nämä prosenttiosuudet eivät ole tarkka laskenta koko resoluution kuvasta.

Palettiväri voi olla lähistön värien keskiarvo. Valitse tietty pikseli, kun tarvitset yhden pienen yksityiskohdan arvon.

02

Poimi ja tarkenna yksittäisiä värejä

Napsauta tai napauta kuvaa tarkastellaksesi pikseliä suurennuslasilla. Kohdista kuva ja käytä nuolinäppäimiä siirtyäksesi yhden pikselin, Shift ja nuolinäppäin siirtyäksesi kymmenen, ja Enter valitaksesi. Kopioi HEX, RGB tai HSL omalla kopiointipainikkeellaan tai käytä Lisää palettiin -toimintoa.

Valitse värimalli muuttaaksesi sen HEX-arvoa tai väriä, siirtääksesi sitä vasemmalle tai oikealle tai poistaaksesi sen. Mukautetun värin lisääminen hyväksyy valitsemasi HEX-arvon. Lukitse väri säilyttää valitun värimallin, kun Päivitä paletti tai muuttunut poiminta-asetus luo uuden aloituspaletin.

Näytteenotto ja läpinäkyvyys tarjoavat lähdevärin ja yhdistelmän taustan päällä. Lähdeväri sisältää peittävyyden kopioiduissa koodeissa tarvittaessa; yhdistelmä näyttää pikselin sekoitettuna valitun näytetaustan päälle. Itse paletin värimallit ovat peittäviä RGB-arvoja. Muokatuilla ja valituilla väreillä ei ole arvioitua lähdeprosenttia.

Selaindekoodattavat kuvat käyttävät selaimen sRGB-näytteitä. Jos käytetään normalisoitua esikatselua, värivalitsin merkitsee värit ja koordinaatit nimenomaisesti likimääräisiksi.

Tämän oppaan esimerkki

Poimittavat värit: 6; Dominant; ei manuaalisia muutoksia tai lukituksia; Tallenna nimellä: PNG. Automaattinen poiminta näytisti 512 x 384 pikseliä.

Lähdekuva
1200 x 900 px
Poimitut värit
6 peittävää väriä
Palettikortti
600 x 500 px
Ladattu PNG
9,163 tavua
03

Tarkista teksti- ja taustapari

Avaa Tarkista värikontrasti. Aseta teksti ja tausta värisäätimillä, syötä HEX-koodit tai käytä valittua väriä kummallakin puolella. Elävä tekstinäyte antaa sinun verrata paria, ja suhdetta täydentävät erilliset Normal AA, Normal AAA, Large AA ja Large AAA -tulokset.

Valitse pari aiottuun tarkoitukseen sen sijaan, että olettaisit jokaisen poimitun värin sopivan tekstiksi. Vaalea persikka ja vaalea violetti voivat toimia yhdessä valokuvassa, mutta muodostavat huonon teksti-tausta-yhdistelmän.

Tämä säädin tarkistaa vain kyseisen väriparin tekstikontrastin. Se ei ole täydellinen saavutettavuusauditointi eikä se päätä, onko typografia, näppäimistökäyttö tai muu suunnittelu käytettävissä.

Hyväksyttävä kontrastisuhde on hyödyllinen tarkistus, ei takuu siitä, että koko sivu on saavutettava.

04

Kopioi arvot tai vie väripaletti

Nopeaa luovutusta varten kopioi yksittäinen koodi tai käytä Kopioi paletti HEX väriä. Tiedostoa varten valitse Tallenna nimellä ja valitse Aloita. PNG luo nimetyn palettikuvan; SVG säilyttää värimallit ja etiketit vektorisisältönä; CSS tarjoaa numeroidut värimuuttujat; JSON sisältää HEX, RGB ja HSL-arvot.

Muokkaamaton kuusivärinen esimerkki vie palette.png koossa 600 x 500 pikseliä ja 9,163 tavua. Sen värimallien järjestys vastaa palettia. Lopullinen palettisi voi sisältää 1–12 väriä muokkauksen jälkeen, vaikka automaattinen aloitusmäärä olisi ollut eri.

Lataa ennen poistumista tai päivittämistä. Lopullinen vienti lataa lähteen ja valitut värit palvelinkäsittelyä varten. Se luo uuden palettitiedoston eikä värjää tai korvaa alkuperäistä valokuvaa.

PNG ja SVG ovat käteviä visuaalisia viitteitä. CSS ja JSON ovat hyödyllisiä, kun seuraava vaihe vaatii uudelleenkäytettäviä väriarvoja.

HYÖDYLLISIÄ TIETOJA

Yleisiä kysymyksiä

Palauttaako pipetti samat värit kuin automaattinen poiminta?

Ei välttämättä. Valittu arvo kuvaa tiettyä lähde- tai esikatselupikseliä. Automaattinen poiminta ryhmittelee näytistettyjä pikseleitä ja voi palauttaa keskiarvovärejä.

Lasketaanko läpinäkyvät pikselit?

Täysin läpinäkyvät pikselit jätetään poiminnan ulkopuolelle. Osittain läpinäkyvillä pikseleillä on pienempi painoarvo. Lähdenäytteenotto voi näyttää peittävyyden, mutta viedyt paletin värimallit ovat peittäviä.

Mitä lukituille väreille tapahtuu, kun päivitän?

Lukitut värit pysyvät paletissa, kun taas uudet poimitut värit täyttävät muut paikat. Säilytetylle tai muokatulle värille ei määritetä keksittyä kuvan prosenttiosuutta.

Voinko käyttää tätä tarkkaan brändiväriin?

Syötä tunnettu HEX -arvo suoraan tai valitse sopiva lähdepikseli. Valokuvan valaistus, pakkaus, värienhallinta ja normalisoidut esikatselut voivat muuttaa näytteistettyjä arvoja, joten automaattinen valokuvapaletti ei ole todiste alkuperäisestä brändimäärityksestä.

SINUN VUOROSI

Rakenna paletti, jonka voit ottaa mukaan seuraavaan suunnitelmaasi

Kokeile näytettä tai käytä omaa tiedostoasi ja tarkista tulos ennen jakamista.

Avaa Kuvan värivalitsin

Kuvan tiedot

Kieli38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

Valitse kielesi. Video-ohjeet käyttävät tällä hetkellä englanninkielistä kerrontaa.