Key:colour
 colour
|
 |
| Description |
|---|
The colour associated with the object 
|
| Group: annotations |
| Used on these elements |
    |
| Useful combination |
| Status: de facto |
| Tools for this tag |
|
Use colour=* to indicate the official colour within the sRGB gamut associated with the object, for example the colour typically associated with a public transportation route. It is also often used to describe the real colour of an object like amenity=bench.
Important note: The key uses the English spelling of "colour" and not "color" (Americanised English spelling). Refer to deprecated tags below.
How to map
The value should be:
- a
Web RGB colour code (hex triplet), e.g. #FF0000 for red. This RGB code allows to describe about 16 millions distinct colours.
- A shorter RGB code with only 3 hex digits is also possible: it is equivalent to the 6-digit RGB codes where each individual digits (of the 3-digit code) are doubled (see examples in the table below). This short code (also standard in HTML and CSS) allows describing 4096 distinct colours.
- a CSS colour name (mostly American English colour names) in lower case (generic names should be preferred for non-specific colours, e.g. red instead of firebrick), and without any dash separator (when using composite colour names in the "Extended colour set" in the CSS specification). The limitation to lower case is currently valid in spite of the CSS specification that says that colour names are ASCII case-insensitive.
Colour names
Renderers reportedly have inconsistent support for colour names. There is a dilemma when it comes to using those names:
- The 16 "basic colour names" from CSS 1.0 are almost universally supported by renderers. They, however, are terrible in terms of legibility and aesthetics.
- HTML has gradually evolved to use a larger list of colours (see Wikipedia list) -- consolidated in the CSS colour Module Level 3. These colours are somewhat better, but they remain inconsistent in places (e.g. "lightpink" is darker than "pink"!). They are also not recognized by all renderers.
If you are looking to maximize all three of compatibility, legibility, and aesthetics, hexcode is the way to go.
| Sample | RGB hex | W3C colour name | Sample | RGB hex | W3C colour name | |
|---|---|---|---|---|---|---|
| #000000 (or #000) | black | #FFFFFF (or #FFF) | white | |||
| #808080 | gray (or grey) | #C0C0C0 | silver | |||
| #800000 | maroon | #FF0000 (or #F00) | red | |||
| #808000 | olive | #FFFF00 (or #FF0) | yellow | |||
| #008000 | green | #00FF00 (or #0F0) | lime | |||
| #008080 | teal | #00FFFF (or #0FF) | aqua (or cyan) | |||
| #000080 | navy | #0000FF (or #00F) | blue | |||
| #800080 | purple | #FF00FF (or #F0F) | fuchsia (or magenta) |
Taginfo
Here is a list of the most used tags on taginfo:
| Value | may be interpretated as RGB hex | Uses | Charts | ||
|---|---|---|---|---|---|
| colour=brown | #804000 | 
|
|
📈 | |
| colour=red | #FF0000 |
|
|
📈 | |
| colour=yellow | #FFFF00 |
|
|
📈 | |
| colour=gray | #808080 |
|
|
📈 | |
| colour=green | #008000 |
|
|
📈 | |
| colour=white | #FFFFFF |
|
|
📈 | |
| colour=black | #000000 |
|
|
📈 | |
| colour=blue | #0000FF |
|
|
📈 | |
| colour=orange | #FF8000 |
|
|
📈 | |
see more on https://taginfo.openstreetmap.org/keys/colour#values
Multiple colours on an object
In case an object has several colours on it, there are the usage of namespace syntax - several colour=* prefixes (colour:*=*) and postfixes (*:colour=*) exist.
- prefixes on building=*
- building:colour=* - building colour
- roof:colour=* - roof colour (as seen from above)
- postfixes on traffic_sign=*
- colour:back=* - background colour of sign
- colour:text=* - colour of text on sign
Rendering
The colour=* key is not currently rendered in any of the featured tile layers, because mapnik cannot take styling from the database.[1] Despite this, continued use and application of the key encourages the chance that it may be rendered in the future.
The tag is used in applications, such as OsmAnd / Organic Maps and some 3D visualisation programmes.
The Subway routes overlay from Tracestrack supports this tag.
| Software | 3-digit hex | 6-digit hex | CSS basic colours | CSS 3 extended colours | CSS 3 "transparent" | CSS 4 "rebeccapurple" |
|---|---|---|---|---|---|---|
| F4 Map | yes | yes | non-standard[2] | non-standard[2] | no | no |
| MapComplete | yes | yes | yes | yes | no | yes |
| OsmAnd | partial[3] | partial[3] | non-standard | partial[3] | no | no |
| OSMBuildings | yes | yes | yes | yes | no | yes |
| OSM2World | no | yes | non-standard[2] | yes | no | no |
| Streets GL | no | yes | yes | yes | no | yes |
Deprecated tags
There was an alternative spelling color=* in use for the tag name, using the American English spelling. Conforming to the convention of using British English for tags and values this alternative was deprecated. By means of mass edits in 2021 these were migrated to colour=*. See: https://taginfo.openstreetmap.org/keys/color#chronology
Note that the names in this tag's value should still follow the W3C standard.
Possible tagging mistakes
Tools
- RGB Color Calculator - increment or decrement RGB or HSV components individually
- Html Colors
- HTML Color Names
- Sass Color Generator - lighten, darken, saturate, desaturate
- A colour picker (eyedropper) is available in the Chrome and Firefox developer tools
See also
- building:colour=* - Colour of the building facade. See colour=* for possible values.
- destination:colour=* - Colour of destination signs.
- roof:colour=* - Colour of the building roof. See colour=* for possible values.
- seamark:object:colour - Colour of seamark objects.
- ref:colour=* - Colour of highway reference as seen on road signs.
- Sophox bubble chart of the most popular public transportation route colours
- ↑ https://help.openstreetmap.org/questions/12944/transport-colours
- ↑ 2.0 2.1 2.2 For artistic reasons, this renderer uses different RGB values for some colour names than what CSS specifies. For example, colour=yellow may render as RGB
#FFEA04instead of#FFFF00. - ↑ 3.0 3.1 3.2 Converted to a set of 16 colors. #12557 (comment)