Charlie Harvey

N shades of #XXXXXX: An HTML5 book-cover maker

N shades of #xxxxxx

E L James’s lightweight pornographic novel Fifty Shades of Grey was a publishing sensation a few years back. I am told there will even be a film soon. It has spawned many imitators. Hence this tool which allows you to make your own homage to Fifty Shades. With any colour available in the HTML colour palatte! What could be more exciting than that?



How does it work?

The source code is all in the page source!

Briefly, I pull an image into an HTML5 canvas element, change the colour choice from hex to dec, apply it to each pixel, work out the name in words for the number and draw that along with all the other title bits on to the canvas each time one of the input elements changes.

You can download the image you make if your browser supports that. Tested in Iceweasel 30 (so Firefox would work).

The font is Roboto Slab courtesy of google fonts. The cover image came from wikipedia, who say that using it at low-res is OK. This uses some more up to date HTML5 bits. So it might not work in older browsers. C’est la vie.


  • Be respectful. You may want to read the comment guidelines before posting.
  • You can use Markdown syntax to format your comments. You can only use level 5 and 6 headings.
  • You can add class="your language" to code blocks to help highlight.js highlight them correctly.

Privacy note: This form will forward your IP address, user agent and referrer to the Akismet, StopForumSpam and Botscout spam filtering services. I don’t log these details. Those services will. I do log everything you type into the form. Full privacy statement.