I created a little color toy that goes out to a web site you specify and retrieves the colors that are used there. It looks though the HTML of the site and through any referenced CSS files. Each color appears as a little circular chit with the hexadecimal color value next to it.
The scanning mechanism uses some regular expressions to search for color values, which are typically stored as a hash symbol, followed by 6 hexadecimal digits. I also have the expression search for HTML color words, in case the web author has memorized them for use in his designs or did something even crazier, like used Frontpage.
You’ll notice that the colors get separated into one of 12 hue groups or the set of grays. This is a very non-scientific grouping of colors. Still, you can see in a vague way what a designer was thinking when colorizing his site.
If a site is using colors that are all from the same hue group (and possibly from the gray group) then that site is monochromatic. A lot of good sites are based on just one color.
If the site uses colors from two hue groups and the arithmetic difference between the group numbers is 6, then they’re using complimentary colors. For example, if the two hue groups are 2 and 8, then they are using complimentary colors (8-2=6). Complimentary colors are colors from opposite sides of the color wheel. You can see split complements in use this way, too.
To detect split complements, look for two groups that differ by 5 or 7. Usually, there will be three hue groups when using split complements. So you might see groups 2, 8, and 7 in a single layout, along with some grays.
There are a few more complicated schemes, but these are the common ones. It’s interesting to see how varied the colors are from site to site and get a little insight into why some colors work well together.
