# Accentfärg: så väljer du den som gör jobbet

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

Accenten är den minsta delen av en palett och den del folk lägger märke till först. Så väljer du en som sticker ut från din bas, håller den sällsynt nog att fungera och sätter den i CSS.

## The short version

- En accentfärg är en kontrasterande färg som används i små mängder för att dra uppmärksamhet till det viktigaste elementet, som en knapp, ett pris eller ett ord i en rubrik.
- I 60-30-10-regeln är accenten de tio procenten, och dess sällsynthet är det som gör den effektiv.
- En bra accent skiljer sig från basfärgerna på minst ett tydligt sätt: nyans, ljushet eller mättnad.
- En accent som används till många olika uppgifter slutar signalera något, så ge den en huvudroll.
- I CSS färgar egenskapen accent-color inbyggda kryssrutor, radioknappar, reglage och förloppsindikatorer.

En **accentfärg** är den lilla, kontrasterande färgen i en palett som pekar på det som spelar roll: knappen att trycka på, priset, det enda ordet i en rubrik. För att välja en som gör jobbet utgår du från dina basfärger och väljer något som tydligt skiljer sig från dem i nyans, ljushet eller mättnad, och använder den sedan sparsamt. I den välkända 60-30-10-fördelningen är den de tio procenten. Ju sällan den dyker upp, desto mer betyder varje gång.

## Vad en accentfärg är till för

Det mesta av en design är bas- och stödfärg: bakgrunder, paneler, text. Accenten är undantaget som talar om för ögat vart det ska gå. Det gör den till den mest funktionella färgen du har. På en webbplats markerar den huvudåtgärden; på en affisch hamnar den på datumet; i ett varumärke blir den detaljen folk minns, en färgad punkt eller ett enda klart streck.

[60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) ger proportionerna: ungefär sextio procent dominant färg, trettio procent sekundär, tio procent accent. Behandla de tio som ett tak, inte ett mål. Många av de bästa layouterna använder betydligt mindre.

Ett stående inlägg som meddelar sen öppning på fredagar, med en liten etikett ovanför rubriken

I ett inlägg som det här hör accenten hemma på ett ställe, som den lilla etiketten ovanför rubriken, och ingen annanstans.

Ett stående listinlägg med titeln Tre saker att ta med inför en workshop

Samma princip i ett listinlägg: om accenten finns med, markerar den bara rubriken.

## Så väljer du en accentfärg

Kontrast är hela jobbet. Titta på dina bas- och sekundärfärger och fråga hur de liknar varandra, och gör sedan accenten olik dem på minst ett tydligt sätt.

