View source for Help:Link color

{{hatnote|This page is for technical help on coloring links in articles, for technical help on color use in articles in general, see [[Help:Using colors]]. For the MOS guideline on color use in articles, see [[MOS:COLOR]]. For color tables and a color pallette, see [[MOS:COLORS]]. For the WikiProject, see [[Wikipedia:WikiProject Color]]. For the civility essay dealing with colors, see [[Wikipedia:Don't edit war over the color of templates]].}}
{{Wikipedia how-to|shortcut1=H:LC|shortcut2=WP:LINKCOLOR}}
{{Warning link color}}
{{Linking and page manipulation|linking and diffs}}

In Wikipedia, the color of a [[WP:LINK|link]] shows the status of the corresponding target page. The default colors (in the default [[Wikipedia:Skin|skin]] [[Wikipedia:Vector 2022|Vector 2022]]) have the meanings shown in the table below. See also [[Wikipedia:Manual of Style/Accessibility/Colors]].
{{TOC left}}{{Clear}}
== Standard colors==
{{anchor|blue link|blue ink}}
{| class="wikitable plainrowheaders"
|+Standard link colors, in Vector 2022 and other skins
|-
! scope="col" rowspan="2" style="width:12%" | Link color 
! scope="col" rowspan="2" | Type
! scope="col" colspan="2" | Vector 2022
! scope="col" colspan="2" | Other skins
|-
! scope="col" style="width:12%" | Color code
! scope="col" | Color
! scope="col" style="width:12%" | Color code
! scope="col" | Color
|-
| [[Wikipedia:Links|<span style="color:#3366CC;">blue link</span>]] (Vector 2022)<br />[[Wikipedia:Links|<span style="color:#0645AD;">blue link</span>]] (other skins)
| Link to a Wikipedia page that currently exists, but you never visited || #3366CC = rgb(51,102,204) ||style="text-align:center;"| {{color box|#3366CC}}|| #0645AD = rgb(6,69,173) ||style="text-align:center;"| {{color box|#0645AD}} 
|-
| [[Main Page|<span style="color:#795CB2;">purple link</span>]] (Vector 2022)<br />[[Main Page|<span style="color:#0B0080;">indigo link</span>]] (other skins)
| Link to a Wikipedia page that exists and that you have visited || #795CB2 = rgb(121,92,178) ||style="text-align:center;"| {{color box|#795CB2}}|| #0B0080 = rgb(11,0,128) ||style="text-align:center;"| {{color box|#0B0080}} 
|-
| [[This article does not exist|<span style="color:#BF3C2D;">red link</span>]] (Vector 2022)<br />[[This article does not exist|<span style="color:#BA0000;">red link</span>]] (other skins)
| Link to a Wikipedia page that [[Wikipedia:Red link|does not currently exist]], and you never visited || #BF3C2D = rgb(191,60,45) ||style="text-align:center;"| {{color box|#BF3C2D}}|| #BA0000 = rgb(186,0,0) || style="text-align:center;"style="text-align:center;"| {{color box|#BA0000}} 
|-
| [[This article does not exist either|<span style="color:#A55858">light maroon link</span>]]
| Link to a Wikipedia page that does not currently exist, but that you have visited || #A55858 = rgb(165,88,88) ||style="text-align:center;"| {{color box|#A55858}}|| #A55858 = rgb(165,88,88) ||style="text-align:center;"| {{color box|#A55858}} 
|-
| [[Pará Arára language|<span style="color:#772233">maroon link</span>]]
| Link to a [[WP:STUB|very short article/stub]] within Wikipedia, but only if the user has set a preference option to format links to stubs in this way  || colspan=2 {{n/a|not yet defined}} || #772233 = rgb(119,34,51) ||style="text-align:center;"| {{color box|#772233}}
|-
| [[Wikipedia:Links|<span style="color:#3366CC;">blue link</span>]] (Vector 2022)<br />[[wikt:link|<span style="color:#3366BB">light blue link 1</span>]] (other skins)<br />[[outreach:|<span style="color:#3366BB">light blue link 2</span>]] (other skins)
| {{anchor|light blue link}}Link to a page [[Help:Interwiki linking|at another wiki]], usually [[Help:Interwikimedia links|another Wikimedia project]] or an [[Help:Link#External links|external link]].<br />Note that the light blue color is used whether or not the page actually exists at the target wiki. For example, there is an article about [[George Washington Carver]] here on the English Wikipedia, while there is [[:ja:George Washington Carver|no article of the same name]] on the Japanese Wikipedia; but they do have [[:ja:ジョージ・ワシントン・カーヴァー|an article about the same man]] under a different title. || #3366CC = rgb(51,102,204) ||style="text-align:center;"| {{color box|#3366CC}}|| #3366BB = rgb(51,102,187) ||style="text-align:center;"| {{color box|#3366BB}} 
|-
| [[wikt:|<span style="color:#795CB2;">purple link</span>]] (Vector 2022)<br />[[wikt:|<span style="color:#663366">purple link</span>]] (other skins)
| Link to a page on another site that has been visited || #795CB2 = rgb(121,92,178) ||style="text-align:center;"| {{color box|#795CB2}}|| #663366 = rgb(102,51,102) ||style="text-align:center;"| {{color box|#663366}} 
|}

Note that the colors in the boxes may appear darker than text of the same color; also, larger or bold text will tend to look darker. Furthermore, the actual color seen by a user will vary slightly according to their operating system, desktop settings, and browser, as well as their monitor and for low-end [[liquid-crystal display|LCD]]s, viewing angle. Logged-in users can also change the colors they see by selecting a different skin or using [[Wikipedia:Customisation|custom CSS]].

==Custom colors==
{{see|Help:Using colours}}
To use named CSS colors for text on a white background, refer to [[Wikipedia:Manual of Style/Accessibility/CSS colors for text on white]] for recommended colors.

===Normal text===
{{see|Template:Color}}
For normal text, the {{tl|color}} template with two parameters can be used: the color, either by name or hex code, and some text. '''However, prose text intended for readers should never be manually colored.''' ([[MOS:PROSECOLOR]])

* {{tlc|color|orange|Hello, world!}} → {{color|orange|Hello, world!}}
* {{tlc|color|#00F000|Hello, world!}} → {{color|#00F000|Hello, world!}}

===Links===
'''Refrain from implementing colored links that may impede user ability to distinguish links from regular text, or color links for purely aesthetic reasons.''' ([[MOS:COLOR]])

==== Styling individual links on a page ====
{{See|Template:Colored link}}
You can set the color of an individual link or set of links on a page (rather than a global change to the style of all links on Wikipedia) as follows. Setting styles in this way will apply to everyone who views those particular links or that particular page, not just you. '''However, links intended for readers should never be manually colored.''' ([[MOS:LINKCOLOR]])

The {{tl|colored link}} template takes two parameters to function: the color of the link, the article being linked to, with an optional third parameter for alternative text to display as a [[WP:piped link|piped link]].

* {{tlc|colored link|2=orange|3=Canada}} → {{colored link|Orange|Canada}}
* {{tlc|colored link|2=#00F000|3=Page name to link|4=Alternative text}} → {{colored link|#00F000|Page name to link|Alternative text}}

;Or
You can turn links a different color like so:

{{markupv|m=
*<nowiki>[[example|<span style="color:Orange;">This page exists.</span>]]</nowiki>
*<nowiki>[[exampl|<span style="color:green;">This page does not exist.</span>]]</nowiki>
|r=<nowiki/>
*[[example|<span style="color:Orange;">This page exists.</span>]]
*[[exampl|<span style="color:green;">This page does not exist.</span>]]
}}
Or, if you desire [[existence checking]], you can try:
{{markupv|m=
*<nowiki>[[example|{{#ifexist: example|<span style="color:Orange;">This page exists.</span>|This page does not exist.}}]]</nowiki>
*<nowiki>[[exampl|{{#ifexist: exampl|<span style="color:green;">This page exists.</span>|This page does not exist.}}]]</nowiki>
|r=<nowiki/>
*[[example|{{#ifexist: example|<span style="color:Orange;">This page exists.</span>|This page does not exist.}}]]
*[[exampl|{{#ifexist: exampl|<span style="color:green;">This page exists.</span>|This page does not exist.}}]]
}}

==== External links ====
A similar styled span can be added within an external link:
{{markupv|m=
*<nowiki>[http://example.com <span style="color:green;">Example external link</span>]</nowiki>
|r=<nowiki/>
* [http://example.com <span style="color:green;">Example external link</span>]
}}

=== Styling all links just for you ===
You can also customize link colors by editing the [[Cascading Style Sheets|CSS]] at your [[Special:MyPage/skin.css|skin subpage]]. This is a change which will apply to ''all'' links throughout the site, but will only be visible to you.

The standard link selectors are:
* a:link&nbsp;— defines the style for normal unvisited links
* a:visited&nbsp;— defines the style for visited links
* a:active&nbsp;— defines the style for active links; links become active once you click on them
* a:hover&nbsp;— defines the style for hovered links; links hover when the mouse moves over it

Colors are defined by hexadecimal characters: see [[web colors]].

<syntaxhighlight lang="css">
/* standard link colors */
.mw-body-content a:link { color: #0000FF; } /* normal unvisited links */
.mw-body-content a:link:visited { color: #0B0080; } /* visited links */
.mw-body-content a:link:active { color: #FF0000; } /* active links */
.mw-body-content a:link.new { color: #FF0000; } /* new links */
.mw-body-content a:link.extiw { color: #3366BB; } /* interwiki links */
.mw-body-content a:link.external { color: #3366BB; } /* external links */
.mw-body-content a:link.stub { color: #772233; } /* hovered links */

.mw-body-content a:link {color: #FF0000}
.mw-body-content a:visited {color: #00FF00}
.mw-body-content a:hover {color: #FF00FF}
.mw-body-content a:active {color: #0000FF}
</syntaxhighlight>

Notes:
* a:hover must come after a:link and a:visited
* a:active must come after a:hover
* you need to have ".mw-body-content" in front of the standard link definition, because otherwise the default definition on this website will still take precedence over what you have defined.

====Redirect====

Show redirects as green links:
<syntaxhighlight lang="css">
.mw-body-content a.mw-redirect {color:#308050}
.mw-body-content a.mw-redirect:visited {color:#3070A0}
</syntaxhighlight>

====External====
Show external links as green links:
<syntaxhighlight lang="css">
.mw-body-content a.external {color: #008000}
.mw-body-content a.external:visited {color: #008000}
</syntaxhighlight>

====Text decoration====
This allows formatting such as underlines. For example:

<syntaxhighlight lang="css">
.mw-body-content a:link {color: #000000; text-decoration: underline; }
</syntaxhighlight>

Possible values are:
* none
* underline
* overline
* line-through

====Font family====
This will change the link font:

<syntaxhighlight lang="css">
.mw-body-content a:link {font-family: monospace}
</syntaxhighlight>

====Preferences====
The "display links to [[Help:disambiguation|disambiguation]] pages in orange" feature, located in the [[Special:Preferences#mw-prefsection-gadgets|gadgets tab of the preferences menu]] (under the "appearance" section), shows you all links to disambiguation pages in {{color|#ff8921|orange}}.

====Scripts====
[[User:Anomie/linkclassifier]] is a popular script that customizes colors to indicate links such as pages to be deleted, nonfree-media, redirects, protected pages and more.

==See also==
{{Help desk}}
{{Portal|Help}}
* {{tl|resize}}
* {{tl|background color}}
* {{tl|font color}} – allows setting both text and background color
* {{tl|coltit}} – colored table header cell
* {{tl|fake link}}

{{Web Colors}}
{{Help navigation}}
{{Wikipedia technical help|collapsed}}

[[Category:Wikipedia link help]]