37 Innovative Ways to Use Accent Colors with Visual Guide

Accent colors in UI design are like the punctuation marks in a sentence — they emphasize, guide, and create visual interest. These colors play a pivotal role by drawing attention to key elements such as buttons and calls to action, providing visual hierarchy and brand identity.

These colors can be used in absolutely any element, but not overdoing it is the key. While designing your UI, find select elements to which you want to apply accent color. Apply simply or be creative by finding innovative ways for unique implementation.

Scroll through this article to find examples of numerous websites using accent colors brilliantly. Names of reference websites are mentioned in the caption of each image.

1. Header:

Gradient accent color in a header in Canva.com
Header on Freepik.com
Subheading on Stripe.com
Heading in Duolingo.com

2. Text Highlight:

Highlighted text on Freehandapp.com
Text highlight on Stripe.com

3. Left Border Design:


4. Navbar or Tab:

Navbar in Shutterstock.com
Navbar on Thrillophilia.com
Navbar on Zapier.com

5. Links:

Tertiary buttons on Monday.com
Hyperlinks on Coursera.com

6. Buttons:

Primary button in Pexels.com
Search icon button on Shutterstock.com
Icon button on Monday.com
Secondary button on Monday.com
Button with Accent gradient on Airbnb.com

7. Sliders:

Slider on Spotify.com

8. Checkbox:

Checkbox in Stripe.com

9. Radio Button:

Radio button on Mint.com

10. Active Input Fields:

Active input field on Canva.com

11. Mandatory Astrick in Forms:

12. Pagination:

Pagination on Coursera.com

13. Accordian or Expand/Collapse:

Accordian Zapier.com

14. Icons:

Icon in card in Airbnb.com
Icons in Google.com search bar
Icons in Stripe.com

15. Selection Highlights:

Selected currency highlighted on Thrillophilia.com

16. Timeline and Stepper:


17. Badges and Chips:

Badges on Thrillophilia.com
Badges on Headspace.com

18. LIVE indicator:

Live badge on Youtube.com

19. Notification Number:

Notification on Youtube.com

20. Progress Bar:

Page progress bar in Monday.com
Progress bar/Stepper on Duolingo.com

21. Slider Indicators:

Slider arrows on Thrillophilia.com
Slider indicators on Thrillophilia.com
Slider Indicator on Airtable.com

22. Indicator for New:

Another new option on Myntra.com
New badge on Thrillophilia.com

23. Map Location Pins:

Map pins on Airbnb.com

24. Offers and Percentages Off:

25. <HR> Lines:

<HR> underline on Thrillophilia.com

26. Entire Section Color:

Section color in Freepik.com
Section color in Slack.com

27. Bullet points and check marks:

Bullets in Stripe.com

28. Star Rating:

Star rating in Coursera.com
Star rating in Zoom.us
Star rating in Yelp.com

29. Analytics:

Analytics in Monday.com
Bar chart in Coursera.com

30. KPI (Key Performance Indicator):

Accent used for numbers in a KPI in Slack.com
KPIs in Notion.so

31. Illustrations:

Illustration using Accent color in HubSpot.com
Illustration/SVG animation on Duolingo.com

32. Chat Bot:

Chatbot in Asana.com
Chat Bot on Airtable.com

33. Card Design:

Cards have an accent line on the left in Miro.com

34. Social Media:

On Yelp.com

35. Notification Ribbon:

Notification ribbon at the bottom of the page on Yelp.com

36. Testimonial Quotations:


37. Media Player:


Hope this, what must have seemed like an endless list, provided you with inspiration. Happy Designing!

37 Innovative Ways to Use Accent Colors: Visual Guide was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.