Kortversjonen
- En aksentfarge er en kontrasterende farge brukt i små mengder for å trekke oppmerksomheten mot det viktigste elementet, som en knapp, en pris eller et ord i en overskrift.
- I 60 30 10-regelen er aksenten de ti prosentene, og det er sjeldenheten som gjør den effektiv.
- En god aksent skiller seg fra basisfargene på minst én tydelig måte: fargetone, lyshet eller metning.
- En aksent som brukes til mange forskjellige oppgaver, slutter å signalisere noe, så gi den én hovedrolle.
- I CSS farger egenskapen accent-color innebygde avkrysningsbokser, radioknapper, glidebrytere og fremdriftsindikatorer.
På denne siden
En aksentfarge er den lille, kontrasterende fargen i en palett som peker på det som betyr noe: knappen du skal trykke på, prisen, det ene ordet i en overskrift. For å velge en som gjør jobben starter du fra basisfargene og velger noe som tydelig skiller seg fra dem i fargetone, lyshet eller metning, og så bruker du den sparsomt. I den kjente 60 30 10-fordelingen er den de ti prosentene. Jo sjeldnere den dukker opp, desto mer betyr hver gang den gjør det.
Hva en aksentfarge er til for
Det meste av et design er basis- og støttefarger: bakgrunner, paneler, tekst. Aksenten er unntaket som forteller øyet hvor det skal gå. Det gjør den til den mest funksjonelle fargen du har. På et nettsted markerer den hovedhandlingen; på en plakat lander den på datoen; i en merkevare blir den detaljen folk husker, et farget punktum eller én enkelt klar stripe.
60 30 10-regelen gir proporsjonene: rundt seksti prosent dominerende farge, tretti prosent sekundærfarge, ti prosent aksent. Se på de ti som et tak, ikke et mål. Mange av de beste oppsettene bruker langt mindre.
I et innlegg som dette hører aksenten hjemme på ett sted, for eksempel den lille etiketten over overskriften, og ingen andre steder.
Samme prinsipp i et listeinnlegg: hvis aksenten dukker opp, markerer den bare overskriften.
Slik velger du en aksentfarge
Kontrast er hele jobben. Se på basis- og sekundærfargene dine og spør hva de har til felles, og gjør så aksenten ulik dem på minst én tydelig måte.
- 1
Kontrast i fargetone
Velg fra motsatt side av fargesirkelen. Paletter i marine og petrol tar varme aksenter som korall eller rav; varme paletter tar blått eller grønt. Komplementærfarger er det klassiske valget.
- 2
Kontrast i lyshet
På en mørk base, en lys aksent; på en blek base, en dyp en. En dempet palett av gråtoner kan like gjerne ta en svart aksent som en klar en.
- 3
Kontrast i metning
Blant myke, støvete farger leses én mettet farge som aksenten, selv om den har samme fargetone. En leirepalett med en ren sinoberrød aksent er et godt eksempel.
- 4
Test den i riktig størrelse
En aksent er som regel liten. Sjekk den som knappetekst eller en tynn understrek, ikke som en stor fargeprøve, fordi små fargeflater ser mørkere og mattere ut.
Hvor du skal bruke aksenten, og hvor du ikke skal
Hold den unna
Hold den unna
Hold den unna
Hold den unna
Hold den unna
Klare aksenter som lime, gult og mint fungerer ofte dårlig som tekst på hvitt. Bruk dem som fyll med mørk tekst over, og sjekk hver kombinasjon mot retningslinjene for fargekontrast: minst 4,5:1 for brødtekst og 3:1 for stor tekst og grensesnittelementer.
En rask gjennomgang hjelper hvis aksenten har sneket seg inn overalt. Ta et skjermbilde av forsiden eller en uke med innlegg, gjør det litt uskarpt og se hvor aksenten dukker opp. Lander øyet på tre eller fire steder samtidig, degraderer du alle unntatt det viktigste til en sekundærfarge. Lander det ingen steder, ligger aksenten sannsynligvis for nær basen og trenger mer kontrast i fargetone eller lyshet.
CSS-egenskapen accent-color
På nettet farger accent-color innebygde skjemakontroller på én linje: avkrysningsbokser, radioknapper, glidebrytere og fremdriftsindikatorer. Den støttes i gjeldende versjoner av de store nettleserne; MDN sin referanse har detaljene.
: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 */
}Nettlesere kan justere fargen på haken eller håndtaket inne i en kontroll for å holde den lesbar mot aksenten din, så test både lyse og mørke aksenter. For resten av fargene på et nettsted, se fargeskjema for nettsider.
Aksenter på gradienter og fotografier
På en rik bakgrunn har en aksent mer å konkurrere med. Hent den fra utenfor bakgrunnens fargefamilie: en varm aksent på en kjølig gradient, eller nesten hvitt på en fargerik en. I Gradiently velger Auto-tekstfarge lys eller mørk tekst for hver linje fra Markens egen palett, så ordene forblir lesbare mens bakgrunnen beveger seg, og aksenten din trenger bare å gjøre sin ene jobb. For mer om paletter bygget rundt én sterk farge, se fargepaletter for teknologi.
Spørsmål folk stiller
Hva er en aksentfarge i design?
En kontrasterende farge brukt i små mengder for å trekke oppmerksomheten mot det viktigste elementet, som en knapp, et nøkkelord eller en pris.
Hvor mye av et design bør være aksentfarge?
Rundt ti prosent på det meste, etter 60 30 10-regelen. Mange sterke design bruker mye mindre.
Hvordan velger jeg en aksentfarge til paletten min?
La den skille seg tydelig fra basisfargene i fargetone, lyshet eller metning, og test den i den lille størrelsen den faktisk skal vises i.
Hva gjør accent-color i CSS?
Den bestemmer fargen på innebygde avkrysningsbokser, radioknapper, glidebrytere og fremdriftsindikatorer, så skjemakontroller matcher merkevaren uten egen styling.
Kan en merkevare ha mer enn én aksentfarge?
Ja, men hver bør ha en egen oppgave, for eksempel én for handlinger og én for fremhevinger. To aksenter som gjør samme jobb, opphever hverandre.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår