[Meta] Choosing New Colors for Icons

Related to:

Issue #3395 "Icon colour categorization"
Issue #3631 "Unifying transport color with air-transport color, separate accommodation icon color"
Issue #1127 "Make tram and bus stops more similar"
Issue #3613 "Current health-icon color too strong"

The Current Situation

According to @polarbearing in #3395, there are 17 [edit: 19] colors currently in use for icons. But several of these colors are very similar, in particular the shades of gray and the several colors of blue, as well as the two shades of orange in use.

The categories should be discussed at #3395

However, there is also some discussion of adding icon colors, to distinguish a category that is currently not show (such as "craft") or to distinguish between color names that currently uses the same color, such as transportation and accommodation.

This issue is a chance to look at how many different icon colors can be clearly distinguished and discuss which colors need to be adjusted so that we can have an appropriate number of clearly distinguishable icon colors.

Current icon colors and names:

1) #BF0000 health-color *recently changed* 2) #ac39ac shop-icon 3) #8461C4 airtransport 4) #7981b0 station-color 5) #576ddf marina-text 6) #4863A0 office 7) #4d80b3 water-text 8) #0092da transportation-icon and accommodation-icon 9) #7abcec - used in spring icon svg 10) #0c8316 leisure-green (darken park 60%) 11) #d08f55 landform-color 12) #C77400 gastronomy-icon recently added** 13) #734a08 amenity-brown - also public-service, culture, memorials 14) #7d7c7c (unnamed) - bollard, block, log 15) #666666 man-made-icon, advertising-grey 16) #3f3f3f (unnamed) - gate, lift_gate, swing_gate: 17) #000000 (unnamed) - place_ofworship, power, cave [EDITED to add two more icon colors:]_ 18) #545454 (unnamed) traffic_signals 19) #d40000 (unnamed) volcano

Current icon colors on different backgrounds:

Left to right: land-color, highway=pedestrian, building, residential, forest

Rendering tests on different backgrounds:

(L to R: land, building, major_building, residential, pedestrian area, forest, grass) z17 without names

z18 with names 18-current-icon-colors-background

All current icon colors with LCH values: 18-colors-fullscreen From http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker#b22b16,ca4871,ac37ab,746acf,3967a2,28a5cb,18a98b,028214,979506,c77500,724a08,666666

Analysis:

Using LCH values, which is a color space that attempts to match the perception of the human eye.

1) Lightness: for most of the icon colors, The lightness (L) is between 40 and 58

Lighter exceptions are #d08f55 landform-color, and #7abcec - used in spring icon svg - both of these colors are problematic.
Darker icons are amenity-brown, the dark gray used for barriers, and black. Brown needs to be darker to have contrast with orange, and black has to be darker to be different from gray.

2) Saturation (Chroma): Most have a chroma between 43 and 72, fairly high.

#BF0000 health-color is too saturated (and there is an open issue about this)
several of the shades of blue are low saturation: #7981b0 station-color, #4863A0 office, and the spring icon color #7abcec
Gray and black are also chroma 0, by design.

3) Hue: - most of the icon colors are at least 30 degrees apart in hue, except for gastronomy-icon, which was added recently, and several of the shades of blue.

#d40000 is the same hue as #BF0000 health-color
#C77400 is 3 degrees from landform-color #d08f55
The shades of blue are 5 to 20 degrees apart. Three of them are 24 degrees or less from #8461C4 airtransport, but none are close to #0c8316 leisure-green

4) Delta: - the calculated distance between adjacent colors, according to average human perception (via LCH). This takes into account lightness, hue and chroma. (This doesn't always match exactly with my perception, but it's a good start)

The closest colors by delta (need to fix) 1) ∆ 8 between #BF0000 health-color and #d40000 volcano, and between #545454 (traffic_signals) and #666666 man-made-icon 2) ∆ 9 from #7d7c7c (bollards) to man_made_icon #666666 3) ∆ 15 between the blues: a) #4863A0 office and #4d80b3water-text (waterfall color), also b) #4d80b3 water-text and #0092da transportation-icon 4) ∆ 16 between the blue colors #7981b0 station-color and #4863A0 office 5) ∆ 16.5 between #666666 man-made-icon and #3f3f3f for gates 6) ∆ 17 between #8461C4 airtransport and #576ddf _marinatext (fountain icon color) 7) ∆ 26 between #d08f55 landform-color and #C77400 gastronomy-icon
The largest gaps by delta (good places to add new colors) 1) ∆ 93 between#BF0000 health-color and #ac39ac shop-icon, 2) ∆ 102 between #7abcectransportation-icon and #0c8316 leisure-green 3) Δ: 79 between #0c8316 leisure-green and #C77400 gastronomy-icon

Gaps:

There are three gaps where a new icon color could fit: 1) between blue and green, 2) between orange and green 3) between red and purple (health and shop)
These new icons colors should have lightness for 40 to 72 and chroma of 43 to 72, to fit with the existing icons.

Problems to address:

1) Six different shades of blue are used, including three different blues for water feature icons alone.

