Kortversionen
- 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.
På den här sidan
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 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.
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.
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. Marinblå och turkosa paletter tar varma accenter som korall eller bärnsten; varma paletter tar blått eller grönt. Komplementfärger ä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.
Var du använder accenten, och var inte
Håll den borta från
Håll den borta från
Håll den borta från
Håll den borta från
Håll den borta från
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: 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 har detaljerna.
: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 */
}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.
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.
Vanliga frågor
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.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil