BrandColors

‘BrandColors’ is a useful One Pager providing official color palettes to all the world’s popular brands. The execution is very slick with a fast search filter and a multi-format download option.

One of the things I knew I wanted to do from the start of the project was make adding and maintaining colors super crazy simple. If the process was complex, time-consuming or boring, I knew I would never add enough colors to make it much of resource.

My solution was simple โ€” a static HTML file with each color represented in the markup as a <li>. Using the power of the HTML5 data attribute, I added data-brand and data-hex attributes to each of the <li>s. Then, using jQuery, I appended <h2>s for the brand names and <span>s for the color values and filled them with the data-brand and data-hex values. I also used jQuery to set the background color of the <li> to the value of data-hex. The copy to clipboard functionality was easy as pie with the zClip jQuery plugin.

As result, adding new colors was as simple as adding a new <li> to the page, setting the proper values in the data attributes, and publishing.

Read more about building BrandColors on Galen's blog.
Categories Informational
Inspiration straight to your inbox
Introducing
Our new Redux Newsletter for inspiration straight to your inbox.
Email Inspiration? Introducing Email Love ๐Ÿš€