Sherwin Williams in JavaScript

Our previous post on using a custom n-gram filter to look at colors proved to be pretty popular. I thought it would be fun to explore colors a little bit more. This time we're going to be using CSS variables to bring Sherwin Williams paint colors to the web. Sherwin Williams makes some great paint and has some great color names that really bring out the character in each color Wow that's a bit dramatic. I admit it's possible that I did too many home rennovation projects in 2020.

In this post we're going to show you how we built a JavaScript library, published it on npm, and then used it to write this post. And of course we'll give you an interactive demo (or you can click here to skip to it).

If you just want to checkout the library, here's a link to the github repository. Or run:

A Quick Look at Sherwin Williams#

Sherwin Williams has long been a leader in the American paint industry. Boasting over 1500 colors in the catalog, it looks like their poised to continue thier streak of dominance.

Little did I know how impressive of a business Sherwin Williams is. Take a look at their returns against the S&P 500 since 1981. SHW has returned at 65,0590%. Granted it's over the past 40 years, but still! Incredible returns. That's up there with the likes of Apple and Microsoft. Pretty impressive.

Our dataset#

Lucky for us, Sherwin Williams publishes the names, hexes, and some other data about all of the paint colors they sell. You can find a link to download the data files here. It's pretty cool, they have lots of different file formats that you can use—everything from JPGS, PhotoShop, PDFs, Excel files. You name it. For our use case we're going to be using plain-old Excel.

From this data file we'll create a data file called colors.json. To do this, I copied the color name and the corresponding hex from the Excel file into a file called "colors.txt". Next I ran a little awk script to generate some JSON. This generated a JSON row for each color. So I had to go back in and edit the resulting file by hand to turn it into a list--maybe not sexy but it works!

colors.txt

The awk script to generate our near-there colors.json

The final colors.json.

CSS Variables#

Next up is to convert these colors into CSS variables because who doesn't want to have thousands of carefully named colors at their fingertips. CSS variables aren't particularly new but they're still not widly used. It's a pretty cool concept that you can read more about in this post on the Mozilla Blog.

Defining a color variable in CSS is pretty easy. In the :root psuedo-class of your main stylesheet, simply define variable names like this:

It's that simple. We can now use the "Billard Green" color like this:

The rest is rinse and repeat to get the rest of the *gulp* 1500 unique Sherwin Williams colors.

Usage in JavaScript#

Using these variables in a JavaScript project is pretty easy. If you're using any flavor modern JS transpliler/framework/starter kit (parcel, create react app, babel, webpack, snowpack, etc.) then you should be able to just import your CSS variables at the top of the index file in your application. It should look something like this:

However it's not super fun to have to maintain or copy and paste a big list of variables. So to make matters easier I've published the Sherwin Williams colors to npm. It has no dependencies and clocks in at 129 kB. Hopefully this meets your selection criteria. We'll have a follow up post on making your own npm package for CSS.

Now it's even easier to import our Sherwin Williams colors:

Let's take them for a test spin. I put together a Swatch component to test things out.

Billiard Green

Alexandrite

Bagel

Blue Nile

Looking good! Now let's take a look at the rest of the Sherwin Williams color palette.

Full Demo#

Ok so now let's expand this to the rest of the color palette. I'm going to export an array of all of the colors in the dataset. It'll be exposed as the default export from the sherwin-williams package. Here we'll loop over the array and generate a Swatch for each color. We should end up with a big grid with a sample of every color.

To make it easier to read the color names, I've added a little snippet to determine whether to display the color's name in black or white.

In our demo code we're also going to include a text box that let's you filter based on color name--there are a lot of colors (over 40 containing the word "gold" alone). To do this we're going to use the TextField component from material-ui along with the useState React hook.

Before you go#

Hopefully you found this post fun (and maybe even helpful!). If you're interested in learning more about our product, User Bug Report, subscribe to our newsletter or visit our website: https://www.userbugreport.com/.