What colour is that? / journal / hicksdesign

21/11/07

What colour is that?

Being colourblind, “What colour is that?” is a question I’ve had to ask too many times. If there’s no one around to check with it means taking a screenshot and dissecting the CMYK values (I still can’t think in RGB) in a graphics editor. Do-able, but a bit of a pain the ass quite frankly. In particular, the hardest for me are those itty-bitty colour swatches you get in Photoshop and Fireworks. The smaller the area of colour, the harder it is for me to distinguish blue from purple, grey from pink and green from brown.

A wonderful new app for OS X has been released, called Color Decoder, and it solves this problem in a really simple way. Just hover over an element with the loupe and the colour is displayed in a way that I can understand:

My eyes and sanity are saved!

Technorati Tags Tags: colourblindness, osx

Comments | RSS

Kalle said 174 days ago:

This is wonderful news for alot of people. I hope that they port it to the two other platforms as well!

Nick said 174 days ago:

Oh boy could I do with this app. Only today I told a producer at work that I was colourblind and she asked if I was in the wrong job. I’m a front-end developer. I wholeheartedly sympathise with your comment about is being hard to identify small areas of colour correctly. One example is small LEDs on battery chargers. Is it green or red?

Jon Hicks said 174 days ago:

“One example is small LEDs on battery chargers. Is it green or red?”

Good to know it’s not just me! So many electrical devices use that system, and it confuses the hell out of me!

Sam Daams said 174 days ago:

Looks nice! For web development I prefer the colorzilla extension for Firefox (Colorzilla) but that might be because I’m not colour blind. It’s almost hard to survive without in fact and that’s mainly because of how accessible it is exactly when I need it most. I find myself continuously using it to get an idea of what shade of a color I’ll test/use and as it’s right there in FF while I’m using the Edit CSS functionality from the developer toolbar it makes trial and error dead easy. It’ll also spit back rgb and allow a quick copy.

On a different note Jon. I filled out a scope document last week and sent it through. Should I be sending that to the same email address that bounces back the automated reply?

Andrew Kumar said 174 days ago:

I refuse to believe you are colour blind? Fo’ reals?!?

Graham Bancroft said 173 days ago:

That’s pretty fab, thank you. It’s a wee bit scary at first and would be nice if Flash colors and Speak colors were off by default, frightened the life out of me, although hovering over EyeTV was midly amusing for a few seconds until I started to feel nauseous.

Cavan Riley said 173 days ago:

Interesting you use CMYK to decipher colors. I learned to design in Photoshop so I use RGB to decipher what I’m actually looking at. Yet, when i’m using CMYK I have an extremely hard time picking colo(u)rs.

This looks like a convenient tool for us colo(u)rblindies but I’d also like to see an option for hex, rgb, or cmyk values. Then again, I didn’t download it so maybe it’s already there.

Martin said 173 days ago:

‘Colour blind’ is an misnomer if you ask me. 10% of men are red/green colourblind. I haven’t been tested but it’s clear to my art teacher wife that I am on our sojourns to the art gallery. It’s not really a hindrance unless you’re working with a really picky client. I prefer the term ‘colour faulty’.

ColorBlindDesignDude said 173 days ago:

I thought I was alone – colorblind designers unite! I’ll no longer be terrified when somebody asks me to switch the green on a graphic that has three shades each of brown, green, and red. Thanks man!

#10

Marcus said 173 days ago:

This test is used to check if you’re colour blind or not: http://www.toledo-bend.com/colorblind/Ishihara.html . There’s also some more of these tests on wikipedia where even I didn’t see some of the numbers on the images, but I think the Ishihara Test is better to see if you’re good enough to work :P…

#11

Roel Van Gils said 173 days ago:

Being a colourblind front-end developer myself, I’m very excited about this little utility. I’ve switched to Mac OS in February 2007 and had been searching desperately for a tool like this since then. On Windows I used WhatColor for years (http://www.hikarun.com/e/). This is the one tool I couldn’t find a Mac alternative for. I even had a friend/Mac developer working on a colour detection app for me (in Cocoa), but it never got out of ’alpha’ ;)

I guess it’s my lucky day! :)

