Tofarget design: tydelige uttrykk med bare to farger

Tofarget design betyr å bygge alt, typografi, former, bakgrunner og til og med bilder, av bare to farger: vanligvis én mørk og én lys, med tydelig forskjell i lyshet. Kobolt og mandarin, skoggrønt og pudderrosa, blekk og smørgult. Begrensningen er poenget. To farger virker gjennomtenkte, er tydelige i alle størrelser og gir merkevaren en gjenkjennelig signatur raskere enn en full palett.

Tofarget, duotone og monokromt er ikke det samme

Ordene brukes løst, så det hjelper å skille dem. De overlapper, og mange gode oppsett bruker alle tre ideene samtidig.

Hvis du ønsker blandingen fremfor todelingen, dekker gradienter med to farger den siden. Monokromatiske fargeskjemaer dekker versjonen med én fargetone.

Tolv tofargede paletter

Hvert par under har én farge mørk nok til å brukes som tekst på den andre. Kontrast mellom fargetoner betyr mindre enn kontrast i lyshet: et par kan være varmt og kjølig eller to nabofarger, så lenge én er tydelig mørkere.

Noen av disse er komplementære, som kobolt og mandarin, og gir maksimal energi. Andre er nært beslektet, som dyp fiolett og syrin, og føles roligere og mer eksklusive. Komplementærfarger forklarer hvorfor motsetninger vibrerer når de møtes.

Slik velger du de to fargene

1. 1

   Velg den mørke fargen først

   Den skal brukes til alle overskrifter og avsnitt, så den må være leselig på den lyse fargen. Marineblått, skoggrønt, aubergine, sjokolade og nesten svart fungerer alle.

2. 2

   Velg den lyse fargen etter stemning

   Dette er fargen folk husker. Varme lyse farger som fersken og smørgult føles vennlige; kjølige som himmelblått og syrin føles roligere.

3. 3

   Sjekk kontrasten begge veier

   Mørk tekst på den lyse fargen bør nå 4,5:1 for brødtekst. Alle parene i rutenettet over består testen.

4. 4

   Prøv tre formater

   Et kvadratisk innlegg, en story i 1080×1920 og en A5-flyer. Hvis paret fortsatt føles som deg på alle tre, behold det.

Slik får du mer spenn fra to farger

To flate farger kan virke begrensende når du trenger et sekundært felt, en bildetekst eller en deaktivert knapp. Løsningen er ikke en tredje farge. Bland lyse nyanser av den lyse fargen og mørke nyanser av den mørke, så alle nye toner fortsatt tilhører paret.

• Bakgrunn: den lyseste nyansen, til store flater og tekstsider.
• Hovedfarge: den mørke fargen, til overskrifter, brødtekst og hele fargefelt.
• Trykk: den lyse fargen i full styrke, til én form, ett ord eller én pris.
• Mellomtoner: en mellomnyanse av hver, til skillelinjer, bildetekster og illustrasjonsfyll.

Tofargede bilder med duotone

Bilder er der tofargede oppsett vanligvis brytes: et fargebilde bringer en tredje, fjerde og femte farge inn på siden. Duotone-behandling gjør skyggene til den mørke fargen og høylysene til den lyse. Duotone-effekten går dypere; på nettet kan du gjøre det med blandingsmoduser.

.duotone {
  position: relative;
  background-color: #ff7a1a; /* light tone: the highlights */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(100%) contrast(1.15);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #172e70; /* dark tone: the shadows */
  mix-blend-mode: lighten;
  pointer-events: none;
}

I Gradiently kan du farge alle bilder med Markens farger som mono, duotone eller lavering, så bildene blir del av designet fremfor å konkurrere med det.

Ideer til tofarget design

• Konsert- og arrangementsplakater: to spotfarger er rimelige å trykke og ser gjennomtenkte ut fra andre siden av gaten.
• Restaurantmenyer: en mørk farge til rettene, den lyse til papiret og en mellomnyanse til prisene.
• Instagram-karuseller: veksle bakgrunnsfargen mellom lysbildene, så sveipingen får rytme.
• Emballasje: én farge per produktlinje, den andre felles for hele utvalget.
• Presentasjoner: delingslysbilder i den mørke fargen, innholdslysbilder på den lyse nyansen.
• Visittkort: én side i hver farge.

Mål kontrasten begge veier med verktøyene i fargekontrast og tilgjengelighet. Liker du disiplinen i to farger, går samme tankegang igjen i minimalistisk grafisk design og med full kraft i kraftfullt grafisk design.