‘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.
