Ever found yourself struggling to choose a colour scheme for a new project? Maybe you browse sites like Adobe’s Kuler or COLOURlovers; perhaps you find photographs that capture the mood of the site you’re trying to design; or maybe you click aimlessly on Photoshop’s colour-wheel until inspiration strikes.

Well, fear not – here’s another pointless and entirely arbitrary way to select those all-important tints and shades. Synaesthesia.js is my JavaScript solution for the inspiration-impaired.

How it works

The script converts whatever you type (discarding any non-alpha characters) into shiny hex colour codes, and shows you the result. The results update as you type, so you can try out creative new ways to spell.

How it actually works

  • Letters are matched to a hex code: A becomes 0, B becomes 1, C becomes 2, and so on through to Z (9, in case you were wondering).
  • From the resulting string of hex, each substring of six characters is used to create a colour block.
  • The colour blocks are appended to the target element, together with the hex code for easy copy-pasting into Photoshop or your text editor.

And that’s all there is to it! Have fun – the project is also on GitHub if you want to play with the code.

2 thoughts on “Synaesthesia.js

  1. Howdy this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding know-how so I wanted to get advice from someone with experience. Any help would be enormously appreciated!

  2. It depends on what blog platform you choose. This site uses WordPress, which lets you choose either WYSIWYG or hand-coding. Most popular blog services have a WYSIWYG interface.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>