Mange elektroniske ressurser eksisterer for designere å utforske, finjustere og laste ned flotte fargekombinasjoner.

Å spille med komplementære, analoge, monokromatiske og andre kombinasjoner åpner oss for spennende muligheter, og det er ingen mangel på freebies.

Men det er en forskjell mellom et vinnende fargevalg og en vinnende design som bruker den.

Å velge farger er det første trinnet. Å tilpasse dem til å passe dine designkrav er like viktig.

Det som ser bra ut i en stikkord, fungerer kanskje ikke bra på en nettside, men det betyr ikke at du må gå tilbake til en firkant. Vi vil utforske nye måter å se på fargeskjemaer.

Farge spiller en viktig rolle i hvordan folk absorberer innhold. Uansett om et design er reservert eller høyt, vennlig eller uheldig, varm eller kul, blir besøkende på et nettsted umiddelbart påvirket av tonen som er angitt av layoutet, typografien, bildene og selvfølgelig nyansene og verdiene som består av fargevalg.

Å velge farger kan være den mest subjektive jobben i webdesign. Noen farger fungerer godt sammen; andre, ikke så mye. Noen kombinasjoner appellerer til enkelte personer. Mer enn ett sett med farger kan passe til samme design.

Heldigvis eksisterer mange ressurser for å hjelpe. Fargepalettgeneratorer som Fargeskjema Designer , Adobe Kuler , Aviary Toucan og Daglig fargeskjema er blant de store stedene å finne kombinasjoner av farger som effektivt setter stemning. Men å finne en palett er bare det første trinnet. Eventuelle fargevalgs potensielle effektivitet kan kompromitteres med måten den brukes på .

Antall farger i et skjema gjør en forskjell

Et fargeskjema er et sett med farger som er valgt for å jobbe sammen. Ordninger har vanligvis minst fire farger og kan ofte lastes ned som enkle bilder og noen ganger som ASE-filer. La oss jobbe med følgende skjema:

prøvefargevalg med fem farger

Fargeskjemaet ovenfor er typisk for hvordan de fleste ordninger presenteres: som ensartede prøver av flade farger. Dette settet kan merkes som sådan:

  • Munter
  • Vennlig
  • Moderne
  • Uformelt
  • primær~~POS=TRUNC

Men gjør en eller to farger skiller seg ut og forskjellige adjektiver kan komme til tankene.

fargevalg med brun og beige understreket

Bildet ovenfor har samme skjema som ble presentert i swatchen, men det er mindre uformelt og mer ørkenlignende. Dette bildet understreker de varme farger. Isolerte flekker av blått og grønt trekker oppmerksomheten ved å være sparsommere. Den resulterende stemningen kan beskrives som:

  • Sand
  • Lys
  • Varm
  • khaki
  • Ujevn

Valget av den dominerende farge påvirker hvordan skjemaet vises.

fargevalg med blå og grønn understreket

Igjen, her bruker vi de samme fargene, men til en helt annen slutt. Dette bildet ser ut som et abstrakt verdenskart, med øyer av rød, grønn og brun. Bildet er ikke bare kjøligere, det er litt mørkere , selv om det kommer fra samme palett.

Å kunne kjenne igjen gode fargekombinasjoner er ikke nok, fordi farger sjelden brukes jevnt på et webdesign. Å bruke fargene klokt og i riktig grad er like viktig som å velge de riktige fargene.

Bakgrunnen setter tonen

Det mest opplagte stedet for å påvirke fargen er i bakgrunnen. Denne brede utbredelsen kan tiltrekke seg så mye oppmerksomhet som innholdet plassert over toppen av det.

Eksempler på kraftige røde og subtile grønne bakgrunner på samme sidedesign

Til tross for at det er identisk innhold, er designen til høyre mye varmere enn den til venstre. Men mer skjer her enn en enkel fargeskift.

Innholdsstengene i den grønne designen (dvs. den hvite teksten på rødt) holder seg til den brede grønne bakgrunnen. Men den røde bakgrunnen til høyre vasker ut de stakkars grønne stolpene. Dette er fordi, i tillegg til å være varmere, er denne spesielle skyggen av rødt mer mettet. Faktisk er de eneste elementene med nok visuell vekt til å motvirke den røde bakgrunnen de store overskriftene. Den lille kroppsteksten og blekne grønne stolper bleke i sammenligning. Det er ikke nødvendigvis dårlig; En kraftig bakgrunn gir siden betydelig tilstedeværelse. Den grønne designen er kjøligere og gir innholdet en mer casual omgivelse.

