Ekstraher eksempelpaletten først, bruk deretter presis plukking og manuelle redigeringer for å bestemme hvilke farger som hører hjemme i ditt eget prosjekt. Åpne Fargevelger for bilder.
Last opp og trekk ut en startpalett
Åpne Image Color Picker og last opp ett støttet bilde, eller prøv eksemplet. Automatisk ekstraksjon laster opp kilden til serveren. Eksemplet i denne guiden er collage-botanical.jpg, et 1200 x 900 bilde av blomster, blader og en ferskenfarget bakgrunn.
La Farger å trekke ut stå på 6 og velg Dominant for eksemplet. Dominant favoriserer hovedfargene i bildet, mens Vibrant gir fargerike aksenter mer innflytelse. En forespørsel kan bruke 3 til 12 farger; et bilde med færre distinkte synlige grupper kan returnere færre.
Det faktiske Dominant-resultatet inneholder #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Den største gruppen er #E3B49F på omtrent 28.88% av de samplede synlige pikslene. Ekstraksjonen brukte et 512 x 384 utvalg; disse prosentandelene er ikke en nøyaktig telling av bildet med full oppløsning.
En palettfarge kan være et gjennomsnitt av nærliggende farger. Plukk en bestemt piksel når du trenger verdien av en liten detalj.
Plukk og avgrens individuelle farger
Klikk eller trykk på bildet for å inspisere en piksel med forstørrelsesglasset. Fokuser bildet og bruk piltastene for å flytte én piksel, Shift pluss en pil for å flytte ti, og deretter Enter for å plukke. Kopier HEX, RGB eller HSL med den individuelle kopiknappen, eller bruk Legg til i palett.
Velg en fargeprøve for å endre HEX-verdien eller fargen, flytte den til venstre eller høyre, eller fjerne den. Legg til en egendefinert farge godtar en HEX-verdi etter eget valg. Lås farge bevarer en valgt fargeprøve når Oppdater palett eller en endret ekstraksjonsinnstilling genererer en ny startpalett.
Sampling og gjennomsiktighet tilbyr Kilde-farge og Sammensatt over en bakgrunn. Kilde-farge inkluderer opasitet i kopierte koder når det er relevant; Sammensatt viser pikselen blandet over den valgte prøvebakgrunnen. Selve palettfargeprøvene er ugjennomsiktige RGB-verdier. Redigerte og plukkede farger har ingen estimert kildeprosent.
Nettleser-dekodbare bilder bruker nettleser-sRGB-prøver. Hvis en normalisert forhåndsvisning brukes, merker velgeren eksplisitt fargene og koordinatene som omtrentlige.
Eksempelet i denne veiledningen
Farger å ekstrahere: 6; Dominant; ingen manuelle endringer eller låser; Lagre som: PNG. Automatisk ekstraksjon samplet 512 x 384 piksler.
- Kildebilde
- 1200 x 900 px
- Ekstraherte farger
- 6 ugjennomsiktige farger
- Palettkort
- 600 x 500 px
- Lastet ned PNG
- 9,163 bytes
Sjekk et tekst- og bakgrunnspar
Åpne Sjekk fargekontrast. Angi Tekst og Bakgrunn med fargekontrollene, skriv inn HEX-koder, eller bruk den plukkede fargen for begge sider. Den levende tekstprøven lar deg sammenligne paret, og forholdet ledsages av separate resultater for Normal AA, Normal AAA, Stor AA og Stor AAA.
Velg et par for det tiltenkte formålet i stedet for å anta at hver ekstraherte farge kan brukes som tekst. En lys fersken og en lys lilla kan fungere sammen i et bilde, samtidig som de utgjør en dårlig kombinasjon for tekst og bakgrunn.
Denne kontrollen sjekker bare det fargeparet for tekstkontrast. Det er ikke en fullstendig tilgjengelighetsrevisjon og avgjør ikke om typografi, tastaturbruk eller resten av designet er brukbart.
Et bestått kontrastforhold er en nyttig sjekk, ikke en garanti for at en hel side er tilgjengelig.
Kopier verdier eller eksporter paletten
For en rask overlevering, kopier en individuell kode eller bruk Kopier palett-HEX-farger. For en fil, velg Lagre som og velg Start. PNG lager et merket palettbilde; SVG beholder fargeprøvene og merkelappene som vektorinnhold; CSS gir nummererte fargevariabler; JSON inneholder HEX, RGB og HSL-verdier.
Det uredigerte seksfargede eksemplet eksporterer palette.png ved 600 x 500 piksler og 9,163 bytes. Fargeprøvenes rekkefølge samsvarer med paletten. Din endelige palett kan inneholde 1 til 12 farger etter redigering, selv når det automatiske startantallet var annerledes.
Last ned før du forlater eller oppdaterer siden. Den endelige eksporten laster opp kilden og de valgte fargene for serverbehandling. Den oppretter en ny palettfil og endrer ikke farge eller erstatter det originale bildet.
PNG og SVG er praktiske visuelle referanser. CSS og JSON er nyttige når neste trinn krever gjenbrukbare fargeverdier.
Vanlige spørsmål
Gir fargevelgeren de samme fargene som automatisk ekstraksjon?
Ikke nødvendigvis. En plukket verdi beskriver en bestemt kilde- eller forhåndsvisningspiksel. Automatisk ekstraksjon grupperer samplede piksler og kan returnere gjennomsnittsfarger.
Blir gjennomsiktige piksler talt med?
Helt gjennomsiktige piksler er ekskludert fra ekstraksjon. Delvis gjennomsiktige piksler har redusert vekt. Kilde-sampling kan vise opasitet, men eksporterte palettfargeprøver er ugjennomsiktige.
Hva skjer med låste farger når jeg oppdaterer?
Låste farger forblir i paletten mens nye ekstraherte farger fyller de andre posisjonene. En beholdt eller redigert farge blir ikke tildelt en oppdiktet bildeprosent.
Kan jeg bruke dette for en nøyaktig merkevarefarge?
Skriv inn en kjent HEX-verdi direkte eller velg en passende kildepiksel. Fotobelysning, komprimering, fargestyring og normaliserte forhåndsvisninger kan endre samplede verdier, så en automatisk fotopalett er ikke bevis på en original merkevarespesifikasjon.
Bygg en palett du kan ta med deg inn i ditt neste design
Prøv et eksempel eller bruk din egen fil, og gå gjennom resultatet før du deler.
