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