Template:Font color

Template documentation follows
Note: the template above may sometimes be partially or fully invisible.
Visit "Template:Font color/doc" to edit its documentation if it is available. (How does this work?)

Purpose

{{Font color}} allows styling text with custom colors, such as red, orange, green, blue, indigo, and more (as listed at Codex Style Guide for Wikimedia and Color generation guide). You can specify a background color at the same time.

{{Font color}} is also how you can color wikilinks to something other than blue for when you need to work within background colors. Normally [[wikilink]] → wikilink, but here we use a {{font color}} with |link= to create a black wikilink →    wikilink   . You can make any text link to any page using the |link= parameter.

This template will use Wikipedia:HTML5 recommendations, inserting the span tags <span style="color:color">...</span> and <span style="background-color:color">...</span>, so the page increases its readability and usability in both the wikitext and the rendered page.

Usage

{{Font color}} has a one-color and a two-color form:

{{font color|color|text}}

{{font color|text color|background color|text}}.

Either form has a |link= option, for colorizing (otherwise blue or red) wikilink text.

|link=yes → [[<var>text</var>]]

|link=fullpagename → [[<var>fullpagename</var>]]

You can also name the other fields.

{{font color|fg=color|text=text}}

{{font color|fg=text color|bg=background color|text=text}}

You can name |fg= or |bg=, which is nice, but if you name either of them, you must also name |text=, which is a compromise. See Help:Template#Parameters for why.

Parameters

	Use / description	Default value
{{{1}}}	text color	inherited
{{{2}}}	text
link	=yes or =fullpagename

Or

	Use / description	Default value
{{{1}}}	text color	inherited
{{{2}}}	background color	inherited
{{{3}}}	text
link	=yes or =fullpagename

Examples

Using the Codex Design Style Guide for Wikimedia text colors:

• {{font color|var(--color-success, #177860)|'<var>Success</var>'}} → 'Success'
• {{font color|#008560|'<var>Success green from</var>'}} → 'Success green from' (color derived from Template:Talk quote inline)
• {{font color|var(--color-error, #bf3c2c)|'<var>Error</var>'}} → 'Error'
• {{font color|var(--color-content-added, #006400)|'<var>Content added</var>'}} → 'Content added'
• {{font color|var(--color-content-removed, #8b0000)|'<var>Content removed</var>'}} → 'Content removed'
• {{font color|var(--color-progressive, #36c)|Fake wikilink}} → Fake wikilink
• {{font color|var(--color-content-link-red, #bf3c2c)|Fake red link}} → Fake red link

Markup	Renders as
{{font color|green|green text}}	green text
{{font color|blue|do not style text as a link}}	do not style text as a link
{{font color|white|black|white text with black background}}	white text with black background
{{font color|#ffffff|#000000|white with black background}} ([[hexadecimal colors]])	white text with black background (hexadecimal colors)
{{font color|rgb(255,0,255)|rgb(0,0,0)|magenta with black background}}	magenta with black background

Markup	Renders as
{{font color|white|blue|Wikipedia:Example|link = yes}}	Wikipedia:Example
{{font color|white|blue|Wikipedia:Example|link = Wikipedia:Sandbox}}	Wikipedia:Example
{{font color|text=Wikipedia:Example |link=Wikipedia:Sandbox |bg=blue |fg=white}}	Wikipedia:Example

The |link= parameter is a good way to colorize wikilinks, and it is about as much typing as the pipe trick.

Although a wikilink accepts a font color (or other template or markup):

[[Wikipedia:Example|{{font color|white|blue|the Wikipedia:Example page}}]]

→ the Wikipedia:Example page (a font-colored link), a font color does not accept a wikilink, it creates wikilinks itself with |link=.

• Y {{font color|green|violet|Wikipedia:Example|link=yes}} → Wikipedia:Example (a |link= {{font color}})
• N{{font color|green|violet|[[Wikipedia:Example]]}} → Wikipedia:Example (Text with [[wikilink brackets]] overrides the designated color)

For more examples see /testcases. For actual mainspace template usage, here are search links for

• all usage.
• where |link= is used.
• hastemplate: "font color" prefix:F showing its use in articles whose title begins with the letter "F".

See also

SVG's color keywords that can be used as a keyword value.

• Important Manual of Style information
• Web colors
• HTML color names
• List of colors
• Help: Link color
• {{color}} — a similar template that only supports defining a foreground color
• {{background color}}
• {{coltit}} — colored table header cell
• {{color contrast ratio}}
• {{hilite}}
• {{font}}
• {{tq}}
• {{xt}}