XScheme CSS Colour Scheme Extractor

Technology Blog

I wanted a tool for my own purposes that would separate the colour properties in a CSS stylesheet from everything else (layout and text). Having found that csstidy incorporated a parser which could readily be reused for what I want, it did not take very long to create a simple implementation, which I’ve called XScheme and made available as a free service on this site.

Why would you want such a tool? If you’ve ever tried to work with a stylesheet which provides a layout you like in colours you don’t, you’ll probably appreciate its usefulness. Few stylesheet authors separate colour properties from layout. Once you have all the colour properties isolated it is much easier to edit them to suit your design needs.

Another use for XScheme, and the one for which it was actually written, is to make it easier to provide alternative colour schemes for accessibility purposes. For comfortable reading some users require a high contrast scheme such as yellow text on a black background, for example.

How to use XScheme

Paste your stylesheet into the text box, or enter a URL for it, and press the button. XScheme will split it into two separate stylesheets for you, the first containing only text and layout properties and the second only colour and background image ones. You can then copy and paste these two stylesheets into separate files to make developing your new colour scheme much simpler.

Hopefully some of you will find XScheme useful. If you do – or you have any questions, suggestions or complaints – please leave a comment below.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>