Resource: “Color” Tag Printable Cheat Sheet

Lately, I have started using more and more D3 for visualisations. Having used it at work for various projects, we had to adjust the colour palette of each project accordingly. Since D3 uses SVG for graphics, I started looking at the <color> tag.

Apart from the tag definition, W3C provide a list of keywords one can use instead of RGB values; this is extremely useful, as one can use the following to produce code that makes sense the moment you look at it:

var colours[lightsteelblue, lightskyblue, deepskyblue];

A list of keyword per RGB <color> is here. That was very useful, but I needed more than a list on the web. I looked for a cheat sheet on the web but didn’t find any. So, I did the following.

Firstly, I wanted to colour-sample when building mockups, so I made the following images (feel free to download):

Color tag and keywords - page 1

Color tag and keywords – page 1

Color tag keywords - page 2

Color tag keywords – page 2

Moreover, I wanted to look at this list even before turning my computer on, during sketching phase. So, I put the images above in a printable color-keywords cheat sheet [pdf].

Enjoy these resources! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s