Learn
Color for UI
Brand Color

Each company, whether it be an internet startup, a sports team, or a multinational clothing label, has a defined brand color. For instance, Facebook has its iconic blue, as does Twitter, while Coca-Cola features red as its primary color.

Just think about all of the brands you know and love and colors you associate with them. There’s even a site, called BrandColors, dedicated to showing those for various companies.

When working on a design, it’s essential to select and apply a brand color. This is a hue that should dominate your color palette. This brand color will account for roughly 60% of the color used on your site, and helps build a bridge between your product and the user’s recognition of it.

Instructions

1.

Now that we have an idea of brand colors and how they can really bring our site to life, let’s integrate some of this brand’s colors into our site.

In the styles.css file, find the CSS selector .site-nav-link.active and replace the property color from #2A2A2A to #FF6600.

This selector is at the bottom of section 4, Modules Styles, right before the footer styles.

Folder Icon

Sign up to start coding

Already have an account?