by

Why we can’t conclusively determine that Tridion structure group icons are pink

Reading Time: 4 minutes

Recently, Tanner Brine made the case that Tridion’s Structure Group icons are pink. And he declared his results conclusive. I’m here to say, “no they aren’t”. 1

The dominant color is pink

Tanner downloaded the color icon, which you can see here.

Is it more of a "trolling pink" or a "pedantic purple"?
Is it more of a “trolling pink” or a “pedantic purple”?

Tanner inspected the element with MS Paint, and looked at the RGB value of the dominant color to be pink ( #FF87AC ).

But it just doesn’t look pink.

Some fuzzier details

Let’s explore this icon in detail here:

  • The image files dimensions are 16px by 16px
  • The image file is a png with a transparent background where the actual bitmap icon is 16px wide by 13px tall
  • The bitmap uses 208px
  • 22px of the bitmap contain no color information at all
  • 186px of that bitmap contain color information
  • 91px (48.9% of pixels with color information) are #ff87ac
  • 55px (29.5%), which constitute the border, are #99234b
  • 14px (7.5%) which are in the “folder space” near the border, are darker than #ff87ac

Don’t trust computers

What’s actually going on here is an issue of local vs perceived colors.2. A local color is what Tanner has provided; the inarguable RGB value provided to the computer. What muddies the waters is that there is a perceived color (how our brains might interpret the color).

This isn’t an existential argument

I’m not making some existential argument about perception; that your blue could be my pink or anything like that. I’m also setting aside biological factors ;men having fewer cones in their eyes than women, being more prone to color blindness, and that colorblindness exists. I’m also putting aside environmental factors; the brightness of a monitor, overhead lighting in your work environment.

It’s the border that throws us off

Less than 50% of the actual color data is a “light shade of pink”, while 29.5% of the color surrounding that pink is a “medium dark shade of pink” 3. Wolfram Alpha says that the nearest color names for this border are “crimson” and “medium violet red”. 4. So the [crimson || medium violet red] border makes this icon not look pink. It seems to make it look darker than it really is.

It’s hard to calculate what that perceived color of the icon is, but it’s easy to say that it isn’t quite pink.

Let’s compare some colors

A programmer staring at a whole block of #99234b could easily call it “purple”. It’s so easy to make that mistake.

The border is obviously purple

I mean, come on. Just look at it:

Take note how they’re obviously not similar
#99234b Purple

If you’re going to tell me the color on the left is purple, please see an eye doctor.

But the folder color is still pink

Two versions of Pink!
#ff87ac Pink

When you put the two together?

Ok, fine. So let’s look at what happens when the background is #ff87ac and we have a 1px border of #99234b.

It’s still pink
#ff87ac

But what if the border is approximately 29% of all the color data? 5

It’s pink-ish? Right?
#ff87ac

The perceived color has become noticeably different from the local color. A conclusive declaration of color just got… less conclusive.

Is an argument discussion about an icon color necessary?

Yes. It really is. It seems silly (because it is), but it raises a legitimate issue: it is exceptionally difficult to describe and name color.

Keep in mind that I’m still ignoring the issue of our biological limitations and the upper limits of our computers 6.

One color affects how another color looks. In the front-end world, we’ve known about this for years:

Someone gives us a photoshop file where red image is 50% opaque and laying on top of another image. Try all he will, but the perceived color is not rgb(127,0,0). 7

Someone gives us a pink image with a dark red border. We know it’s going to look less pink when it’s smaller, and more pink when it’s bigger. The perceived color of an image can change just by how you size it. Resize my color-proportionate example in your browser and watch how the pink gets darker as it gets smaller.

So what’s the take away?

Consider that programmers, by a large percentage, are men8, and men are more likely to have color-blindness than women9. So I would caution Tridion developers, architects, and analysts against using color to describe an interface in a training document.

  1. We have to account for perceived vs. local color
  2. We will do so poorly

We should insist upon an RGB/hex/HSL to describe color to a developer for the purposes of writing code. “Pink” is not an acceptable way for a client to describe the color of the button they want on the homepage. They should give a “local” value.

On the flip side, we, as developers, should avoid using color to to describe interfaces to our clients. Because it leads to silly-but-not-so-silly debates about whether a color is pink or purple. Debates that are likely to be settled by our wives10.

Is it really so hard to describe it as just a “folder icon” instead of a “purple folder icon”?

Sources and whatnots

1 And also incite a flamewar. Because I haven’t argued with anyone for like 2 weeks.

2 http://practicalpainter.blogspot.com/2010/05/local-versus-perceived-color.html

3 http://encycolorpedia.com/99234b

4 http://www.wolframalpha.com/input/?i=rgb(153,+35,+75)

5 size= 75px;
borderWidth = 8px;
pixels_in_borders = ((size * border-width) * 4))
percentOfBorder = pixels_in_borders / ((size* size) + pixels_in_borders)
.

6 That issue being that RGB can produce 16 million colors but we can only see about 10 million, except for those who can see about 100 million.

7 http://computergraphics.stackexchange.com/questions/1587/actual-vs-perceived-brightness-of-rgb-colour

8 http://fusion.net/story/115998/survey-says-92-percent-of-software-developers-are-men/

9 https://nei.nih.gov/health/color_blindness/facts_about

10 My wife says the icon is pink, and National Geographic is on her side. And then Arizona State kicks me in the nuts by saying women can see red better. Damnit. You’re right Tanner.