# Tofarvet design: markante udtryk med kun to farver

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

To farver, valgt med omhu, kan bære et helt brand: plakater, menukort, opslag og fotos. Her er, hvordan du vælger parret, får mere spændvidde ud af det og undgår, at det ser fladt ud.

## The short version

- Tofarvet design bygger alle elementer af to farver, som regel én mørk og én lys, uden en tredje farve ud over toner af de to.
- Parret skal have en tydelig forskel i lyshed, så tekst og former forbliver læselige, uanset hvilken farve der ligger øverst.
- Lysere og mørkere toner af de to farver giver en tofarvet palet nok spændvidde til baggrunde, paneler og sekundær tekst.
- Duotone-fotos lægger billedets skygger over i den mørke farve og højlysene i den lyse, så fotografi kan matche et tofarvet layout.
- Tofarvede layouts skiller sig ud i travle feeds, fordi de ser bevidste ud, og de er billige at trykke som to spotfarver.

**Tofarvet design** betyder, at du bygger alt, skrift, former, baggrunde og endda fotos, af kun to farver: som regel én mørk og én lys med en kraftig forskel i lyshed. Kobolt og mandarin, skovgrøn og rosa, blæk og smør. Begrænsningen er hele pointen. To farver ser bevidste ud, læses tydeligt i alle størrelser og giver et brand en genkendelig signatur hurtigere, end en fuld palet kan.

## Tofarvet, duotone og monokrom er ikke det samme

Ordene bruges løst, så det hjælper at skille dem ad. De overlapper, og mange gode layouts bruger alle tre idéer på én gang.

| Begreb | Hvad det betyder | Typisk brug |
| --- | --- | --- |
| Tofarvet | Et helt design lavet af to tydeligt forskellige farver | Plakater, menukort, emballage, brandsystemer |
| Duotone | Et foto omsat til to farver, skygger til den ene og højlys til den anden | Fotografi i et tofarvet layout |
| Monokrom | Lysere og mørkere toner af én enkelt farvetone | Rolige brands med én farve |
| Tofarvet gradient | To farver, der glider blødt over i hinanden | Baggrunde og hero-sektioner |

Tofarvet holder farverne adskilt; en gradient blander dem. Begge kan leve i ét brand.

