Tvåfärgsdesign: kraftfulla uttryck med bara två färger

Tvåfärgsdesign betyder att bygga allt, text, former, bakgrunder och till och med foton, av bara två färger: oftast en mörk och en ljus, med en tydlig skillnad i ljushet mellan dem. Kobolt och mandarin, skog och rodnad, bläck och smör. Begränsningen är poängen. Två färger ser genomtänkta ut, läses tydligt i alla storlekar och ger ett varumärke en igenkännbar signatur snabbare än en full palett kan.

Tvåfärg, duotone och monokrom är inte samma sak

Orden används lösligt, så det hjälper att skilja dem åt. De överlappar, och många bra layouter använder alla tre idéerna på en gång.

Vill du ha blandningen snarare än delningen tar tvåfärgsgradienter upp den sidan, och monokromatiska färgscheman tar upp varianten med en kulör.

Tolv tvåfärgspaletter

Varje par nedan har en färg som är mörk nog för att sätta text på den andra. Kontrast mellan kulörer spelar mindre roll än kontrast i ljushet: ett par kan vara varmt och kallt, eller två grannar, så länge en tydligt är mörkare.

Några av dem är komplementfärger, som kobolt och mandarin, vilket ger maximal energi. Andra är nära släktingar, som djup violett och lila, vilket känns lugnare och dyrare. Komplementfärger förklarar varför motsatser vibrerar när de möts.

Så väljer du dina två färger

1. 1

   Välj den mörka färgen först

   Den bär varje rubrik och stycke, så den måste vara läsbar på den ljusa färgen. Marinblått, skogsgrönt, aubergine, choklad och nästan svart fungerar alla.

2. 2

   Välj den ljusa färgen efter stämning

   Det är färgen folk minns. Varma ljusa toner som persika och smör känns vänliga; kalla ljusa toner som himmel och lila känns stillsammare.

3. 3

   Kontrollera kontrasten åt båda hållen

   Mörk text på den ljusa färgen ska nå 4,5:1 för brödtext. Varje par i rutnätet ovan klarar det testet.

4. 4

   Prova den i tre format

   Ett kvadratiskt inlägg, en story i 1080×1920 och en A5-flyer. Om paret fortfarande känns som du i alla tre, behåll det.

Så får du mer spelrum av två färger

Två släta färger kan kännas tunna när du behöver en sekundär panel, en bildtext eller en inaktiverad knapp. Lösningen är inte en tredje färg. Blanda ljusare nyanser av den ljusa färgen och mörkare av den mörka, så att varje ny ton fortfarande hör till paret.

• Botten: den ljusaste nyansen, för stora ytor och textsidor.
• Huvudfärg: den mörka färgen, för rubriker, brödtext och solida block.
• Pang: den ljusa färgen i full styrka, för en form, ett ord eller ett pris.
• Mellantoner: en mellannyans av vardera, för avdelare, bildtexter och fyllningar i illustrationer.

Tvåfärgsfoton med duotone

Foton är där tvåfärgslayouter oftast går sönder: en färgbild släpper in en tredje, fjärde och femte färg på sidan. En duotone-behandling mappar om fotot så att dess skuggor blir din mörka färg och dess ljusa partier din ljusa. Duotone-effekten går djupare; på webben kan du göra det med blandningslägen.

.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 tona vilket foto som helst i Markens färger som mono, duotone eller en lasyr, så att bilder blir en del av designen i stället för att slåss med den.

Idéer för tvåfärgsdesign att prova

• Affischer för spelningar och event: två dekorfärger trycks billigt och ser avsiktliga ut från andra sidan gatan.
• Restaurangmenyer: en mörk färg för rätterna, den ljusa för papperet, en mellannyans för priserna.
• Karuseller på Instagram: växla vilken färg som är botten på varje bild, så att svepandet får rytm.
• Förpackningar: en färg per produktlinje, den andra delad över hela sortimentet.
• Presentationer: avsnittsbilder i den mörka färgen, innehållsbilder på den ljusa nyansen.
• Visitkort: en sida i vardera färgen.

För kontrast åt båda hållen, mät med verktygen i färgkontrast och tillgänglighet. Om du gillar disciplinen med två färger går samma tänk igen i minimalistisk grafisk design och, på full volym, i djärv grafisk design.