Galen Gidman

Front-end and WordPress developer

Building BrandColors

A couple of weeks ago I launched BrandColors, a side-project of mine that is best described as a collection of major online brand hexadecimal color codes. The project has received a lot of positive attention, so I thought I’d give you guys a quick rundown on the idea and the build process. In typically me fashion, this is happening far too late, but as they say, better late than never.

The Idea

Before I tell you about how I built it, I want to throw out a little disclaimer — the idea for a site like this was not mine. Actually, I’d seen a page like this that I really liked but forgot to bookmark. I spent nearly a half-hour looking for it several days later and after I still could not find it, I said, “To heck with this, I’ll just build my own.”

Oddly enough, it would take me building my own to find the original Color Reference by @chris_frees. Props to him for coming up with the idea and then not getting mad at me when I built something like it.

The Build

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.

I know this was a pretty brief write-up, but I wanted to publish it anyway. I hope you enjoy the tool!

7 Comments

Leave a Reply to Tyler Cancel reply

Your email address will not be published. Required fields are marked *