# Tofarget design: tydelige uttrykk med bare to farger

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

To velvalgte farger kan bære en hel merkevare: plakater, menyer, innlegg og bilder. Her velger du paret, får mer spenn fra det og unngår et flatt uttrykk.

## The short version

- Tofarget design bygger alle elementer av to farger, vanligvis én mørk og én lys, uten andre farger enn nyanser av de to.
- Paret trenger tydelig forskjell i lyshet, så tekst og former er leselige uansett hvilken farge som ligger oppå.
- Lyse og mørke nyanser av de to fargene gir en tofarget palett nok spenn til bakgrunner, felt og sekundærtekst.
- Duotone-bilder gjør skyggene i et bilde til den mørke fargen og høylysene til den lyse, så fotografier passer et tofarget oppsett.
- Tofargede oppsett skiller seg ut i travle strømmer fordi de virker gjennomtenkte, og de kan trykkes rimelig med to spotfarger.

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

| Begrep | Hva det betyr | Vanlig bruk |
| --- | --- | --- |
| Tofarget | Et helt design laget av to ulike farger | Plakater, menyer, emballasje og merkevaresystemer |
| Duotone | Et bilde omgjort til to farger, én til skygger og den andre til høylys | Fotografi i et tofarget oppsett |
| Monokromt | Bare lyse og mørke nyanser av én fargetone | Rolige merkevarer med én farge |
| Gradient med to farger | To farger blandet mykt i hverandre | Bakgrunner og toppfelt |

Tofarget design holder fargene adskilt; en gradient blander dem. Begge kan brukes i én merkevare.

Hvis du ønsker blandingen fremfor todelingen, dekker [gradienter med to farger](https://gradiently.design/nb/guide/two-color-gradients) den siden. [Monokromatiske fargeskjemaer](https://gradiently.design/nb/guide/monochromatic-color-scheme) 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.

- Kobolt og mandarin: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Skoggrønn og pudderrosa: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Blekk og smørgul: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Klein-blå og papir: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Racinggrønn 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 krem: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Dyp blågrønn og fersken: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Sjokolade og himmelblå: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Okseblod og lys rosa: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Svart og varselgul: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Dyp fiolett og syrin: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Tolv par, delt på skrå. I hvert par kan du bytte hvilken farge som er bakgrunn, og dermed doble oppsettene.

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](https://gradiently.design/nb/guide/complementary-colors) forklarer hvorfor motsetninger vibrerer når de møtes.

## Slik velger du de to fargene

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

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

Ett par, seks toner. Mandarin ved 10 % gir en varm papirbakgrunn, og kobolt ved 40 % fungerer til sekundærtekst på mørke felt.

- **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](https://gradiently.design/nb/guide/duotone-effect) går dypere; på nettet kan du gjøre det med blandingsmoduser.

```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. Bildet blir grått, multipliseres over den lyse tonen, og deretter løfter den mørke tonen skyggene til kobolt.

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

Et stående innlegg delt i to fargefelt, med Åpent sent på fredager på den ene siden

Et todelt oppsett: én farge bærer ordene, den andre stemningen.

Et minimalistisk stående innlegg med teksten Vårmeny i mørk farge på lys bakgrunn

Et minimalistisk oppsett der den lyse fargen er bakgrunnen og den mørke brukes til all tekst.

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

### Unngå

- To farger med omtrent lik lyshet
- Å snike inn en tredje farge til én knapp
- Fargebilder satt inn uten behandling
- Lys tekst på den lyse fargen

### Gjør dette

- Velg én tydelig mørk og én tydelig lys
- Bruk lyse og mørke nyanser av paret i stedet
- Gjør alle bilder til duotone i de to fargene
- Sjekk kontrasten begge veier

Mål kontrasten begge veier med verktøyene i [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility). Liker du disiplinen i to farger, går samme tankegang igjen i [minimalistisk grafisk design](https://gradiently.design/nb/guide/minimalist-design-ideas) og med full kraft i [kraftfullt grafisk design](https://gradiently.design/nb/guide/bold-design-ideas).

## FAQ

### Hva er tofarget design?

Et design bygd helt av to farger, vanligvis én mørk og én lys, der nyanser av de to er tillatt, men ingen tredje farge.

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

Alle par med tydelig forskjell i lyshet, som kobolt og mandarin, skoggrønt og pudderrosa eller blekk og smørgult. Den mørke bør være leselig på den lyse.

### Hva er forskjellen på tofarget og duotone?

Tofarget beskriver et helt oppsett laget av to farger. Duotone beskriver et bilde der skygger og høylys er gjort om til to farger.

### Hvordan lager jeg et duotone-bilde i CSS?

Gjør bildet grått, bland det med `mix-blend-mode: multiply` over den lyse fargen, og legg deretter den mørke fargen over med `mix-blend-mode: lighten`.

### Er trykk med to farger rimeligere?

Ved silketrykk og offset med spotfarger betyr færre trykkfarger vanligvis færre duker eller plater, så tofarget trykk er som regel rimeligere enn fullfargetrykk.