Vil du have blandingen frem for opdelingen, dækker [tofarvede gradienter](https://gradiently.design/da/guide/two-color-gradients) den side, og [monokrome farveskemaer](https://gradiently.design/da/guide/monochromatic-color-scheme) dækker udgaven med én farvetone.

## Tolv tofarvede farvepaletter

Hvert par nedenfor har én farve, der er mørk nok til at sætte tekst på den anden. Kontrasten mellem farvetonerne betyder mindre end kontrasten i lyshed: et par kan være varmt og koldt eller to naboer, så længe den ene er tydeligt mørkere.

- Kobolt og mandarin: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Skovgrøn og rosa: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Blæk og smør: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Kleinblå og papir: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Racergrøn og sennep: `linear-gradient(135deg, #004225 0%, #004225 50%, #e1ad01 50%, #e1ad01 100%)`
- Aubergine og lime: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Plakatrød og creme: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Dyb petrol og fersken: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Chokolade og himmel: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Oksblod og lyserød: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Sort og signalgul: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Dyb violet og syren: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Tolv par, delt på diagonalen. I hvert par kan du bytte om på, hvilken farve der er bunden, hvilket fordobler dine layouts.

Nogle af dem er komplementære, som kobolt og mandarin, der giver maksimal energi. Andre er nære slægtninge, som dyb violet og syren, der føles roligere og mere eksklusivt. [Komplementærfarver](https://gradiently.design/da/guide/complementary-colors) forklarer, hvorfor modsætninger summer, når de mødes.

## Sådan vælger du dine to farver

1. **Vælg den mørke farve først** Den skal bære alle overskrifter og afsnit, så den skal kunne læses på den lyse farve. Marineblå, skovgrøn, aubergine, chokolade og næsten sort virker alle.
2. **Vælg den lyse farve efter stemning** Det er den farve, folk husker. Varme lyse farver som fersken og smør føles venlige; kølige lyse farver som himmel og syren føles stillere.
3. **Tjek kontrasten begge veje** Mørk tekst på den lyse farve skal nå 4,5:1 til brødtekst. Alle par i oversigten ovenfor består den test.
4. **Prøv det i tre formater** Et kvadratisk opslag, en story på 1080×1920 og en A5-flyer. Føles parret stadig som dig i alle tre, så behold det.

## Sådan får du mere spændvidde ud af to farver

To flade farver kan virke tynde, så snart du skal bruge et sekundært panel, en billedtekst eller en deaktiveret knap. Løsningen er ikke en tredje farve. Bland lysere toner af den lyse farve og mørkere toner af den mørke, så hver ny tone stadig hører til parret.

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

Ét par, seks toner. Mandarin på 10 % giver en varm papirbund, og kobolt på 40 % fungerer til sekundær tekst på mørke paneler.

- **Bund:** den lyseste tone, til store flader og sider med tekst.
- **Hovedfarve:** den mørke farve, til overskrifter, brødtekst og massive blokke.
- **Slagkraft:** den lyse farve i fuld styrke, til én form, ét ord eller én pris.
- **Mellemtoner:** en mellemtone af hver, til skillelinjer, billedtekster og fyld i illustrationer.

## Tofarvede fotos med duotone

Det er ved fotos, at tofarvede layouts som regel bryder sammen: et billede i fuld farve smider en tredje, fjerde og femte farve ind på siden. En duotone-behandling omsætter fotoet, så skyggerne bliver din mørke farve og højlysene din lyse. [Duotone-effekten](https://gradiently.design/da/guide/duotone-effect) går mere i dybden; på nettet kan du gøre det med blandingstilstande.

```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 og mandarin. Billedet bliver gråt, multipliceres på den lyse tone, og derefter løfter den mørke tone skyggerne til kobolt.

I Gradiently kan du tone ethvert foto i Markens farver som mono, duotone eller en lavering, så billederne bliver en del af designet i stedet for at kæmpe imod det.

## Idéer til tofarvet design, du kan prøve

Et stående opslag delt i to farveblokke med Åbent til sent om fredagen på den ene side

Et delt layout: den ene farve bærer ordene, den anden bærer stemningen.

Et minimalt stående opslag med Forårsmenu i en mørk farve på en lys bund

Et minimalt layout, hvor den lyse farve er bunden, og den mørke farve klarer al skriften.

- **Koncert- og eventplakater:** to spotfarver er billige at trykke og ser bevidste ud fra den anden side af gaden.
- **Menukort på restauranter:** en mørk farve til retterne, den lyse til papiret, en mellemtone til priserne.
- **Instagram-karruseller:** skift mellem, hvilken farve der er bunden på hvert slide, så det føles rytmisk at swipe.
- **Emballage:** én farve per produktlinje, den anden fælles for hele serien.
- **Præsentationer:** sektionsslides i den mørke farve, indholdsslides på den lyse tone.
- **Visitkort:** én side i hver farve.

### Undgå

- To farver med samme lyshed
- At snige en tredje farve ind til én knap
- Fotos i fuld farve sat ind ubehandlet
- Lys tekst på den lyse farve

### Gør

- Én tydeligt mørk, én tydeligt lys
- Lysere og mørkere toner af parret i stedet
- Duotone på hvert foto i de to farver
- Tjek kontrasten begge veje

Mål kontrasten begge veje med værktøjerne i [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility). Kan du lide disciplinen i to farver, går samme tankegang igen i [minimalistisk grafisk design](https://gradiently.design/da/guide/minimalist-design-ideas) og, med fuld volumen, i [markant grafisk design](https://gradiently.design/da/guide/bold-design-ideas).

## FAQ

### Hvad er tofarvet design?

Et design bygget udelukkende af to farver, som regel én mørk og én lys, hvor toner af de to er tilladt, men ingen tredje farve.

### Hvilke to farver passer godt sammen i et design?

Ethvert par med en tydelig forskel i lyshed, fx kobolt og mandarin, skovgrøn og rosa eller blæk og smør. Den mørkeste skal kunne læses på den lyseste.

### Hvad er forskellen på tofarvet og duotone?

Tofarvet beskriver et helt layout lavet af to farver. Duotone beskriver et foto, der er omsat, så skygger og højlys bliver til to farver.

### Hvordan laver jeg et duotone-billede i CSS?

Gør billedet gråtonet, bland det med `mix-blend-mode: multiply` på den lyse farve, og læg så den mørke farve ovenpå med `mix-blend-mode: lighten`.

### Er tryk i to farver billigere?

Ved serigrafi og offsettryk med spotfarver betyder færre farver som regel færre rammer eller plader, så opgaver i to farver er generelt billigere end fire farver.