HTML Named Colours
Hover over a letter in the header to see its colour name. The colours are randomly generated when the page is loaded. Who knows? This might bring you fresh ideas!

We've almost forgotten them, the good old HTML colours. Still, I use them a lot when prototyping. I love to quickly type colours such as "tomato", "royalblue" or "forestgreen". And for immediately spotting an element in Firebug while keeping its text legible, nothing beats "background: gold".

The input below lets you filter the colours on parts of its name, hex value or rgb value. The Scratchpad lets you enter your own hex colour to spot if there are named colours that come close to it. Clicking on a plus sign adds that colour to your library on the right, which is remembered next time you visit this page.

Also below you can sort the colours by their names (default) or by their hex values. The "listing" button shows the colours as a list, which works particularly nice when sorting by value. For more info, click the tour button on the right.

Sort by:

  • {{}} {{colour.hexvalue}} | {{colour.rgbvalue}}
  • Back to top

all colours: {{colours.length}} | filtered colours: {{filteredColours.length}}


Type a colour name or hex value

  • {{mixerInput}}

My Library
Your library is saved between browser sessions, so next time you visit this page, your colours are retrieved.

  • {{}} {{colour.hexvalue}}

I've created this app because all the lists of HTM colours I could find on the were pretty ancient and looked the part. Clunky tables and no way to quickly filter them. So to breathe new life into something I like to use every now and again, I've created this web app in AngularJS, jQuery and Bootstrap.

This page and the Spotlighter are part of my Playground - a collection of fun (and dare I say it: clever) stuff I made in the past, from jQuery games and plugins to CSS animation tricks.

Please drop in on my portfolio site!

Add to My Library
Add to My Library
Remove from My Library