Hvilken bruk av farge er bedre? Det avhenger av din hensikt. Bør besøkende se innholdet som avslappet eller dristig? Ønsker du å spille ned de fargede stolpene? Er du bekymret for at bakgrunnen vil overvinne informasjonen? Er en farge viktigere enn en annen i merkevaren din? Svarene på disse spørsmålene bestemmer hvilken farge som er "riktig". Denne fargepaletten presenterer to forskjellige løsninger.

Farge bak tekst

Samspillet mellom tekst og bakgrunn påvirkes av størrelsen og mengden av hver. Effekten av tekst på siden avhenger så mye av fargen på selve teksten som på bakgrunnens farge, til tross for den generelle tendensen til å bekymre seg mer om bakgrunnen.

eksempler på gulltekst på en blå bakgrunn

Over, letter tekst mot en mørk bakgrunn fungerer bedre når typen er stor. Lånt fra fargeskjemaet vi begynte med, er dette gullet mindre egnet for kroppstekst (dvs. ca. 13 piksler eller mindre). Løsningen er enkel:

eksempler på gulltekst på en blå bakgrunn

Over, den lille teksten i de to siste radene er i en blekere nyanse av gull. Det er ikke helt hvit, men mye mer leselig enn de to linjene i det første bildet. Ekstra kontrast holder den lille teksten fra å bli overstyrt av bakgrunnen. Nøkkelen er å bruke fargevalg som utgangspunkt, ikke en fast regel. Hvis en bakgrunnsfarge truer med å overvelde mindre elementer, øker du kontrasten, som opprettholder integriteten til ordningen og holder innholdet leselig.

Tekst på hvitt

Mange nettsider har enten hvite bakgrunner eller hvite innholdsområder. Men "hvit" betyr ikke «tomt». Store hvite hvite påvirker hvordan farge oppfattes. For eksempel:

fargeskjemaet vi startet med

Farger vi begynte med, ser lysere ut når de brukes til tekst.

eksempler på hvit overveldende farget tekst og bakgrunn
  • Den relativt mørkeblå skaper nok kontrast for å gjøre teksten leselig mot hvitt.
  • Denne spesielle nyansen av grønn blander seg inn i bakgrunnen. Hvis hensikten er harmoni, så fungerer den grønne.
  • Rød + hvit = rosa eller fersken.
  • Gullet ser nesten ut som en sepia tone.

Hvit har en tendens til å lyse opp alt det berører. Hvis du vil sette et lett humør, kan noen av kombinasjonene ovenfor fungere. For mer innflytelse kan du mørke fargeskjemaet.

Spiller med fargeskjemaer i Photoshop

Hvis designet ikke krever at alle fargene i ordningen din skal brukes jevnt, bør du teste en eller to farger for dominans. Trikset er å finne et system med farger som fungerer både med hverandre og med den dominerende fargen.

Heldigvis har vi en enkel prosess for å teste farger. For å se hvordan forskjellige fargemålinger kan påvirke et design, følg disse trinnene i Photoshop.

1. Finn eller opprett et fargeskjema. Vårt eksempel har fem farger, men et tall over en vil fungere.

2. Opprett et nytt bilde i Photoshop, 500 x 500 piksler, med en hvit bakgrunn.

3. Lag fire nye lag (bakgrunnslaget ditt vil være den femte). Hvis skjemaet har mer eller færre enn fem farger, legg til eller fjern lagene tilsvarende.

4. Fyll hvert lag med en annen farge fra ordningen din.

5. Legg til en lagmaske for hvert lag over bakgrunnslaget. Lagpaletten din skal se slik ut:

diagram på Photoshop-lagpaletten

Over, ble Photoshop-lagpaletten, med ett lag per farge og med lagmasker, brukt.

6. Kjør "Thresholdizer" -aksjonen på hvert lag maske-men ikke på lagene selv.

diagram av lagmasken, ikke laget, valgt

Over, når du bruker "Thresholdizer" -aksjonen, vær sikker på å velge lagmasken , ikke det faktiske laget. Hvis du ved en feil kjører handlingen på laget, så vær glad for "Angre" -funksjonen.

