How to extract CSS Colors from a website

If you need to extract the CSS colors from a website, what technique would you use? Here are a few options you can try before breaking out your favourite text editor (to peruse their style sheets).

Quick Summary

If you like Firefox Addons, then use Palette Grabber to get a good list of CSS colors in a swatch.
If you like prefer CSS colors copied straight to the Clipboard then use Colorzilla Firefox Addon

…and if neither of those suit you, then use Slayer Office – Colour List

More Detailed Review of techniques to extract CSS colors

  1. Bookmarklet
    • Colour Extractor Bookmarklet
    • Firebug Lite
    • Firefox addons
      • Pallet Grabber
      • Firebug
      • Colorzilla

Bookmarklets

Colour List Bookmarklet

Drag the following Bookmarklet for IE or Mozilla/Firefox (sourced from ‘Slayer Office – Colour List‘) to your bookmarks toolbar for quick access to the colour and visual check of the colours used on a page. The bookmarklet does list all colours used on the page, including inline CSS, which may make it too exhaustive for some.

Firebug Lite

Firebug’s great, but using Firebug for this problem seems overkill. However, if you really don’t want to install another add-on, then save the Firebug Lite Bookmarklet and drage it someone in your bookmarks.

Firefox Addons

Palette Grabber

Palette Grabber Firefox Addon allows you extract the current colours and export them in an appropriate palette for your image editor. This may not suit you if you’re happier in your text editor than your image editor.

Colorzilla

Colorzilla Firefox Addon provides native colour picking to Firefox. Since it can also capture the colours to your clipboard, it’s fast to extract only the colours you require.

Other options

Perhaps you have some better solutions or a different workflow, which would be great to hear about. Since the bookmarklets already provide a good cross-browser option, I won’t bore you with all the addons/extensions available for Internet Explorer, Chrome or desktop colour pickers.

Semantics

Although hailing from the UK, I have used the convention of CSS colors for references to the CSS code and used the UK spelling colours for other more general instances, such as colour pickers (where both conventions could are used).

Posted in css | Tagged , , , , , | Leave a comment