What's the "accent color"?

Question

Either my English is not good enough or I just do not get it, but could anybody please explain to me what the "accent color" is and where it is used?

My question originated from the fact that I couldn't find a real description of when and how that color is used. Had I scrolled further down, I'd have found that description, too.

Sorry to interrupt, thanks for pointing me to it everybody.

Updated link: https://material.io/design/color/the-color-system.html#color-theme-creation — Ellen Spertus, Feb 04 '21 at 01:01
I think term "Accent color" originates from the Microsoft world. Seen it used there quite often. — Dzintars, Jun 30 '21 at 20:39

Marcin Orlowski · Accepted Answer · 2019-05-13T07:10:20.210

65

You got good example in Material Design docs -> your palettes are shown in section "UI color application" - with blue colors being primary and pink being used for accents.

Here is what it means in practice (also FAB would most likely use pink background color)

edited May 13 '19 at 07:10

answered Jun 24 '15 at 08:17

Marcin Orlowski

72,056
11
123
141

1

Oh man - should have scrolled down a bit. I was already reading the page you linked... – Thorsten Dittmar Jun 24 '15 at 08:31
Excuse me, and where is this accent color used by default? – Henry Nov 23 '18 at 08:31
I still don't get it. Would anyone care to tell me, where I can use color="accent" (I know it will work with mat-button, but not with div elements). And what are other values I can use instead of accent? Only primary and secondary? – Jens Mander Sep 01 '19 at 00:37
1

You can think of accent = highlighted. For example, active tab, focused input, etc. It is a color used to draw attention. – David Lin Jul 06 '20 at 13:46
Links broken, not sure where the new ones are (or if this pictured UI is any more available) – Joel Peltonen Feb 14 '21 at 15:33

score 30 · Answer 2 · answered Jun 24 '15 at 08:17

Quoting from http://android-developers.blogspot.se/2014/08/material-design-in-2014-google-io-app.html:

In material design, UI element color palettes generally consist of one primary and one accent color.

The accent color is used more subtly throughout the app, to call attention to key elements. The resulting juxtaposition of a tamer primary color and a brighter accent, gives apps a bold, colorful look without overwhelming the app’s actual content.

Yogesh Umesh Vaity · Answer 3 · 2020-01-10T15:12:22.027

18

Accent color is also known as Secondary color.

It is used for:

Buttons
Floating action buttons
Selection controls, like sliders and switches
Highlighting selected text
Progress bars
Links and headlines

edited Jan 10 '20 at 15:12

answered Sep 15 '19 at 15:32

Yogesh Umesh Vaity

41,009
21
145
105

What's the "accent color"?

3 Answers3

Linked