Template:Legend/doc

Shows a legend row with a colored box.

Usage

{{legend|background-color|caption|outline=outline color|border=css border|alt=alt text}}

• background-color is passed to the CSS background-color property of the color box.
• The optional outline parameter is the color of the outline around the box. Not to be confused with the CSS outline property.
• The optional border argument which overrides the outline argument and sets the CSS property (e.g., 1px solid #aaa) of the border that will be drawn around the box.

Examples

Use in text

<syntaxhighlight lang="wikitext"> {{legend|black|Africa|outline=gray}} {{legend|green|Americas}} {{legend|blue|Oceania}} {{legend|#ffa|Europe|outline=silver}} {{legend|#ff2800|Asia|outline=#A2A9B1}} </syntaxhighlight>

  Africa

  Americas

  Oceania

  Europe

  Asia

Use in captions

Markup

Renders as

[[File:Celts in Europe.png|upright=.9|thumb|right|The Celts in Europe, past and present: <div class="legend"><span class="legend-color mw-no-invert" style="background-color:#1a8000; color:white;-webkit-print-color-adjust: exact; print-color-adjust: exact;"> </span> Present-day Celtic-speaking areas</div> <div class="legend"><span class="legend-color mw-no-invert" style="background-color:#27c600; color:black;-webkit-print-color-adjust: exact; print-color-adjust: exact;"> </span> Other parts of the six most commonly recognized "Celtic nations" and where a Celtic language is spoken but not the dominating language</div> <div class="legend"><span class="legend-color mw-no-invert" style="background-color:#97ffb6; color:black;-webkit-print-color-adjust: exact; print-color-adjust: exact;"> </span> Other parts of Europe once peopled by Celts; modern-day inhabitants of many of these areas often claim a Celtic heritage and/or culture</div> <div class="legend"><span class="legend-color mw-no-invert" style="background-color:#D2FFD2; color:black;-webkit-print-color-adjust: exact; print-color-adjust: exact;"> </span> Lusitanian area of Iberia, "Celticity" uncertain</div> <div class="legend"><span class="legend-color mw-no-invert" style="background-color:yellow; color:black;-webkit-print-color-adjust: exact; print-color-adjust: exact;"> </span> The core Hallstatt territory, expansion before 500 BC</div>]]

Use with all parameters except alt and invert

<syntaxhighlight lang="wikitext">

A  Agricultural meadow

</syntaxhighlight>

A  Agricultural meadow

Invert in dark mode

<syntaxhighlight lang="wikitext">

  No

  Maybe

  Yes

</syntaxhighlight>

  No

  Maybe

  Yes

Full parameter list

<syntaxhighlight lang="wikitext">

   [text following legend box]

</syntaxhighlight>

Limitations

Using certain special characters in |text= that have meaning in wikitext can cause unexpected results. To use * in |text=, use |text={{asterisk}}. To use # in |text=, use |text={{number sign}}.

Determine hex colors for legend

One way to determine the exact color is via freeware IrfanView. Open image. Then:

Edit menu > Show Paint dialog > click on the eyedropper > click somewhere in the image > click on the color at the bottom of the Paint dialog > Write down the Red, Green, and Blue color numbers (RGB).

Online sites that can identify the color of any pixel in an uploaded image are also available:

• imagecolorpicker.com

Convert RGB colors to hex color or color name (if there is one):

• Color Converter.

See also

• Variant blocks
  • {{legend striped}}, two colors, for striped color areas
  • {{legend inline}}, uses display:inline to avoid line breaks after each legend
  • {{legend0}}, without the line-feed
  • {{leftlegend}}, with text-align set to left
  • {{color box}} and {{RouteBox}}, with text placed inside the colored legend and article linking
• {{legend-line}}, legends for lines such as graphs, charts, diagrams, and borders on maps
• {{image key}}, allows legend templates being used in image captions to use multiple columns

• Lists of colors
• Web colors

Templates that list colors

• {{Colornames}}
• {{X11 color chart}}
• {{Web Colors}}

TemplateData

<templatedata> { "params": { "1": { "label": "Color", "description": "The color for the legend entry, in any CSS format", "example": "\"#6D6E00\", \"#ffa\", \"yellow\"", "type": "line", "required": true }, "2": { "label": "Caption", "description": "Label for the legend entry", "example": "\"soda\" is most common", "type": "string", "suggested": true }, "invert": { "label": "Invert in dark mode", "description": "Invert color swatch and its contents in dark mode (recommended for tables)", "type": "string" },

       "border": {

"label": "CSS border style", "description": "CSS style for the legend entry's border", "type": "string" }, "outline": { "label": "Entry outline", "description": "CSS color for the outline of the legend entry", "example": "silver", "type": "line" }, "text": { "label": "Text in the entry", "description": "Text to be displayed in the legend entry box, i.e. within the color specified", "example": "Af", "type": "line" },

       "alt": {

"label": "Alt text of the entry", "description": "Adds hidden text to the legend entry box; overrides \"text\"", "example": "Af", "type": "line" }, "textcolor": { "label": "Text color", "description": "CSS color of text inside the legend's colored box", "type": "string" }, "size": {

           "label": "Size",

"description": "Font size of the legend entry, including colored box", "type": "string" } }, "description": "Shows a legend row with a colored box and a caption." } </templatedata>