# Accent color

> The accent color is the one color an app uses for what can be tapped and what is selected. iOS calls it the tint and Material 3 calls it the primary role.

Page: https://www.appetiteui.com/glossary/accent-color. Accent color: iOS tint vs Material 3 primary. Also called Tint color, Primary color, Brand color.

## Why it matters

One accent color makes interactive things findable. Used for decoration as well, it stops meaning anything.

It has to hold contrast in light, dark and increased-contrast contexts, which Apple lists as separate cases to test.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Tint color, system accent | Primary color role | brand/base |
| System default | #007AFF, systemBlue | #6750A4, baseline primary | See below |
| Appetite UI brand | #155DFC through iOS/tintColor | #155DFC through M3/sys/color/primary | See below |

## In Appetite UI

The Platform bridge maps iOS/tintColor and M3/sys/color/primary to brand/base, so one brand color serves both, and the System mode returns the platform defaults. brand/base is #155DFC in light and #2B7FFF in dark.

## Example

A brand blue is set once; buttons, links, the selected tab and switches all follow it, and switching the frame to System mode shows iOS blue and Material purple for comparison.

## Common mistakes

- More than one accent for interactive things.
- Using the accent for decoration and for warnings.
- Skipping the dark variant. Lighten the step so contrast holds.
- Checking only the light screens.

## Questions

### What is the accent color on iOS?

The tint, which controls such as buttons, links and selected items take. The system default is systemBlue.

### What is the Material 3 primary color?

The primary role is the main brand color of the scheme. The baseline Material 3 scheme uses #6750A4.

## Sources

1. [Apple Human Interface Guidelines: Color](https://developer.apple.com/design/human-interface-guidelines/color)
2. [Material Design 3: Color roles](https://m3.material.io/styles/color/roles)

## Related

- Docs: [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge)
- Docs: [Colors](https://www.appetiteui.com/docs/colors)
- Article: [How to rebrand a mobile app in Figma with variables](https://www.appetiteui.com/blog/rebrand-mobile-app-figma-variables)
- Glossary: [Semantic tokens](https://www.appetiteui.com/glossary/semantic-tokens)
- Glossary: [Dark mode](https://www.appetiteui.com/glossary/dark-mode)
- Glossary: [Design tokens](https://www.appetiteui.com/glossary/design-tokens)