# Accentfarve: sådan vælger du den, der gør arbejdet

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

Accenten er den mindste del af en palet og den del, folk lægger mærke til først. Sådan vælger du en, der træder frem fra din basis, holder den sjælden nok til at virke og sætter den i CSS.

## The short version

- En accentfarve er en kontrasterende farve, der bruges i små mængder for at fremhæve det vigtigste element, som en knap, en pris eller et ord i en overskrift.
- I 60-30-10-reglen er accenten de ti procent, og det er dens sjældenhed, der gør den effektiv.
- En god accent adskiller sig fra basisfarverne på mindst én kraftig måde: nuance, lysstyrke eller mætning.
- En accent, der bruges til mange forskellige opgaver, holder op med at signalere noget, så giv den én hovedrolle.
- I CSS farver egenskaben accent-color indbyggede afkrydsningsfelter, radioknapper, skydere og statuslinjer.

En **accentfarve** er den lille, kontrasterende farve i en palet, der peger på det, der betyder noget: knappen, du skal trykke på, prisen, det ene ord i en overskrift. For at vælge en, der gør arbejdet, skal du tage udgangspunkt i dine basisfarver og vælge noget, der tydeligt adskiller sig fra dem i nuance, lysstyrke eller mætning, og så bruge den sparsomt. I den velkendte 60-30-10-fordeling er den de ti procent. Jo sjældnere den optræder, desto mere betyder hver gang.

## Hvad en accentfarve er til

Det meste af et design er basis- og støttefarver: baggrunde, paneler, tekst. Accenten er undtagelsen, der fortæller øjet, hvor det skal hen. Det gør den til den mest funktionelle farve, du ejer. På et website markerer den den primære handling; på en plakat lander den på datoen; i et brand bliver den den detalje, folk husker, et farvet punktum eller en enkelt lys stribe.