#7981b0 station-color is very similar to #4d80b3 water-text and similar to #4863A0 office
#0092da is similar to #7abcec (spring icon color) and #576ddf marina-text
The darker shades of blue are a little too close to #8461C4 airtransport

2) #d08f55 for landform-color is too similar to #C77400, used for gastronomy-icon

The hue is almost the same.
Also #d08f55 is lighter than most of the other icon colors, which reduces the contrast with background fill colors.

3) #BF0000 health-color is too saturated

It is one of the darker colors (lightness is 40) and it has the highest chroma (84; the next highest is shop-icon at 72)
See Issue #3613

4) The 4 shades of gray are not distinct: #7d7c7c (unnamed) - bollard, block, log #666666 man-made-icon, advertising-grey #545454 traffic_signals #3f3f3f (unnamed) - gate, lift_gate, swing_gate:

In particular, the color used for bollard / block / log is very similar to man-made-icon grey
This is less important, especially for the bollards and blocks which are rendered as a small gray circle

5) Several icon colors clash with the major-building color background

In particular, the shades of orange suffer from this problem, as they are closest.
There has been discussion about making the major-building color slightly lighter to fix this, but I've been unable to find the issue or PR number.

6) New colors are needed for accommodation-icon and craft

It has been mentioned that accommodation icons should have their own color
There is also a plan to start rendering craft=*. While this could use the same color as office, another color might be preferable.

Most of the issues above can be addressed by a few changes, which reduce the number of icon colors from 18 to 13, while adding 3 new colors that have better contrast with the existing icons:

13-icons-vert-landcolor-2

1) Use one shade of blue for all water features, for example #24a6cc Lch(63,35,235) - suggested by @imagico

This requires moving transport-icon to a different color

2) Consolidate the different shades of gray used for barriers and gates to just #666666 and #000000

3) Change landform-color from #d08f55 to a different color between green and orange, for example #979506 Lch(60,64,102)

4) Adjust health slightly (see #3613) and then add a new color between health and shop-icon, for example #c84a74 Lch(50,54,3) - or one of the other similar colors discussed in #3631

This color could be used for accommodation-icon, transport-color or craft=*

5) Add a new color between blue and green, for example #12a98d Lch(62,43,174)

This color could be used for accommodation-icon, transport-color or craft=*

Example of a possible change, with #12a98d for transportation-icon, #979506 for landform-color, and #c84a74 for accommodation-icon: (these could certainly be switched around and adjusted) z17-icons-13-new-backgrounds

Comparison of these new colors: http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker#c77500,b02e04,c84a74,ad36ac,746acf,3967a2,28a5cb,12a98d,008211,979506,c77500,724a08,b02e04,666666,000000,f2efe9

Good initiative and approach @jeisenbe!

I think even 13 colors for icons is still quite a lot, it would be great if we could remove 2 or 3 more.

I don't see the issue with using the same colors, or colors that are not easy distinguishable, for transport and water. The chance of confusion is very small.

I'm not sure if landforms need their own color. Wouldn't gray or green work for them?

I don't think pink for accomodation is very intuitive.

I think the icons are nicely spaced in terms of color distance. However, if possible I think it would be easier for users if we could have one icon per color name. For example, in your proposal there are two greens and two pinks. Even though they are easier to distinguish, I suspect users tend to remember icon meaning by the name of the color. Remembering the meaning difference between two greens is harder than between a green or a blue.

I don't see the issue with using the same colors, or colors that are not easy distinguishable, for transport and water. The chance of confusion is very small.

I agree. The same for peaks/saddles - they can stay orange, since the context should be clear what is gastronomy. After all we use red triangles for volcanos, which is also clear that it's not healthcare related.

I don't think pink for accomodation is very intuitive.

Me too. However that is not a blocker for me.

I also feel that green should be restricted only to leisure/sport facilities.

I also feel that green should be restricted only to leisure/sport facilities.

Agree - or nature items.

we use red triangles for volcanos

Oh, good catch, I forgot about that color, #d40000 (volcano icon)

After looking through the amenity-points.mss file again, I see that there is also another shade of gray used for _trafficsignals: #545454

So there are at least 19 icon colors currently (or more?)

I've updated the list above.

I think even 13 colors for icons is still quite a lot, it would be great if we could remove 2 or 3 more

That's certainly possible. We can remove 2 from the list in my second comment by not using a separate color for accommodation-icon, and by unifying airtransport with transportation-icon.