1. **Nyanskontrast** Välj från motsatt sida av [färghjulet](https://gradiently.design/sv/guide/color-wheel). Marinblå och turkosa paletter tar varma accenter som korall eller bärnsten; varma paletter tar blått eller grönt. [Komplementfärger](https://gradiently.design/sv/guide/complementary-colors) är det klassiska valet.
2. **Ljushetskontrast** På en mörk bas en ljus accent; på en blek bas en djup. En dämpad palett av grått kan lika gärna ta en svart accent som en klar.
3. **Mättnadskontrast** Bland mjuka, dammiga färger läses en mättad färg som accent även om den delar deras nyans. En lerpalett med en ren cinnoberröd accent är ett bra exempel.
4. **Testa den i sin verkliga storlek** En accent är oftast liten. Kontrollera den som en knapptext eller ett tunt understrykningsstreck, inte som en stor färgruta, eftersom små färgytor ser mörkare och dovare ut.

- Marinblå bas, korallaccent: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Sandbas, djupblå accent: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Skogsbas, saffransaccent: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Lila-grå bas, röd accent: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Svart bas, limeaccent: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Rodnadsbas, kolgrå accent: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Sex paletter ritade med ungefär 70, 20 och 10 procent. Varje accent skiljer sig från sin bas i nyans, ljushet eller båda.

## Var du använder accenten, och var inte

| Använd den till | Håll den borta från |
| --- | --- |
| Huvudknappen eller uppmaningen till handling | Sekundära knappar och avbryt-knappar |
| Ett nyckelord, pris eller datum | Hela stycken med brödtext |
| Aktiva lägen: den aktuella fliken, ett valt objekt | Varje ikon i ett verktygsfält |
| Små varumärkesdetaljer: ett streck, en punkt, ett märke | Stora bakgrunder bakom lång text |
| Markeringar i ett diagram: den enda serien som spelar roll | Alla serier i ett diagram på en gång |

En accent med en huvuduppgift behåller sin betydelse. När den finns på allt sticker ingenting ut.

> **En accent är ingen felfärg** Om din accent är röd, tänk på hur den ser ut bredvid felmeddelanden. Användare kan läsa en röd knapp som förstörande. Vissa varumärken med röda accenter använder en annan röd för fel, eller visar fel med en ikon och text utöver färg.

Klara accenter som lime, gult och mynta fungerar ofta dåligt som text på vitt. Använd dem som ytor med mörk text ovanpå, och kontrollera varje par mot riktlinjerna för [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility): minst 4,5:1 för brödtext och 3:1 för stor text och delar av gränssnittet.

En snabb genomgång hjälper om accenten har smugit sig in överallt. Ta en skärmdump av din startsida eller en veckas inlägg, gör den lätt suddig och titta var accenten dyker upp. Om blicken hamnar på tre eller fyra ställen samtidigt, nedgradera alla utom det viktigaste till en sekundär färg. Om den inte hamnar på något är accenten förmodligen för nära basen och behöver mer kontrast i nyans eller ljushet.

## CSS-egenskapen accent-color

På webben färgar `accent-color` inbyggda formulärkontroller på en rad: kryssrutor, radioknappar, reglage och förloppsindikatorer. Den stöds i aktuella versioner av de stora webbläsarna; [MDN:s referens](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) har detaljerna.

```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 */
}
```

En accenttoken som används för formulärkontroller och huvudknappen, med en djupare nyans för textlänkar så att de klarar kontrasten på vitt.

Webbläsare kan justera färgen på bocken eller reglaget inuti en kontroll för att hålla den läsbar mot din accent, så testa både ljusa och mörka accenter. För resten av en webbplats färger, se [färgschema för webbplats](https://gradiently.design/sv/guide/website-color-scheme).

## Accenter på gradienter och fotografier

På en rik bakgrund har en accent mer att konkurrera med. Hämta den utanför bakgrundens färgfamilj: en varm accent på en kall gradient, eller nästan vitt på en färgstark. I Gradiently väljer Auto-bläck ljus eller mörk text för varje rad utifrån Markens egen palett, så orden förblir läsbara medan bakgrunden rör sig, och din accent behöver bara göra sitt enda jobb. För mer om paletter byggda kring en enda stark färg, se [paletter för teknikvarumärken](https://gradiently.design/sv/guide/tech-color-palettes).

## FAQ

### Vad är en accentfärg i design?

En kontrasterande färg som används i små mängder för att dra uppmärksamhet till det viktigaste elementet, som en knapp, ett nyckelord eller ett pris.

### Hur stor del av en design ska vara accentfärg?

Högst runt tio procent, enligt 60-30-10-regeln. Många starka designer använder mycket mindre.

### Hur väljer jag en accentfärg till min palett?

Låt den tydligt skilja sig från dina basfärger i nyans, ljushet eller mättnad, och testa den sedan i den lilla storlek den faktiskt kommer att synas i.

### Vad gör accent-color i CSS?

Den bestämmer färgen på inbyggda kryssrutor, radioknappar, reglage och förloppsindikatorer, så att formulärkontroller matchar ditt varumärke utan egen formgivning.

### Kan ett varumärke ha mer än en accentfärg?

Det kan, men varje accent bör ha en tydlig uppgift, som en för åtgärder och en för markeringar. Två accenter med samma uppgift tar ut varandra.