#12

Tobie Langel said 173 days ago:

That utility would totally rock if it could copy the hex value of the color to the clipboard. How many times have I had to open up photoshop just to figure out the hex value of the background of a pic to match it with my CSS.

#13

Jon Hicks said 173 days ago:

@Tobie – I use xScope for that.

#14

Richard Rutter said 173 days ago:

Hicks you are a hero. I had software like this way back when I used a PC, so I’ve been waiting years for the equivalent on a Mac. Trouble is I’ve got to upgrade to Leopard now :-( Kudos to Stray Cat Technology none-the-less.

#15

Daniel James said 173 days ago:

I am new to this game, but have found my perception of colour to improve the more I work with it.

As a child, being told I was colour blind simply made me unlikely to learn what a colour was and how I perceived it. I still have a long way to go before those pesky LED’s are apparent, but I can say goodbye to green beefburgers with this tool.

Thanks.

#16

Martin Bekkelund said 173 days ago:

Let me get this straight… You’re one of the most famous designers in the world, and you’re colourblind? Impressive is the word.

I test my works in Sim Daltonism, an app for simulating colourblindness. Very useful to see how web pages appears to the colourblind.

http://michelf.com/projects/sim-daltonism/

#17

Jon Hicks said 173 days ago:

@Martin – calm down, calm down. ‘One of the most famous designers’ just isn’t right! It’s that kind of talk that creates the whole ‘blogger A-list celebrity’ nonsense

#18

Dave Spurr said 173 days ago:

This is awesome, thanks for pointing this out.

I didn’t realise you were colour blind Jon, my colour blindness is pretty bad (according to my optician a few years back) and I have a contact lens (somewhere, not used it in a while) that corrects my colour blindness, it’s tinted to match my colour vision deficiency and you just wear it in one eye.

It’s pretty freaky to see the difference, especially with fluorescent colours, and if you ever get the chance to try one out I’d recommend at least trying it. It’s nice to see the colours “as others see them” but I couldn’t use it to do work with as it was just as confusing, I still didn’t know what colours I was looking at as I never really learnt to identify the colours and shades I couldn’t see.

Anyway thanks again for the good software tip.

#19

Arpan said 173 days ago:

That may be so, but I’ve seen a number of your designs, and you are one of my favorite designers. Several of your designs are among the top designs that I’ve seen.

#20

Matt Wilcox said 173 days ago:

I like you am a colour blind designer, and I have the same problems some times. It’s rarely an issue, but when it gets small and fiddly is usually when it rears it’s head. Unlike you I am stuck with Windows, so this one doesn’t help me… :(

“One example is small LEDs on battery chargers. Is it green or red?”

Me too! My battery charger annoys the hell out of me with that. The TV and stereo too. My laptop, thankfully, uses blue and green.

If anyone is interested, a few years ago I did a simulation of how I see the world using a couple of photo’s and a screenshot of John Oxton’s old site.
http://mattwilcox.net/archive/entry/id/513/

#21

Marc Epard said 173 days ago:

I’m the developer of Color Decoder. Thanks for all the enthusiasm and suggestions!

I noticed requests for grabbing the RGB value and I thought I’d point out that the DigitalColor Meter app that comes with Mac OS X in /Applications/Utilities does that already. It’s in the Color menu. With DigitalColor Meter in front and the desired color space selected, point at a color and hit shift-command-C. I’m not opposed to adding the feature to Color Decoder, too, but there you go.

I have another iteration in the works, so keep those ideas coming! -Marc

#22

Matthew Robertson said 171 days ago:

@The screenshot: There’s nothing “green-ish” about that blue colour.

#23

Matt said 168 days ago:

I’m curious, Jon: how do yo select colours when you’re creating something? How do you know if the colours look good together? Do you rely entirely on theory?

I’m interested because as a front end developer without a design background I’m always amazed at how designers are able to pick suitable colours. I don’t like to stray too far from #aaa and #ccc!