This could be accomplished by the current airtransport icon color for transportation-icon, airtransport, train_station, and accommodation-icon. Or by using one of the new colors above for these features (eg #c84a74 or #12a98d or similar)

I don't see the issue with using the same colors, or colors that are not easy distinguishable, for transport and water.

But is there any reason to combine these two types of feature, except for inertia? I can see how air transport, land transport, train stations, and even accommodations are all related to travel, but not how fountains or springs or waterfalls relate to travel. If we were limited to 5 icon colors it could make sense to make such a compromise, but with 10 it's not necessary.

matthijsmelissen: I'm not sure if landforms need their own color. Wouldn't gray or green work for them?

kocio-pl: I also feel that green should be restricted only to leisure/sport facilities.

Gray is only used for man-made features currently, so that could be confusing.

Leisure-green for mountains and saddles would look odd on bare_rock, sand, etc. - it's quite saturated.

The option I suggested was #979506, a desaturated yellow hue, but it looks yellow-green to me. But it could be shifted toward green a bit more, say #8a9845 for land-form-color?

I think it would be easier for users if we could have one icon per color name. For example, in your proposal there are two greens and two pinks. Even though they are easier to distinguish, I suspect users tend to remember icon meaning by the name of the color.

It's interesting how different individuals and cultures perceive colors differently.

I would say that #c84a74 is "hot pink" (since "pink" alone is "light red"), #ac39ac shop-icon is "bright purple", and #8461C4 airtransport is "violet", but these words are not well defined.

For the greens, I would definitely say #0c8316 "leisure-green" is green, but I'm not sure if #979506 can be called green - perhaps mustard? And I would call #12a98d "turquoise" or "aqua", which seem like shades of blue (certainly with some green hue), to me.

According to my wife, who's a linguist, here in Indonesia many languages have just 3 color words: light, dark and red. There is an equally large number of languages with just 5 color words: white, yellow, green, red, and black. For these languages, browns and and oranges and blues will be described as yellow or green or red or black (or white, if they are very light). Blue is usually the 6th color, and Brown is the 7th.
Many Indo-European languages only had 6 or 7 color words during the middle ages. Back then, in middle English, "orange" would have been referred to as red-yellow, and "pink" was "light red" The last 4 colors are orange, pink, purple and gray; these are fairly in pre-modern languages. *1

We can see that many of the words for purple, orange, brown and pink - which are the last 4 color words to develop - are based on flowers, fruits and drink. Eg in Spanish: coffee, rose, violet, and ashes. It's nearly the same in Indonesian, except we say "light red" for "pink" (no roses here), and we use "chocolate" for brown, not "coffee".

The problem is, we can't easily use yellow (this color is very light), and we can't use white, so that only would leave 9 colors for icons, if we went by "one named color per icon", and this would still be helpful only in certain cultures, where pink, orange, purple and gray are named. (Apparently Russian has 2 words for shades "blue", and Hungarian has 2 words for shades of "red", and the standard colors for "red" and "blue in Japanese would be called "orange" and "turquoise" in English) *2

In color theory, there are 3 primary colors (related to the 3 types of cells in the human eye, which perceive short wavelengths as blue, long wavelengths as red, and those in between as green), 3 secondary colors made by combining the first 3, and 6 tertiary colors created by combining the first six colors, in addition to the less saturated colors: gray, white and black (and brown?). Adding up, 15 or 16 colors could be considered distinct by this system, including intermediate colors like turquoise/aqua/blue-green.

So I would consider using colors like #c84a74, #979506 or #12a98d if necessary, even though they do not correspond to a major color-word in English and other European languages.

1: "Basic Color Terms", Berlin & Kay (1969), cited in "Semantics", 2nd ed., F.R. Palmer (1981) p. 73 2: "Semantics", Palmer (1981) pp. 74-75

Here are a couple examples with only 9 icon colors (somewhat matching "red", "hot pink", "purple", "blue", "green", "orange", "brown", "gray", and "black" in American English usage):

1) Change gastronomy back to amenity-color, combine different transportation colors, change office to man-made-icon (gray): z17-icons-only-9-colors

backgrounds-9-colors

2) Merge landform-color with gastronomy-color, combine different transportation colors, change office to man-made-icon (gray): icons-only-9-colors-gastro-orange

9-colors-backgrounds-gastro-orange

Hmm... it probably doesn't work to have "office" as gray. Amenity-brown might work.

It would be easier to keep the current color, though this would mean having 2 shades of blue.

Waterfall, spring and ford should be located on top of river. Idem for fountain in basin. Traffic signal label is too strong.

What does represent the grey square ?

Please note also the different label of station (bold), ferry (italic) and heliport (above). Airport is also in italic

Hmm... it probably doesn't work to have "office" as gray. Amenity-brown might work.

We already use amenity brown as a fallback color and office dark blue was selected after careful testing, so I would not like to discard such important step.

It would be easier to keep the current color, though this would mean having 2 shades of blue.

I don't like compacting colors just for the sake of having less of them. Also light/dark blue are much easier to distinguish for me than violet/brown sometimes.

@imagico suggests that the current leisure icon color is too prominent to use for sport icons, per this comment in #3651: https://github.com/gravitystorm/openstreetmap-carto/pull/3651#issuecomment-455859844

I've also felt that the leisure icon color is too saturated and bright, especially when it is rendered on buildings, commercial areas and retail areas, where the green is strongly contrasting with the background colors.

The current color has lightness 47, chroma 68 and hue 138 currently (LCH). The lightness level is normal, but the chroma is on the high end of the values used. Also, the hue is based on the park fill color, rather than the pitch color.

The fill color for @pitch is #aae0cb LCH(85,22,168) An icon color based off of this would be LCH(60,35,168), #46a083 - this has a delta of over 40 with the most similar blue icon color, and with the current leisure green.

gravitystorm / openstreetmap-carto