The dominant color is pink
Tanner downloaded the color icon, which you can see here.
Tanner inspected the element with MS Paint, and looked at the RGB value of the dominant color to be pink (
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
- 55px (29.5%), which constitute the border, are
- 14px (7.5%) which are in the “folder space” near the border, are darker than
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
I mean, come on. Just look at it:
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
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
But what if the border is approximately 29% of all the color data? 5
The perceived color has become noticeably different from the local color. A conclusive declaration of color just got… less conclusive.
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.
- We have to account for perceived vs. local color
- 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.
borderWidth = 8px;
pixels_in_borders = ((size * border-width) * 4))
percentOfBorder = pixels_in_borders / ((size* size) + pixels_in_borders)