[60-30-10-reglen](https://gradiently.design/da/guide/60-30-10-rule) giver proportionerne: cirka tres procent dominerende farve, tredive procent sekundær og ti procent accent. Se de ti som et loft, ikke et mål. Mange af de bedste layouts bruger langt mindre.

Et opslag i stående format, der annoncerer sen åbning om fredagen, med en lille etiket over overskriften

I et opslag som dette hører accenten hjemme ét sted, som den lille etiket over overskriften, og ingen andre steder.

Et listeopslag i stående format med titlen Tre ting at tage med til en workshop

Det samme princip i et listeopslag: hvis accenten optræder, markerer den kun overskriften.

## Sådan vælger du en accentfarve

Kontrast er hele jobbet. Se på dine basis- og sekundærfarver og spørg, hvordan de ligner hinanden, og gør så accenten ulig dem på mindst én kraftig måde.

1. **Kontrast i nuance** Vælg fra den modsatte side af [farvehjulet](https://gradiently.design/da/guide/color-wheel). Palet i marine og turkis tåler varme accenter som koral eller rav; varme paletter tåler blå eller grøn. [Komplementærfarver](https://gradiently.design/da/guide/complementary-colors) er det klassiske valg.
2. **Kontrast i lysstyrke** På en mørk basis en lys accent; på en bleg basis en dyb. En dæmpet palet af grå kan lige så godt tåle en sort accent som en klar.
3. **Kontrast i mætning** Blandt bløde, støvede farver læses én mættet farve som accenten, selv om den deler deres nuance. En lerpalet med en ren cinnoberaccent er et godt eksempel.
4. **Test den i dens virkelige størrelse** En accent er som regel lille. Tjek den som en knaptekst eller en tynd understregning, ikke som en stor farveprøve, fordi små farveflader ser mørkere og mattere ud.

- Marinebasis, koralaccent: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Sandbasis, dybblå accent: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Skovbasis, safranaccent: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Lilla-grå basis, rød accent: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Sort basis, limeaccent: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Rosa basis, kulgrå accent: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Seks paletter tegnet med cirka 70, 20 og 10 procent. Hver accent adskiller sig fra sin basis i nuance, lysstyrke eller begge dele.

## Hvor du bruger accenten, og hvor ikke

| Brug den til | Hold den væk fra |
| --- | --- |
| Den primære knap eller call to action | Sekundære knapper og fortryd-knapper |
| Ét nøgleord, én pris eller én dato | Hele afsnit med brødtekst |
| Aktive tilstande: den aktuelle fane, et valgt element | Alle ikoner i en værktøjslinje |
| Små brandingdetaljer: en streg, en prik, et klistermærke | Store baggrunde bag lang tekst |
| Fremhævelser i et diagram: den ene serie, der betyder noget | Alle serier i et diagram på én gang |

En accent med ét hovedjob bevarer sin mening. Når den sidder på alt, træder intet frem.

> **En accent er ikke en fejlfarve** Hvis din accent er rød, så tænk over, hvordan den sidder ved siden af fejlmeddelelser. Brugere kan læse en rød knap som destruktiv. Nogle brands med røde accenter bruger en anden rød til fejl eller viser fejl med et ikon og tekst ud over farven.

Klare accenter som lime, gul og mint består ofte ikke som tekst på hvid. Brug dem som fyldfarver med mørk tekst ovenpå, og tjek hvert par mod retningslinjerne for [farvekontrast](https://gradiently.design/da/guide/color-contrast-accessibility): mindst 4,5:1 til brødtekst og 3:1 til stor tekst og interfacedele.

Et hurtigt eftersyn hjælper, hvis accenten har bredt sig overalt. Tag et skærmbillede af din forside eller en uges opslag, slør det lidt, og se, hvor accenten optræder. Lander dit øje på tre eller fire steder på én gang, så nedgradér alle på nær det vigtigste til en sekundær farve. Lander det ingen steder, ligger accenten sandsynligvis for tæt på basis og har brug for mere kontrast i nuance eller lysstyrke.

## CSS-egenskaben accent-color

På nettet farver `accent-color` indbyggede formularfelter i én linje: afkrydsningsfelter, radioknapper, skydere og statuslinjer. Den understøttes i de nuværende versioner af de store browsere; [MDN's reference](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) har detaljerne.

```css
:root {
  --accent: #d42a35;
}

/* Native checkboxes, radios, sliders and progress bars */
body {
  accent-color: var(--accent);
}

/* The same accent on your own components */
.button-primary {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: #b3202a; /* a deeper shade for text links on white */
}
```

Ét accenttoken brugt til formularfelter og den primære knap, med en dybere nuance til tekstlinks, så de består kontrasten på hvid.

Browsere kan justere farven på flueben eller håndtag inde i et felt, så det forbliver læseligt mod din accent, så test både lyse og mørke accenter. For resten af et sites farver, se [website-farveskema](https://gradiently.design/da/guide/website-color-scheme).

## Accenter på gradienter og fotografier

På en rig baggrund har en accent mere at konkurrere med. Hent den uden for baggrundens farvefamilie: en varm accent på en kold gradient eller en næsten hvid på en farverig. I Gradiently vælger Automatisk tekstfarve lys eller mørk skrift til hver linje ud fra Markens egen palet, så ordene forbliver læselige, når baggrunden bevæger sig, og din accent kun har sit ene job at gøre. For mere om paletter bygget omkring én stærk farve, se [tech-farvepaletter](https://gradiently.design/da/guide/tech-color-palettes).

## FAQ

### Hvad er en accentfarve i design?

En kontrasterende farve, der bruges i små mængder for at fremhæve det vigtigste element, som en knap, et nøgleord eller en pris.

### Hvor stor en del af et design skal være accentfarve?

Højst omkring ti procent efter 60-30-10-reglen. Mange stærke designs bruger langt mindre.

### Hvordan vælger jeg en accentfarve til min palet?

Lad den adskille sig tydeligt fra dine basisfarver i nuance, lysstyrke eller mætning, og test den så i den lille størrelse, den faktisk vil optræde i.

### Hvad gør accent-color i CSS?

Den bestemmer farven på indbyggede afkrydsningsfelter, radioknapper, skydere og statuslinjer, så formularfelter matcher dit brand uden tilpasset styling.

### Kan et brand have mere end én accentfarve?

Ja, men hver skal have et særskilt job, som én til handlinger og én til fremhævelser. To accenter med samme job ophæver hinanden.