Technicolor

4 March 2004

23 comments

A Blue Perspective: Technicolor

» Technicolor web colour designer «

In that grand tradition of me going one step further than is necessary, I present the Technicolor web colour designer. Inspired by the recent proliferation of colour theory discussion I thought "it's all well and good having these delicious colour palettes floating around, but how do they apply to a web page?"

So, Technicolor not only gives you some colour combinations to try out on people with atypical monochromatism, but it also allows you to paint a web page in your chosen psychedelic mood!

Once you've selected a nice looking colour using the colour sliders, you can select any of the 12 colour swatches by clicking on it once. This makes the colour active, and anything you subsequently click on the mock web page will be painted that colour; and I mean anything! (ignore your cursor icon!) Change the page background colour, left column text colour, header background colour, highlighted menu item text colour, right column background colour, menu background colour ... you get the idea.

If you've chosen a colour using the sliders and like one of its variants, you can get variants of the variant by double clicking on it. If you like the overall colour scheme of the variants, you can auto-paint the web page using those colours by clicking on the strangely labelled "Auto-paint the web page" link.

Now for a disclaimer: some of the variations are pretty eye watering and The Man in Blue Co. (est. 1863) accepts no liability for damage to viewers' retinas. They tend to look best with pastels, not highly saturated individual components e.g. pure red. (if anyone has any good looking colour variation algorithms they can tell me about, feel free)

I personally don't have much trouble with colour choice (I hope ... nothing wrong with blue), but if this tool helps someone else, then my visit to Earth will not have been in vain.

Tested and Ok'ed on IE6, NN7, Moz1.5, FB0.7. Thumbs down on Opera 7.11.

Categories

, , ,

Comments

  1. 1/23

    kartooner commented on 4 March 2004 @ 15:52

    Awesome job, Cameron. I've been looking for something like this for awhile.

    Granted, Color Schemer (www.colorschemer.com) is a great offline tool and has a cool online color tool, but this is perfect to see the whole picture.

    Thanks for sharing this. Your work is appreciated.

  2. 2/23

    RMCox commented on 5 March 2004 @ 01:32

    This is realy cool. It doesn't work in Safari, however, it does of course work in Firefox, so Mac users do have that option I suppose.

    Another good resource for color picking is available here: http://www.pixy.cz/apps/barvy/index-en.html
    That doesn't give you the perspective insofar as layout and overall color composition are concerned, though, and your example fills that void.

  3. 3/23

    RMCox commented on 5 March 2004 @ 01:38

    D'oh! Really, not realy. No, really.

  4. 4/23

    Joe commented on 5 March 2004 @ 08:39

    Add a new feature to tell all possible moves in a game like http://stuff-by-magnum.com/ScrabbleScam.html

  5. 5/23

    Curt commented on 5 March 2004 @ 11:52

    This is pretty cool. I've been playing around with other color schemers online, but I didn't find anything that let me put colors together quite like this. I think I found my new favorite. :)

  6. 6/23

    John commented on 5 March 2004 @ 12:47

    This has found my Bookmarks. What a great concept and implementation.

    Thanks!

  7. 7/23

    Tom commented on 5 March 2004 @ 16:35

    I don't think he intended this to be a place to post links to other color schemers... :-\

    Anyway, I think this is a great tool. It would be better if you could manually enter a hex code.

  8. 8/23

    andrej commented on 6 March 2004 @ 03:09

    offline version somewhere?

  9. 9/23

    Jennifer Grucza commented on 6 March 2004 @ 06:24

    This is beautiful! So simple, and yet so very useful! :)

  10. 10/23

    Dougal Campbell commented on 6 March 2004 @ 07:30

    Any chance you could add a feature that would generate a skeleton CSS file based on the current color settings on the page mockup?

    That would r0x0r.

  11. 11/23

    neezee commented on 6 March 2004 @ 10:27

    Very nice tool.

    A css based file would be great but I would even be satisfied with a

    'click here and I'll show you all currently showed colors from the boxes on the left'

    and

    'click here and I'll show you all current selected colors for the right'

    because you can choose different colors from various selections - but if you want them documented you are busted.

    Second: yes please add a possibility to give a start color via hexcode.
    thanks for a new playtoy.
    Nicole

  12. 12/23

    manuel razzari commented on 7 March 2004 @ 07:05

    simple, beautiful, useful!
    Impressive, Cameron!

  13. 13/23

    Christoph C. Cemper commented on 8 March 2004 @ 04:05

    This is really great stuff Cameron... I have to redesign my own coloring now...

    Regards,Christoph

    http://weblog.cemper.com


  14. 14/23

    Hasan commented on 17 March 2004 @ 02:23

    I've been using this for almost two weeks now,
    thought I'd better say thanks. Thanks!!

  15. 15/23

    Sarah commented on 6 April 2004 @ 07:28

    This is a really amazing tool.
    The idea of applying the generated colour palette to a sample layout is brilliant.
    Very nicely done! Thank you.

  16. 16/23

    Mario commented on 8 April 2004 @ 02:57

    Awesome tool! congratulations!
    I think i will use it very much for my designs.

    Thanks.

  17. 17/23

    Joseph Lindsay commented on 27 April 2004 @ 05:54

    Thanks for a cool tool. I am sure that I will use this a lot.

  18. 18/23

    John Rolph commented on 3 May 2004 @ 15:51

    A very useful tool. I was looking just for this, with layouts in line. brilliant!

    Thanks for this!

  19. 19/23

    Mark commented on 25 June 2004 @ 01:21

    Many thanks. I'm slightly colourblind and have little artistic talent: this helped me a lot in my site redesign. In fact, I liked your default colour scheme so much I just nicked that!

  20. 20/23

    The Man in Blue commented on 25 June 2004 @ 01:49

    Just as long as you know that #0066CC has been copyrighted by this site and any infringement will be met with swift justice :oP

  21. 21/23

    Dagmar commented on 25 June 2004 @ 18:23

    Thanx for that great tool. It is really useful. Have searched the web the whole day and finally found your site... what about an offline tool? Is there any or will there be?
    I would like to have it ;)

    Have a nice day then
    Dagmar

  22. 22/23

    The Man in Blue commented on 27 June 2004 @ 00:10

    Offline tool ... hmmm. Not sure if I could be bothered, but theoretically you could download all the files onto your hard drive and it'd still work -- all the references are relative.

  23. 23/23

    Joe commented on 26 July 2004 @ 20:18

    This is a great tool and its exactly what I would need to create in a project Im working on.

    Is it ok to use your code? Pretty please with sugar on top?? :)

  24. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed