Open jeisenbe opened 5 years ago
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:
1) Use one shade of blue for all water features, for example #24a6cc
Lch(63,35,235) - suggested by @imagico
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
5) Add a new color between blue and green, for example #12a98d
Lch(62,43,174)
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)
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):
2) Merge landform-color with gastronomy-color, combine different transportation colors, change office to man-made-icon (gray):
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.
Related to:
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) volcanoCurrent icon colors on different backgrounds:
Rendering tests on different backgrounds:
z18 with names
All current icon colors with LCH values: From http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker#b22b16,ca4871,ac37ab,746acf,3967a2,28a5cb,18a98b,028214,979506,c77500,724a08,666666
Analysis:
1) Lightness: for most of the icon colors, The lightness (L) is between 40 and 58
#d08f55
landform-color, and#7abcec
- used in spring icon svg - both of these colors are problematic.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)#7981b0
station-color,#4863A0
office, and the spring icon color#7abcec
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
#8461C4
airtransport, but none are close to#0c8316
leisure-green4) 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#4d80b3
water-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-iconThe largest gaps by delta (good places to add new colors) 1) ∆ 93 between
#BF0000
health-color and#ac39ac
shop-icon, 2) ∆ 102 between#7abcec
transportation-icon and#0c8316
leisure-green 3) Δ: 79 between#0c8316
leisure-green and#C77400
gastronomy-iconGaps:
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#8461C4
airtransport2)
#d08f55
for landform-color is too similar to#C77400
, used for gastronomy-icon#d08f55
is lighter than most of the other icon colors, which reduces the contrast with background fill colors.3)
#BF0000
health-color is too saturated4) 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:5) Several icon colors clash with the major-building color background
6) New colors are needed for accommodation-icon and craft