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

[Canonical HTML page](https://gradiently.design/sv/guide/two-tone-design)

Två färger, väl valda, kan bära ett helt varumärke: affischer, menyer, inlägg och foton. Så väljer du paret, får mer spelrum ur det och hindrar det från att se platt ut.

## The short version

- Tvåfärgsdesign bygger varje element av två färger, oftast en mörk och en ljus, utan någon tredje färg förutom nyanser av de två.
- Paret behöver en tydlig skillnad i ljushet, så att text och former förblir läsbara oavsett vilken färg som ligger överst.
- Ljusare och mörkare nyanser av de två färgerna ger en tvåfärgspalett tillräckligt spelrum för bakgrunder, paneler och sekundär text.
- Duotone-foton mappar bildens skuggor till den mörka färgen och dess ljusa partier till den ljusa, vilket låter fotografi matcha en tvåfärgslayout.
- Tvåfärgslayouter sticker ut i fulla flöden eftersom de ser genomtänkta ut, och de trycks billigt som två dekorfä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.

| Term | Vad den betyder | Typisk användning |
| --- | --- | --- |
| Tvåfärg | En hel design gjord av två tydligt skilda färger | Affischer, menyer, förpackningar, varumärkessystem |
| Duotone | Ett foto som mappats om till två färger, skuggor till den ena och ljusa partier till den andra | Fotografi inuti en tvåfärgslayout |
| Monokrom | Bara ljusare och mörkare nyanser av en enda kulör | Lugna varumärken i en färg |
| Tvåfärgsgradient | Två färger som blandas mjukt in i varandra | Bakgrunder och hero-sektioner |

Tvåfärg håller färgerna åtskilda; en gradient blandar dem. Båda kan finnas i ett varumärke.

Vill du ha blandningen snarare än delningen tar [tvåfärgsgradienter](https://gradiently.design/sv/guide/two-color-gradients) upp den sidan, och [monokromatiska färgscheman](https://gradiently.design/sv/guide/monochromatic-color-scheme) 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.

- Kobolt och mandarin: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Skog och rodnad: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Bläck och smör: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Kleinblått och papper: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Racinggrönt och senap: `linear-gradient(135deg, #004225 0%, #004225 50%, #e1ad01 50%, #e1ad01 100%)`
- Aubergine och lime: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Affischrött och grädde: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Djup blågrön och persika: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Choklad och himmel: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Oxblod och blekrosa: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Svart och varselgult: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Djup violett och lila: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Tolv par, delade på diagonalen. Varje par kan byta vilken färg som är botten, vilket fördubblar dina layouter.

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](https://gradiently.design/sv/guide/complementary-colors) förklarar varför motsatser vibrerar när de möts.

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

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. **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. **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. **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.

- Kobolt: #172e70
- Kobolt 75: #516294
- Kobolt 40: #a2abc6
- Mandarin 10: #fdf0e6
- Mandarin 55: #ffb780
- Mandarin: #ff7a1a

Ett par, sex toner. Mandarin på 10 % ger en varm pappersbotten, och kobolt på 40 % fungerar för sekundär text på mörka paneler.

- **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](https://gradiently.design/sv/guide/duotone-effect) går djupare; på webben kan du göra det med blandningslägen.

```css
.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;
}
```

En duotone i kobolt och mandarin. Bilden blir grå, multipliceras mot den ljusa tonen, och sedan lyfter den mörka tonen skuggorna till kobolt.

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

Ett stående inlägg delat i två färgblock, med Öppet sent på fredagar på ena sidan

En delad layout: en färg håller orden, den andra håller stämningen.

Ett minimalistiskt stående inlägg med texten Vårmeny i en mörk färg på en ljus botten

En minimal layout där den ljusa färgen är botten och den mörka färgen står för all text.

- **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.

### Undvik

- Två färger med liknande ljushet
- Att smyga in en tredje färg till en knapp
- Färgfoton som släpps in obehandlade
- Ljus text på den ljusa färgen

### Gör

- En tydligt mörk, en tydligt ljus
- Ljusare och mörkare nyanser av paret i stället
- Duotone på varje foto i de två färgerna
- Kontrollera kontrasten åt båda hållen

För kontrast åt båda hållen, mät med verktygen i [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility). Om du gillar disciplinen med två färger går samma tänk igen i [minimalistisk grafisk design](https://gradiently.design/sv/guide/minimalist-design-ideas) och, på full volym, i [djärv grafisk design](https://gradiently.design/sv/guide/bold-design-ideas).

## FAQ

### Vad är tvåfärgsdesign?

En design byggd helt av två färger, oftast en mörk och en ljus, där nyanser av de två är tillåtna men ingen tredje färg.

### Vilka två färger passar bra ihop i en design?

Varje par med en tydlig skillnad i ljushet, som kobolt och mandarin, skog och rodnad eller bläck och smör. Den mörkare ska vara läsbar på den ljusare.

### Vad är skillnaden mellan tvåfärg och duotone?

Tvåfärg beskriver en hel layout gjord av två färger. Duotone beskriver ett foto som mappats om så att dess skuggor och ljusa partier blir två färger.

### Hur gör jag en duotone-bild i CSS?

Gör bilden gråskala, blanda den med `mix-blend-mode: multiply` mot den ljusa färgen och lägg sedan den mörka färgen över med `mix-blend-mode: lighten`.

### Är tvåfärgstryck billigare?

Vid screentryck och offsettryck med dekorfärger betyder färre färger oftast färre ramar eller plåtar, så tvåfärgsjobb är i regel billigare än fyrfärg.