Denne handlingen skaper for det meste et tilfeldig mønster i en lagmaske. Herfra tar designeren ansvaret: med "Threshold" -kontrollen. Skyv terskelkontrollen til venstre for å avsløre mer av et gitt lag, og rett til å avsløre mindre. Ved å bruke denne handlingen til hver lagmaske vil en farge dominere de andre i et tilfeldig mønster.

diagram som viser hvordan terskelen

I dette tilfellet bestemmer terskelkontrollen hvor mye av et gitt lag som er synlig. Et hovedsakelig svart lagmaske skjuler laget; mest hvite avslører laget. Hvis du kjører terskelverifiseringshandlingen på hver lagmaske, vil du lage en medley av farger som dette:

diagram av terskelverkningsaksjonen som ble brukt på hver lagmaske

Dette Photoshop-dokumentet viser hvordan et design kan se ut hvis den gule var dominerende. Justering av fargene nå er et snap: For å gi en farge mer (eller mindre) kontrast, bruk bare en Photoshop-kommando (for eksempel Bilde> Justeringer> Hue Saturation ).

For eksempel ser den grønne nyansen som fungerte bra med blå tidligere ikke veldig bra nå, da blå ikke dominerer. Noen eksperimenter avslører følgende:

variasjoner på de opprinnelige fargene basert på gul

Her har vi to variasjoner av vårt opprinnelige fargevalg. Variasjon # 1 mørker den grønne litt. Det fungerer nesten. Variasjon # 2 endrer alt unntatt det gule for å legge til kontrast og justere nyansene.

Hva om vårt design hadde for det meste blått i stedet for gult? Denne blåtonen er mørk nok til å kontrastere med de andre farger, men ingen av dem koordinerer - de er alle primære. Ved å velge en ny dominant, har vi opprettet et nytt problem.

variasjoner på de opprinnelige fargene basert på blå

Variasjon # 1 ovenfor erstatter den myke røde med en mørkere blå og gjør grønnens nyanse til en blek mynte. Variasjon # 2 går den andre veien, bruker mer rød (eller burgunder) i stedet for mindre.

Verdien av noen av disse variasjonene er subjektiv. Ideelt sett vil du bruke dem til selve designet før du tar en endelig beslutning. Nøkkelen er i gang: Få en palett, velg en dominerende farge og få de andre til å jobbe med den.

Om "Thresholdizer" -aksjonen

Det er ikke noe mysterium for denne handlingen. Du kan få samme effekt ved å bruke Filter> Render> Clouds eller Filter> Render> Difference Clouds til en lagmaske. Denne handlingen forenkler bare prosessen, og organiserer kommandoen Threshold i deciler.

Vær så snill å gjerne last ned "Thresholdizer" -aksjonen . Enda bedre, lag din egen og del den med alle ved å gi en lenke i kommentarene nedenfor.

Evaluere farge uten handlingen

Selvfølgelig er det måter å dømme farger uten å spille med Terskel. Start med å velge en hovedfarge, og få de andre til å jobbe med det.

original fargekombinasjon med brun

Her er vår opprinnelige fargevalg, med brun som primærfarge.

fargekombinasjon med brun, andre variasjon

Vi har tonet ned den grønne og mettet den røde. Hårdere farger står på egen hånd, som den blå gjør (som ikke er justert).

fargekombinasjon med brun, tredje variasjon

Her har vi bleknet den grønne, gule og røde. Disse lavnøkkene "aksenter" blandes med den brune bakgrunnen. Mørk det blå for å skape kontrast.

fargekombinasjon med brun, fjerde variasjon

De tre mørkere primærfargene går godt mot brettet, mens den blekgule fungerer som en aksentfarge.

Igjen, den endelige avgjørelsen kommer når designeren bruker disse ordningene til selve designen. Inntil da er dette bare utgangspunkt: nyttige verktøy for å unngå sammenstøt, praktiske referanser for å holde design på tema og en fin måte å utforske kombinasjoner på.

Farge er bare et designelement. Fargebruk er en ferdighet man må øve seg for å kontrollere humør, å dyrke sin smak og å kunne se muligheter i noen få fargeprøver.

Bare én ting er sikkert: det grønne må gå.

prøvefargevalg med fem farger



Skrevet utelukkende for Webdesigner Depot av Ben Gremillion. Ben er freelance webdesigner hvem løser kommunikasjonsproblemer med bedre design.

Hvordan tester du farger? Hva er dine favoritt måter å lage fargeskjemaer på? Del dine synspunkter i kommentarene nedenfor.