View source for Help:Using colours

{{Short description|Wikimedia help page}}
{{redirect|WP:COLOURS|MOS guidelines on color use in articles|MOS:COLOR}}
{{about|the use of colours in articles|the civility essay dealing with colours|Wikipedia:Don't edit war over the colour of templates|guidelines on colour use|MOS:COLOUR|the help page about link color|H:LC|the help  page about user contributions|WP:UCP}}
{{Wikipedia how to|HELP:COLOR|WP:COLOURS|H:UC}}
{{Warning link color}}
{{Notice|Editors are encouraged to use the tools listed at [[MOS:COLOR]], such as the [[Wikipedia:Manual of Style/Accessibility#Additional tools for color scheme selection|tools for color scheme selection]], to make illustrations and webpages more accessible.}}

To use a colour in a [[wikipedia:template|template]] or [[wikipedia:table|table]] you can use the [[hex triplet]] (e.g. {{Mono|#CD7F32}} is bronze) or [[HTML color names|HTML color name]] (e.g. red).

Editors are encouraged to make use of tools, such as [https://colorbrewer2.org/ Color Brewer 2] to create [[Brewer palettes]], listed at [[MOS:COLOR]] for [[Wikipedia:Manual of Style/Accessibility#Additional tools for color scheme selection|color scheme selection]] used in graphical charts, maps, tables, and webpages with accessibility in mind for color-blind and visually impaired users.

For color tables and a color pallette, see [[MOS:COLORS]]. For the WikiProject, see [[Wikipedia:WikiProject Color]].

==Overriding font colour{{anchors|Overriding font color}}==
To apply colour to text, use:
<code><nowiki><span style="color:</nowiki>''hex triplet or colour name''<nowiki>">text</span></nowiki></code>

Note that you cannot use the Commonwealth spelling, "colour", in HTML tags used in wikitext.

Examples:
*<code><span style="color:</code>{{Highlight round|red|bc=#dadde3}}<code>">red writing<nowiki></span></nowiki></code> shows as <span style="color:red">red writing</span>
*<code><span style="color:</code>{{Highlight round|#0f0|bc=#dadde3}}<code>">green writing<nowiki></span></nowiki></code> shows as <span style="color:#0f0">green writing</span>
*<code><span style="color:</code>{{Highlight round|#0000FF|bc=#dadde3}}<code>">blue writing<nowiki></span></nowiki></code> shows as <span style="color:#0000FF">blue writing</span>

===Template font colour {{anchors|Template font color}}===
{{Tl|Font color}}, or its redirect {{Tl|Font colour}}, can also be used.
  
{{tlx|Font colour|fontcolour|backgroundcolour|Your text here}}

{{markup
|<nowiki>{{font color|red|This text is different}}</nowiki>
|{{font color|red|This text is different}}<br>to change text-color only (Note: do not style text as a link)
|<nowiki>{{font color|red|yellow|This text is different}}</nowiki>
|{{font color|red|yellow|This text is different}}<br>to change text and background color
|<nowiki>{{font color||yellow|This text is different}}</nowiki>
|{{font color||yellow|This text is different}}<br>to change background color only<br>'''Note''' the two pipe-characters <code>&#124;&#124;</code> to keep the text color at default.
}}

==<span id="Color generation guide">Colour generation guide</span>==
{{Hatnote|[[MOS:COLOR]] contains a [[Wikipedia:Manual of Style/Accessibility#Additional tools for color scheme selection|list of tools for color scheme selection]] and creation.}}
The method used for selecting the colors for various top-level pages, e.g. [[Main Page]], [[Wikipedia:Community Portal|Community Portal]], [[Wikipedia:Contents|Contents]], and [[Help:Contents]].<br />The 3 colours are generated using the [[HSV colour space]], then translated into [[RGB color model|RGB]].

{| class="wikitable" border="0" cellspacing="4" cellpadding="8" style="border:black solid 1px;"
|+ 
|-
! width="60px" | Hue !! Saturation 4%<br />Brightness 100%<br /><br /><small>main background</small> !! Saturation 10%<br />Brightness 100%<br /><br /><small>2nd header, accent colour</small> !! Saturation 15%<br />Brightness 95%<br /><small>main border<br />header background</small> !! Saturation 15%<br />Brightness 75%<br /><br /><small>header border only</small>
|-
! &nbsp; !! &nbsp; !! colspan="3" style="text-align:right" | <small>Note: for layouts with no spacing between borders, use the darker border colour.</small>
|-
| style="background:#FF0000; color:white; text-align:center;" | Hue: 0 || style="background:#FFF5F5; color:black; text-align:center;" | #FFF5F5 || style="background:#FFE6E6; color:black; text-align:center;" | #FFE6E6 || style="background:#F2CECE; color:black; text-align:center;" | #F2CECE || style="background:#BFA3A3; color:black; text-align:center;" | #BFA3A3
|-
| style="background:#FF2A00; color:white; text-align:center;" | Hue: 10 || style="background:#FFF7F5; color:black; text-align:center;" | #FFF7F5 || style="background:#FFEAE6; color:black; text-align:center;" | #FFEAE6 || style="background:#F2D4CE; color:black; text-align:center;" | #F2D4CE || style="background:#BFA7A3; color:black; text-align:center;" | #BFA7A3
|-
| style="background:#FF5500; color:white; text-align:center;" | Hue: 20 || style="background:#FFF8F5; color:black; text-align:center;" | #FFF8F5 || style="background:#FFEEE6; color:black; text-align:center;" | #FFEEE6 || style="background:#F2DACE; color:black; text-align:center;" | #F2DACE || style="background:#BFACA3; color:black; text-align:center;" | #BFACA3
|-
| style="background:#FF8000; color:white; text-align:center;" | Hue: 30 || style="background:#FFFAF5; color:black; text-align:center;" | #FFFAF5 || style="background:#FFF2E6; color:black; text-align:center;" | #FFF2E6 || style="background:#F2E0CE; color:black; text-align:center;" | #F2E0CE || style="background:#BFB1A3; color:black; text-align:center;" | #BFB1A3
|-
| style="background:#FFAA00; color:black; text-align:center;" | Hue: 40 || style="background:#FFFCF5; color:black; text-align:center;" | #FFFCF5 || style="background:#FFF7E6; color:black; text-align:center;" | #FFF7E6 || style="background:#F2E6CE; color:black; text-align:center;" | #F2E6CE || style="background:#BFB6A3; color:black; text-align:center;" | #BFB6A3
|-
| style="background:#FFD500; color:black; text-align:center;" | Hue: 50 || style="background:#FFFDF5; color:black; text-align:center;" | #FFFDF5 || style="background:#FFFBE6; color:black; text-align:center;" | #FFFBE6 || style="background:#F2ECCE; color:black; text-align:center;" | #F2ECCE || style="background:#BFBAA3; color:black; text-align:center;" | #BFBAA3
|-
| style="background:#FFFF00; color:black; text-align:center;" | Hue: 60 || style="background:#FFFFF5; color:black; text-align:center;" | #FFFFF5 || style="background:#FFFFE6; color:black; text-align:center;" | #FFFFE6 || style="background:#F2F2CE; color:black; text-align:center;" | #F2F2CE || style="background:#BFBFA3; color:black; text-align:center;" | #BFBFA3
|-
| style="background:#D4FF00; color:black; text-align:center;" | Hue: 70 || style="background:#FDFFF5; color:black; text-align:center;" | #FDFFF5 || style="background:#FBFFE6; color:black; text-align:center;" | #FBFFE6 || style="background:#ECF2CE; color:black; text-align:center;" | #ECF2CE || style="background:#BABFA3; color:black; text-align:center;" | #BABFA3
|-
| style="background:#AAFF00; color:black; text-align:center;" | Hue: 80 || style="background:#FCFFF5; color:black; text-align:center;" | #FCFFF5 || style="background:#F7FFE6; color:black; text-align:center;" | #F7FFE6 || style="background:#E6F2CE; color:black; text-align:center;" | #E6F2CE || style="background:#B6BFA3; color:black; text-align:center;" | #B6BFA3
|-
| style="background:#80FF00; color:black; text-align:center;" | Hue: 90 || style="background:#FAFFF5; color:black; text-align:center;" | #FAFFF5 || style="background:#F2FFE6; color:black; text-align:center;" | #F2FFE6 || style="background:#E0F2CE; color:black; text-align:center;" | #E0F2CE || style="background:#B1BFA3; color:black; text-align:center;" | #B1BFA3
|-
| style="background:#5EFF00; color:black; text-align:center;" | Hue: 100 || style="background:#F8FFF5; color:black; text-align:center;" | #F8FFF5 || style="background:#EEFFE6; color:black; text-align:center;" | #EEFFE6 || style="background:#DAF2CE; color:black; text-align:center;" | #DAF2CE || style="background:#ACBFA3; color:black; text-align:center;" | #ACBFA3
|-
| style="background:#2BFF00; color:black; text-align:center;" | Hue: 110 || style="background:#F7FFF5; color:black; text-align:center;" | #F7FFF5 || style="background:#EAFFE6; color:black; text-align:center;" | #EAFFE6 || style="background:#D4F2CE; color:black; text-align:center;" | #D4F2CE || style="background:#A7BFA3; color:black; text-align:center;" | #A7BFA3
|-
| style="background:#00FF00; color:black; text-align:center;" | Hue: 120 || style="background:#F5FFF5; color:black; text-align:center;" | #F5FFF5 || style="background:#E6FFE6; color:black; text-align:center;" | #E6FFE6 || style="background:#CEF2CE; color:black; text-align:center;" | #CEF2CE || style="background:#A3BFA3; color:black; text-align:center;" | #A3BFA3
|-
| style="background:#00FF2A; color:black; text-align:center;" | Hue: 130 || style="background:#F5FFF7; color:black; text-align:center;" | #F5FFF7 || style="background:#E6FFEA; color:black; text-align:center;" | #E6FFEA || style="background:#CEF2D4; color:black; text-align:center;" | #CEF2D4 || style="background:#A3BFA7; color:black; text-align:center;" | #A3BFA7
|-
| style="background:#00FF55; color:black; text-align:center;" | Hue: 140 || style="background:#F5FFF8; color:black; text-align:center;" | #F5FFF8 || style="background:#E6FFEE; color:black; text-align:center;" | #E6FFEE || style="background:#CEF2DA; color:black; text-align:center;" | #CEF2DA || style="background:#A3BFAC; color:black; text-align:center;" | #A3BFAC
|-
| style="background:#00FF80; color:black; text-align:center;" | Hue: 150 || style="background:#F5FFFA; color:black; text-align:center;" | #F5FFFA || style="background:#E6FFF2; color:black; text-align:center;" | #E6FFF2 || style="background:#CEF2E0; color:black; text-align:center;" | #CEF2E0 || style="background:#A3BFB1; color:black; text-align:center;" | #A3BFB1
|-
| style="background:#00FFAA; color:black; text-align:center;" | Hue: 160 || style="background:#F5FFFC; color:black; text-align:center;" | #F5FFFC || style="background:#E6FFF7; color:black; text-align:center;" | #E6FFF7 || style="background:#CEF2E6; color:black; text-align:center;" | #CEF2E6 || style="background:#A3BFB6; color:black; text-align:center;" | #A3BFB6
|-
| style="background:#00FFD5; color:black; text-align:center;" | Hue: 170 || style="background:#F5FFFD; color:black; text-align:center;" | #F5FFFD || style="background:#E6FFFB; color:black; text-align:center;" | #E6FFFB || style="background:#CEF2EC; color:black; text-align:center;" | #CEF2EC || style="background:#A3BFBA; color:black; text-align:center;" | #A3BFBA
|-
| style="background:#00FFFF; color:black; text-align:center;" | Hue: 180 || style="background:#F5FFFF; color:black; text-align:center;" | #F5FFFF || style="background:#E6FFFF; color:black; text-align:center;" | #E6FFFF || style="background:#CEF2F2; color:black; text-align:center;" | #CEF2F2 || style="background:#A3BFBF; color:black; text-align:center;" | #A3BFBF
|-
| style="background:#00D5FF; color:black; text-align:center;" | Hue: 190 || style="background:#F5FDFF; color:black; text-align:center;" | #F5FDFF || style="background:#E6FBFF; color:black; text-align:center;" | #E6FBFF || style="background:#CEECF2; color:black; text-align:center;" | #CEECF2 || style="background:#A3BABF; color:black; text-align:center;" | #A3BABF
|-
| style="background:#00AAFF; color:white; text-align:center;" | Hue: 200 || style="background:#F5FCFF; color:black; text-align:center;" | #F5FCFF || style="background:#E6F7FF; color:black; text-align:center;" | #E6F7FF || style="background:#CEE6F2; color:black; text-align:center;" | #CEE6F2 || style="background:#A3B6BF; color:black; text-align:center;" | #A3B6BF
|-
| style="background:#0080FF; color:white; text-align:center;" | Hue: 210 || style="background:#F5FAFF; color:black; text-align:center;" | #F5FAFF || style="background:#E6F2FF; color:black; text-align:center;" | #E6F2FF || style="background:#CEE0F2; color:black; text-align:center;" | #CEE0F2 || style="background:#A3B1BF; color:black; text-align:center;" | #A3B1BF
|-
| style="background:#0055FF; color:white; text-align:center;" | Hue: 220 || style="background:#F5F8FF; color:black; text-align:center;" | #F5F8FF || style="background:#E6EEFF; color:black; text-align:center;" | #E6EEFF || style="background:#CEDAF2; color:black; text-align:center;" | #CEDAF2 || style="background:#A3ACBF; color:black; text-align:center;" | #A3ACBF
|-
| style="background:#002AFF; color:white; text-align:center;" | Hue: 230 || style="background:#F5F7FF; color:black; text-align:center;" | #F5F7FF || style="background:#E6EAFF; color:black; text-align:center;" | #E6EAFF || style="background:#CED4F2; color:black; text-align:center;" | #CED4F2 || style="background:#A3A7BF; color:black; text-align:center;" | #A3A7BF
|-
| style="background:#0000FF; color:white; text-align:center;" | Hue: 240 || style="background:#F5F5FF; color:black; text-align:center;" | #F5F5FF || style="background:#E6E6FF; color:black; text-align:center;" | #E6E6FF || style="background:#CECEF2; color:black; text-align:center;" | #CECEF2 || style="background:#A3A3BF; color:black; text-align:center;" | #A3A3BF
|-
| style="background:#2B00FF; color:white; text-align:center;" | Hue: 250 || style="background:#F7F5FF; color:black; text-align:center;" | #F7F5FF || style="background:#EAE6FF; color:black; text-align:center;" | #EAE6FF || style="background:#D4CEF2; color:black; text-align:center;" | #D4CEF2 || style="background:#A7A3BF; color:black; text-align:center;" | #A7A3BF
|-
| style="background:#5500FF; color:white; text-align:center;" | Hue: 260 || style="background:#F8F5FF; color:black; text-align:center;" | #F8F5FF || style="background:#EEE6FF; color:black; text-align:center;" | #EEE6FF || style="background:#DACEF2; color:black; text-align:center;" | #DACEF2 || style="background:#ACA3BF; color:black; text-align:center;" | #ACA3BF
|-
| style="background:#8000FF; color:white; text-align:center;" | Hue: 270 || style="background:#FAF5FF; color:black; text-align:center;" | #FAF5FF || style="background:#F2E6FF; color:black; text-align:center;" | #F2E6FF || style="background:#E0CEF2; color:black; text-align:center;" | #E0CEF2 || style="background:#B1A3BF; color:black; text-align:center;" | #B1A3BF
|-
| style="background:#AA00FF; color:white; text-align:center;" | Hue: 280 || style="background:#FCF5FF; color:black; text-align:center;" | #FCF5FF || style="background:#F7E6FF; color:black; text-align:center;" | #F7E6FF || style="background:#E6CEF2; color:black; text-align:center;" | #E6CEF2 || style="background:#B6A3BF; color:black; text-align:center;" | #B6A3BF
|-
| style="background:#D400FF; color:white; text-align:center;" | Hue: 290 || style="background:#FDF5FF; color:black; text-align:center;" | #FDF5FF || style="background:#FBE6FF; color:black; text-align:center;" | #FBE6FF || style="background:#ECCEF2; color:black; text-align:center;" | #ECCEF2 || style="background:#BAA3BF; color:black; text-align:center;" | #BAA3BF
|-
| style="background:#FF00FF; color:white; text-align:center;" | Hue: 300 || style="background:#FFF5FF; color:black; text-align:center;" | #FFF5FF || style="background:#FFE6FF; color:black; text-align:center;" | #FFE6FF || style="background:#F2CEF2; color:black; text-align:center;" | #F2CEF2 || style="background:#BFA3BF; color:black; text-align:center;" | #BFA3BF
|-
| style="background:#FF00D4; color:white; text-align:center;" | Hue: 310 || style="background:#FFF5FD; color:black; text-align:center;" | #FFF5FD || style="background:#FFE6FB; color:black; text-align:center;" | #FFE6FB || style="background:#F2CEEC; color:black; text-align:center;" | #F2CEEC || style="background:#BFA3BA; color:black; text-align:center;" | #BFA3BA
|-
| style="background:#FF00AA; color:white; text-align:center;" | Hue: 320 || style="background:#FFF5FC; color:black; text-align:center;" | #FFF5FC || style="background:#FFE6F7; color:black; text-align:center;" | #FFE6F7 || style="background:#F2CEE6; color:black; text-align:center;" | #F2CEE6 || style="background:#BFA3B6; color:black; text-align:center;" | #BFA3B6
|-
| style="background:#FF0080; color:white; text-align:center;" | Hue: 330 || style="background:#FFF5FA; color:black; text-align:center;" | #FFF5FA || style="background:#FFE6F2; color:black; text-align:center;" | #FFE6F2 || style="background:#F2CEE0; color:black; text-align:center;" | #F2CEE0 || style="background:#BFA3B1; color:black; text-align:center;" | #BFA3B1
|-
| style="background:#FF0055; color:white; text-align:center;" | Hue: 340 || style="background:#FFF5F8; color:black; text-align:center;" | #FFF5F8 || style="background:#FFE6EE; color:black; text-align:center;" | #FFE6EE || style="background:#F2CEDA; color:black; text-align:center;" | #F2CEDA || style="background:#BFA3AC; color:black; text-align:center;" | #BFA3AC
|-
| style="background:#FF002B; color:white; text-align:center;" | Hue: 350 || style="background:#FFF5F7; color:black; text-align:center;" | #FFF5F7 || style="background:#FFE6EA; color:black; text-align:center;" | #FFE6EA || style="background:#F2CED4; color:black; text-align:center;" | #F2CED4 || style="background:#BFA3A7; color:black; text-align:center;" | #BFA3A7
|-
| style="background:#000000; color:white; text-align:center;" | H: 0 S: 0 || style="background:#FFFFFF; color:black; text-align:center;" | #FFFFFF || style="background:#F9F9F9; color:black; text-align:center;" | #F9F9F9 || style="background:#F2F2F2; color:black; text-align:center;" | #F2F2F2 || style="background:#BFBFBF; color:black; text-align:center;" | #BFBFBF
|}

==Wikimedia colour schemes{{anchors|Wikimedia color schemes}}==
===Wikipedia===
{{see also|Wikipedia:Skin}}
Wikipedia uses this colour scheme on its [[Main Page]]. 
{{block indent|left=1.5|1=''Note: the colour for the border of the lighter boxes is also the colour of the backgrounds of the darker (title) boxes.''}}
<!-- legacy XHTML table visible with any browser -->
{|
|-
| Hue: 150
| style="background:#F5FFFA; border:1px solid #CEF2E0; padding:1em; margin:auto;"| background:<kbd>#F5FFFA</kbd> border:<kbd>#CEF2E0</kbd> || style="background:#cef2e0;"| &#160;
| style="background:#CEF2E0; border:1px solid #A3BFB1; padding:1em; margin:auto;"| background:<kbd>#CEF2E0</kbd> border:<kbd>#A3BFB1</kbd> || style="background:#A3BFB1;"| &#160;
|-
| Hue: 210
| style="background:#F5FAFF; border:1px solid #CEE0F2; padding:1em; margin:auto;"| background:<kbd>#F5FAFF</kbd> border:<kbd>#CEE0F2</kbd> || style="background:#cedff2;"| &#160;
| style="background:#CEE0F2; border:1px solid #A3B1BF; padding:1em; margin:auto;"| background:<kbd>#CEE0F2</kbd> border:<kbd>#A3B1BF</kbd> || style="background:#A3B1BF;"| &#160;
|-
| Hue: 270
| style="background:#FAF5FF; border:1px solid #E0CEF2; padding:1em; margin:auto;"| background:<kbd>#FAF5FF</kbd> border:<kbd>#E0CEF2</kbd> || style="background:#E0CEF2;"| &#160;
| style="background:#E0CEF2; border:1px solid #B1A3BF; padding:1em; margin:auto;"| background:<kbd>#E0CEF2</kbd> border:<kbd>#B1A3BF</kbd> || style="background:#B1A3BF;"| &#160;
|-
| Hue: 330
| style="background:#FFF5FA; border:1px solid #F2CEE0; padding:1em; margin:auto;"| background:<kbd>#FFF5FA</kbd> border:<kbd>#F2CEE0</kbd> || style="background:#F2CEE0;"| &#160;
| style="background:#F2CEE0; border:1px solid #BFA3B1; padding:1em; margin:auto;"| background:<kbd>#F2CEE0</kbd> border:<kbd>#BFA3B1</kbd> || style="background:#BFA3B1;"| &#160;
|}

And additionally on the [[Wikipedia:Community Portal|Community Portal]]:
{|
|-
| Hue: 030
| style="background:#FFFAF5; border:1px solid #F2E0CE; padding:1em; margin:auto;"| background:<kbd>#FFFAF5</kbd> border:<kbd>#F2E0CE</kbd> || style="background:#F2E0CE;"| &#160;
| style="background:#F2E0CE; border:1px solid #BFB1A3; padding:1em; margin:auto;"| background:<kbd>#F2E0CE</kbd> border:<kbd>#BFB1A3</kbd> || style="background:#BFB1A3;"| &#160;
|}

Additional 3-colour palettes using this same generation scheme are at the top of the [[Help talk:Using colours|talk page]]. In the [[Wikipedia:Monobook|Monobook skin]], the background colour of Wikipedia pages is {{Mono|#F8FCFF}}. In the [[Wikipedia:Vector 2022|Vector 2022]] skin, the background colour on all pages is {{Mono|#FFFFFF}}.

===Commons===
The Wikimedia Commons uses this colour scheme on [[:commons:Main Page]] and [[:commons:Help:Contents]]. Differing from the English Wikipedia, Commons does not use an extra, darker colour for bordering the header. Also, the colour sets are not derived from a hue the way the above table does.
{| cellspacing="0" cellpadding="0" style="margin:0 0 1em; width:100% background:white;"
| style="width:50%; vertical-align:top; border:1px solid #abd5f5; background:#f1f5fc;"|
<div style="border-bottom:1px solid #abd5f5; background:#d0e5f5; padding:0.2em 0.5em; font-size:110%; font-weight:bold;">background colour: #d0e5f5</div>
<div style="border-bottom:1px solid #abd5f5; padding:0.4em 1em 1em;">
background colour: #f1f5fc<br />
border colour: #abd5f5</div>
| style="padding:0 0.5em;"|

<!-- Right column 3 orange -->
| style="width:50%; vertical-align:top; border:1px solid #fad67d; background:#faf6ed;"|
<div style="border-bottom:1px solid #fad67d; background:#faecc8; padding:0.2em 0.5em; font-size:110%; font-weight:bold;">background colour: #faecc8</div>
<div style="border-bottom:1px solid #fad67d; padding:0.4em 1em 1em;">
background colour: #faf6ed<br />
border colour: #fad67d</div>
|}

=== Wikimedia Foundation ===
The Wikimedia Foundation Design team has [[wmdoc:codex/latest/style-guide/colors.html|provided a color palette]] with colors being marked toward level AA conformance. It is used for all user-interface elements across products and in the main Wikimedia themes, desktop and mobile. However, it does not consider linked text.

==Accessibility==
{{main|Wikipedia:Manual of Style/Accessibility/Colors}}
It is best to choose background colors that offer sufficient contrast in relation to text and [[Help:Link color|blue links]], which is also the color of references, both of which are very common in most articles. Use the [https://webaim.org/resources/linkcontrastchecker/?fcolor=202122&bcolor=FFFFFF&lcolor=3366CC WCAG link contrast checker] to ensure that the chosen background color offers the recommended WCAG AA level of contrast against normal text ({{Legend inline|#202122|{{mono|#202122}}}}) and blue links ({{Legend inline|#3366CC|{{mono|#3366CC}}}} for the default [[Wikipedia:Vector 2022|Vector 2022]] skin).<ref>{{cite web |title=WCAG 2.0 and Link Colors |url=https://webaim.org/blog/wcag-2-0-and-link-colors/ |website=WebAIM Blog |publisher=WebAIM |date=22 July 2009}}</ref> 
{| class="wikitable plainrowheaders" style="text-align: center;"
|+ Compatible WCAG AAA background colors against text and links
|-
! scope="col" colspan=4 | Base color
! scope="col" colspan=3 | Darkest backgrounds for dark text
! scope="col" rowspan="2" style="max-width: 7em;" | Lightest background for white text
|-
! scope="col" | Name
! scope="col" | [[HSL and HSV|Hue]]
! scope="col" | [[Hex triplet|Hex]]
! scope="col" | Color
! scope="col" | Text and [[Help:Link color|links]]<br/>(WCAG AA)
! scope="col" | Text only
! scope="col" | Pure black text<br/>(not default)
|-
! scope="row" | Red
| 0°
| FF0000
| style="background-color:#FF0000" |
| style="background-color:#FFE6E6; color:#3366CC;" | FFE6E6
| style="background-color:#FF8888;" | FF8888
| style="background-color:#FF6060; color:#000;" | FF6060
| style="background-color:#B60000; color:#FFF;" | B60000
|-
! scope="row" | Orange
| 30°
| FF8000
| style="background-color:#FF8000" |
| style="background-color:#FFE8D0; color:#3366CC;" | FFE8D0
| style="background-color:#FF8E1C;" | FF8E1C
| style="background-color:#E97500; color:#000;" | E97500
| style="background-color:#8C4600; color:#FFF;" | 8C4600
|-
! scope="row" | Yellow
| 60°
| FFFF00
| style="background-color:#FFFF00" |
| style="background-color:#F3F300; color:#3366CC;" | F3F300
| style="background-color:#B1B100;" | B1B100
| style="background-color:#9B9B00; color:#000;" | 9B9B00
| style="background-color:#5C5C00; color:#FFF;" | 5C5C00
|-
! scope="row" | Chartreuse
| 90°
| 80FF00
| style="background-color:#80FF00" |
| style="background-color:#B9FF72; color:#3366CC;" | B9FF72
| style="background-color:#61C100;" | 61C100
| style="background-color:#54A900; color:#000;" | 54A900
| style="background-color:#326500; color:#FFF;" | 326500
|-
! scope="row" | Green
| 120°
| 00FF00
| style="background-color:#00FF00" |
| style="background-color:#ABFFAB; color:#3366CC;" | ABFFAB
| style="background-color:#00C700;" | 00C700
| style="background-color:#00AE00; color:#000;" | 00AE00
| style="background-color:#006800; color:#FFF;" | 006800
|-
! scope="row" | Spring green
| 150°
| 00FF80
| style="background-color:#00FF80" |
| style="background-color:#9DFFCE; color:#3366CC;" | 9DFFCE
| style="background-color:#00C563;" | 00C563
| style="background-color:#00AC56; color:#000;" | #00AC56
| style="background-color:#006733; color:#FFF;" | 006733
|-
! scope="row" | Cyan
| 180°
| 00FFFF
| style="background-color:#00FFFF" |
| style="background-color:#7DFFFF; color:#3366CC;" | 7DFFFF
| style="background-color:#00BFBF;" | 00BFBF
| style="background-color:#00A6A6; color:#000;" | 00A6A6
| style="background-color:#006363; color:#FFF;" | 006363
|-
! scope="row" | Azure
| 210°
| 0080FF
| style="background-color:#0080FF" |
| style="background-color:#DCEEFF; color:#3366CC;" | DCEEFF
| style="background-color:#60B0FF;" | 60B0FF
| style="background-color:#3098FF; color:#000;" | 3098FF
| style="background-color:#0057AF; color:#FFF;" | 0057AF
|-
! scope="row" | Blue
| 240°
| 0000FF
| style="background-color:#0000FF" |
| style="background-color:#EAEAFF; color:#3366CC;" | EAEAFF
| style="background-color:#A2A2FF;" | A2A2FF
| style="background-color:#8888FF; color:#000;" | 8888FF
| style="background-color:#3030FF; color:#FFF;" | 3030FF
|-
! scope="row" | Violet
| 270°
| 8000FF
| style="background-color:#8000FF" |
| style="background-color:#F3E7FF; color:#3366CC;" | F3E7FF
| style="background-color:#C994FF;" | C994FF
| style="background-color:#B974FF; color:#000;" | B974FF
| style="background-color:#7600EC; color:#FFF;" | 7600EC
|-
! scope="row" | Magenta
| 300°
| FF00FF
| style="background-color:#FF00FF" |
| style="background-color:#FFE3FF; color:#3366CC;" | FFE3FF
| style="background-color:#FF73FF;" | FF73FF
| style="background-color:#FF29FF; color:#000;" | FF29FF
| style="background-color:#9F009F; color:#FFF;" | 9F009F
|-
! scope="row" | Rose
| 330°
| FF0080
| style="background-color:#FF0080" |
| style="background-color:#FFE4F1; color:#3366CC;" | FFE4F1
| style="background-color:#FF81C0;" | FF81C0
| style="background-color:#FF52A8; color:#000;" | FF52A8
| style="background-color:#B00058; color:#FFF;" | B00058
|-
! scope="row" | Grey
| —
| 808080
| style="background-color:#808080" |
| style="background-color:#EBEBEB; color:#3366CC;" | EBEBEB
| style="background-color:#ABABAB;" | ABABAB
| style="background-color:#959595; color:#000;" | 959595
| style="background-color:#595959; color:#FFF;" | 595959
|}


===Schemes for colour-blind readers===
{{Shortcut|H:Colorblind}}
Approximately 1 in 12 men and 1 in 200 women with Northern European ancestry have [[color blindness#Red–green colour blindness|red-green colour blindness]]; this and other types affect people worldwide.<ref>{{Cite web|last=|first=|date=1 January 2015|title=Color Vision Deficiency|url=https://medlineplus.gov/genetics/condition/color-vision-deficiency/#frequency|archive-url=|archive-date=|access-date=29 January 2021|website=MedlinePlus|publisher=U.S. National Library of Medicine}}</ref> This table shows "safe" groups of colours which are distinguishable to most colour-blind people, although colour should never be used as the sole method to convey information.

See also [[:Commons:Commons:Creating accessible illustrations]] for color blind friendly palettes.

{| border=1 cellpadding=4 style="border-collapse: collapse; border: 1px solid black;"
|- style="vertical-align:top;text-align:center;"
! Colour 1 !! Colour 2 !! Colour 3 !! Colour 4 !! Colour 5 !! Colour 6
|-
| rowspan="4" style="background: white; color: black;" | White
| rowspan="2" style="background: yellow; color: black;"| Yellow
| rowspan="2" style="background: blue; color: white;" | Blue
| style="background: red; color: white;" | Red
| rowspan="4" style="background: black; color: white;" | Black
| rowspan="2" style="background: gray; color: white;" | Grey
|-
| style="background: green; color: white;" | Green
|-
| rowspan="2" style="background: lime; color: black;"| Lime
| rowspan="2" style="background: purple; color: white;" | Purple
| style="background: brown; color: white;" | Brown
| style="background: cyan; color: black;" | Cyan
|-
| style="background: orange; color: black;" | Orange
| style="background: pink; color: black;" | Pink
|}

* Pick a maximum of one colour from each column. Do not use more than one colour from any one column.
* Use large expanses of the colour. If you're colouring text, use bold and a large font.
* For small expanses of colour, such as thin lines, clearly label them with text, or use non-colour techniques such as font styles (bold or italic), line styles (dots and dashes) or cross-hatching (stripes, [[checkerboard|checkers]] or [[polka-dot]]s).
* Use bright mid-range colours, like children's crayons. Do not use light or dark variants of the colours.
* If you need more colours... hard luck. Instead use non-colour techniques such as labelling, font styles (bold or italic), line styles (dots and dashes) or cross-hatching (stripes, checkers or polka-dots).
* If you are colour-blind yourself, check your revised image with a colour-sighted person to confirm the meaning is intact.

The following utilities may be of use in determining whether a revised image is distinguishable to colour-blind users. Typically they take a web page or image file as an input, and render a colour-blind simulated image as output:
* [https://addons.mozilla.org/en-US/firefox/search/?q=Colorblind&cat=all Mozilla Firefox color-blind addons]
* [https://michelf.ca/projects/sim-daltonism/ Sim Daltonism] simulates color blind vision and displays the results in a floating palette for macOS and iOS. Freeware.
* [https://www.colororacle.org/ Color Oracle] downloadable, free color blindness simulator for Windows, Mac and Linux. Freeware.

==Colour ramps==
The standard rainbow should not be used to represent continuous data, because it creates artificial thresholds; humans do not see the spectrum as a smooth ramp. Greyscales, or a perceptually-even colour ramps, or a colour map chosen to deliberately highlight certain features, are preferable. Diverging colour ramps (two colour extremes around a white or black neutral value) tend to hide some high-frequency features.

Colours have cultural connotations; pick ones that match your data. That is, a diverging colour ramp with extremes "<span style="color: red">hot</span>, <span style="color: blue">cold</span>" will be easier to understand than the reverse (<span style="color: blue">hot</span>, <span style="color: red">cold</span>).

* {{cite web |last1=McNeall |first1=Doug |title=Picking a colour scale for scientific graphics |url=https://betterfigures.org/2015/06/23/picking-a-colour-scale-for-scientific-graphics/ |website=Better Figures |language=en |date=23 June 2015}}
*{{cite web |title=Elegant Figures - Subtleties of Color (Part 1 of 6) |url=https://earthobservatory.nasa.gov/blogs/elegantfigures/2013/08/05/subtleties-of-color-part-1-of-6/ |website=earthobservatory.nasa.gov |language=en |date=1 February 2020}}
*{{cite journal |last1=Rougier |first1=Nicolas P. |last2=Droettboom |first2=Michael |last3=Bourne |first3=Philip E. |title=Ten Simple Rules for Better Figures |journal=PLOS Computational Biology |date=11 September 2014 |volume=10 |issue=9 |pages=e1003833 |doi=10.1371/journal.pcbi.1003833 |pmid=25210732 |pmc=4161295 |bibcode=2014PLSCB..10E3833R |doi-access=free }}

==See also==
===Templates===
*To colour text and background:
** [[Template:Font color]]
*To provide example squares of colour:
** [[Template:Color sample]]
** [[Template:Swatch]]
** [[Template:Swatch inline]]

===Related help pages===
* {{slink|Wikipedia:Manual of Style/Accessibility|Color}} 
* [[Wikipedia:Manual of Style/Accessibility/Colors]]
* [[Help:How to reduce colors for saving a JPEG as PNG]]
* [[Help:Link color]]
* [[Help:Displaying a formula#Color]]
* [[Wikipedia:Infobox colours]] – inactive
* [[Wikipedia:WikiProject Usability/Color]] – inactive

===Somewhat related pages===
* {{slink|Wikipedia:Manual of Style/Text formatting|Color}}
* [[Wikipedia:Template standardisation]]
* [[Wikipedia:WikiProject Color]]

===Encyclopedia articles===
* [[Colour picker]]
* [[Web colours]]

===Lists of colours===
*[[Lists of colours]]
*Template that list colours
** {{tl|Colornames}}
** {{tl|Formula Supported Named Colors}}
** {{tl|X11 color chart}}
** {{tl|Web Colors}}
===Guide to colours===
{{Web Colors|state=plain}}

==References==
{{reflist}}

{{Wikipedia technical help|collapsed}}
[[Category:Wikipedia accessibility|Colours]]