Ms. Lea Verou works as a Developer Advocate for W3C. She has a long-standing passion for open web standards, which she fulfills by researching new ways to use them, blogging, speaking, writing, and coding popular open source projects to help fellow developers. She is a member of the CSS Working Group, which architects the language itself. Lea studied Computer Science in Athens University of Economics and Business, where she co-organized and occasionally lectured a cutting edge Web development course for 4th year undergrads. She is one of the few misfits who love code and design almost equally.
We use color every day, but how well do we really understand it? More often than not, we are merely scratching the surface of a large and complicated discipline. In this dynamic session, we will scratch a little deeper, and you will be surprised at how deep the colorful rabbit hole goes.
How does color work on our screens? What’s the difference between color models and color spaces? Which existing features of CSS Color are we under-utilizing? What’s in store for CSS Color level 4? How can we pick both aesthetically pleasing and accessible color combinations?
This is not a design talk, it’s a technical talk about the inner workings of one of the most important design aspects, with many practical takeaways. Whether you identify as a designer or a developer, you will walk out of this session with a new-found confidence about anything color related.
She was calculating the proximity of two colors to show the user how close they are getting. Her first thought was to use the Euclidean distance of the two colors in the RGB cube and divide it by the maximum distance the color could have from any other RGB color. However, this proved out to be inaccurate in many cases, probably due to the lack of perceptual uniformity in RGB. As an example, try #f0f and #ff80ff. Although they are quite similar visually, the reported proximity was around 66% (1 – 128/382).
So she researched existing algorithms to get the proximity of two colors. Like most things color-related, it looks like Color Difference is not quite as simple as she thought, and is considered a topic of interest in Color Science. However, converting to L*a*b* and using the CIE94 and CIEDE2000 formulas seemed a bit of an overkill for this and she wasn’t terribly impressed with the CIE76 formula after trying the results out online for some sample pairs (e.g. it gives 60% for the aforementioned pair, which is even lower than what she got with her RGB method!).
So she experimented a bit and ended up using an average of her original idea and a sum of the HSL differences (divided by the max differences), which seems to work relatively ok. There are still cases where it’s off, but ho hum. After all, the proximity is mainly useful when you get close enough to the color (>90%), as until then you tend to play it by eye. Any improvements on the algorithm used are welcome. Or if enough people think it’s not working very well, I’ll bite the bullet and end up using DeltaE.