Help:Using colours: Difference between revisions

Revision as of 17:36, 31 May 2024

Latest revision as of 21:04, 20 August 2025

(37 intermediate revisions by 12 users not shown)

Line 1:

{{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}}

{{Warning|1={{big|'''Links should clearly be identifiable as links to readers'''.}}<br />Refrain from implementing coloured links that may impede user ability to distinguish links from regular text, or colour links for purely aesthetic reasons. See the guides to editing articles for accessibility at [[WP:CONTRAST|contrast]], [[Wikipedia:Manual of Style/Accessibility|accessibility]] and [[WP:NAVBOXCOLOUR|navbox colors]].}}

To use a colour in a [[wikipedia:template|template]] or [[wikipedia:table|table]] you can use the [[hex triplet]] (e.g. bronze{{Mono|#CD7F32}} is #CD7F32bronze) 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 otherwebpages entities,with usingaccessibility '''[https://colorbrewer2.org/in thismind tool]'''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 makeapply acolour wordto have colourtext, use:

<code><nowiki><span style="color:</nowiki>''hex triplet or colour name''<nowiki>">text</span></nowiki></code>

Note that you can'tcannot use the BritishCommonwealth spelling, "colour", in thisHTML contexttags used in wikitext.

Examples:

*<code><nowiki><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><nowiki><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><nowiki><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}}===

[[Template:{{Tl|Font color]]}}, or its redirect [[Template:{{Tl|Font colour]]}}, can also be used.

<code><nowiki>{{tlx|Font colour|fontcolour|backgroundcolour|Your text here}}</nowiki></code>

{{markup

{| class="wikitable" style="width:100%; text-align:left;"

|<nowiki>{{font color|red|This text is different}}</nowiki>

! style="width: 450px" | Example

|{{font color|red|This text is different}}<br>to change text-color only (Note: do not style text as a link)

! Result

|<nowiki>{{font color|red|yellow|This text is different}}</nowiki>

|- style="background-color: #fff; height: 80px;"

|&nbsp;&nbsp;<code><nowiki>{{font color|red|yellow|This text is different}}</nowiki></codebr>to change text and background color

|<nowiki>{{font color|red|yellow|This text is different}}<br /nowiki>to change text-color only (Note: do not style text as a link)

|{{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.

|-style="background-color: #fff; height: 80px; padding-left: 6px;"

}}

|&nbsp;&nbsp;<code><nowiki>{{font color|red|yellow|This text is different}}</nowiki></code>

|{{font color|red|yellow|This text is different}}<br /> to change text and background color

|-style="background-color: #fff; height: 80px; padding-left: 6px;"

|&nbsp;&nbsp;<code><nowiki>{{font color||yellow|This text is different}}</nowiki></code>

|{{font color||yellow|This text is different}}<br />to change background color only<br />'''note''' the two pipe-characters <code>&#124;&#124;</code>

|}

==<span id="Color generation guide">Colour generation guide</span>==

{{for|a list of tools for color scheme selection and creation|#Additional tools for color scheme selection}}

*The method used for selecting the colours 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]].

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;"

|+

|-

Line 48 ⟶ 47:

! &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

|}

Line 126 ⟶ 125:

===Wikipedia===

{{see also|Wikipedia:Skin}}

Wikipedia uses this colour scheme on its [[Main Page]] and, for the final row, on the [[Wikipedia:Community Portal|Community Portal]].

{{block indent|left=1.5hatnote|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 !!colspan=2| Light Box<br/>background / border !!colspan=2| Title<br/>background / border

|-

| Hue: 150°

| style="background:#F5FFFA; border:1px solid #CEF2E0; padding:1em; margin:auto;"| background:<kbd>{{Mono|#F5FFFA<}} /kbd> border:<kbd>{{Mono|#CEF2E0</kbd> |}}
| style="background:#cef2e0CEF2E0;"| &#160;

| style="background:#CEF2E0; border:1px solid #A3BFB1; padding:1em; margin:auto;"| background:<kbd>{{Mono|#CEF2E0</kbd>}} border:<kbd>#A3BFB1</kbd> {{Mono|#A3BFB1}}
| style="background:#A3BFB1;"| &#160;

<!--From today's featured article; Did you know ...-->

|-

| Hue: 210°

| style="background:#F5FAFF; border:1px solid #CEE0F2CEDFF2; padding:1em; margin:auto;"| background:<kbd>{{Mono|#F5FAFF</kbd>}} border:<kbd>#CEE0F2</kbd> {{Mono|#CEDFF2}}
| style="background:#cedff2CEDFF2;"| &#160;

| style="background:#CEE0F2CEDFF2; border:1px solid #A3B1BFA3B0BF; padding:1em; margin:auto;"| background:<kbd>{{Mono|#CEE0F2</kbd>CEDFF2}} border:<kbd>#A3B1BF</kbd> {{Mono|| style="background:#A3B1BF;"| &#160;A3B0BF}}

| style="background:#A3B1BF;"| &#160;

<!--In the news; On this day-->

|-

| Hue: 270°

| style="background:#FAF5FF; border:1px solid #E0CEF2DDCEF2; padding:1em; margin:auto;"| background:<kbd>{{Mono|#FAF5FF</kbd>}} border:<kbd>#E0CEF2</kbd> {{Mono|#DDCEF2}}
| style="background:#E0CEF2DDCEF2;"| &#160;

| style="background:#E0CEF2DDCEF2; border:1px solid #B1A3BFAFA3BF; padding:1em; margin:auto;"| background:<kbd>{{Mono|#E0CEF2</kbd>DDCEF2}} border:<kbd>#B1A3BF</kbd> {{Mono|| style="background:#B1A3BF;"| &#160;AFA3BF}}

| style="background:#AFA3BF;"| &#160;

<!--Today's featured picture-->

|-

| Hue: 330°

| style="background:#FFF5FA; border:1px solid #F2CEE0F2CEDD; padding:1em; margin:auto;"| background:<kbd>{{Mono|#FFF5FA</kbd>}} border:<kbd>#F2CEE0</kbd> {{Mono|#F2CEDD}}
| style="background:#F2CEE0F2CEDD;"| &#160;

| style="background:#F2CEE0F2CEDD; border:1px solid #BFA3B1BFA3AF; padding:1em; margin:auto;"| background:<kbd>{{Mono|#F2CEE0</kbd>F2CEDD}} border:<kbd>#BFA3B1</kbd> {{Mono|| style="background:#BFA3B1;"| &#160;BFA3AF}}

| style="background:#BFA3AF;"| &#160;

|}

<!--From today's featured list-->

And additionally on the [[Wikipedia:Community Portal|Community Portal]]:

{|

|-

| 30°

| Hue: 030

| style="background:#FFFAF5; border:1px solid #F2E0CE; padding:1em; margin:auto;"| background:<kbd>{{Mono|#FFFAF5</kbd>}} border:<kbd>#F2E0CE</kbd> {{Mono|#F2E0CE}}
| style="background:#F2E0CE;"| &#160;

| style="background:#F2E0CE; border:1px solid #BFB1A3; padding:1em; margin:auto;"| background:<kbd>{{Mono|#F2E0CE</kbd>}} border:<kbd>#BFB1A3</kbd> {{Mono|#BFB1A3}}
| 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 in light mode 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;"

!colspan=2| style="width:50%;Light vertical-align:top;Box<br/>background / border:1px solid #abd5f5;!!colspan=2| Title<br/>background:#f1f5fc;"| / border

|-

<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="background:#F1F5FC; border-bottom:1px solid #abd5f5ABD5F5; padding:0.4em 1em; 1emmargin:auto;">| {{Mono|#F1F5FC}} / {{Mono|#ABD5F5}}

| style="background:#ABD5F5;"| &#160;

background colour: #f1f5fc<br />

| style="background:#D0E5F5; border:1px solid #ABD5F5; padding:1em; margin:auto;"| {{Mono|#D0E5F5}} / {{Mono|#ABD5F5}}

border colour: #abd5f5</div>

| style="paddingbackground:0 0.5em#ABD5F5;"| &#160;

|-

| style="background:#FAF6ED; border:1px solid #FAD67D; padding:1em; margin:auto;"| {{Mono|#FAF6ED}} / {{Mono|#ABD5F5}}

| style="background:#FAD67D;"| &#160;

| style="background:#FAECC8; border:1px solid #FAD67D; padding:1em; margin:auto;"| {{Mono|#FAECC8}} / {{Mono|#FAD67D}}

| style="background:#FAD67D;"| &#160;

<!-- 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 ===

==Schemes for colour-blind readers==

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°

| {{Mono|#FF0000}}

| style="background-color:#FF0000" |

| style="background-color:#FFE6E6; color:#3366CC;" | {{Mono|#FFE6E6}}

| style="background-color:#FF8888;" | {{Mono|#FF8888}}

| style="background-color:#FF6060; color:#000;" | {{Mono|#FF6060}}

| style="background-color:#B60000; color:#FFF;" | {{Mono|#B60000}}

|-

! scope="row" | Orange

| 30°

| {{Mono|#FF8000}}

| style="background-color:#FF8000" |

| style="background-color:#FFE8D0; color:#3366CC;" | {{Mono|#FFE8D0}}

| style="background-color:#FF8E1C;" | {{Mono|#FF8E1C}}

| style="background-color:#E97500; color:#000;" | {{Mono|#E97500}}

| style="background-color:#8C4600; color:#FFF;" | {{Mono|#8C4600}}

|-

! scope="row" | Yellow

| 60°

| {{Mono|#FFFF00}}

| style="background-color:#FFFF00" |

| style="background-color:#F3F300; color:#3366CC;" | {{Mono|#F3F300}}

| style="background-color:#B1B100;" | {{Mono|#B1B100}}

| style="background-color:#9B9B00; color:#000;" | {{Mono|#9B9B00}}

| style="background-color:#5C5C00; color:#FFF;" | {{Mono|#5C5C00}}

|-

! scope="row" | Chartreuse

| 90°

| {{Mono|#80FF00}}

| style="background-color:#80FF00" |

| style="background-color:#B9FF72; color:#3366CC;" | {{Mono|#B9FF72}}

| style="background-color:#61C100;" | {{Mono|#61C100}}

| style="background-color:#54A900; color:#000;" | {{Mono|#54A900}}

| style="background-color:#326500; color:#FFF;" | {{Mono|#326500}}

|-

! scope="row" | Green

| 120°

| {{Mono|#00FF00}}

| style="background-color:#00FF00" |

| style="background-color:#ABFFAB; color:#3366CC;" | {{Mono|#ABFFAB}}

| style="background-color:#00C700;" | {{Mono|#00C700}}

| style="background-color:#00AE00; color:#000;" | {{Mono|#00AE00}}

| style="background-color:#006800; color:#FFF;" | {{Mono|#006800}}

|-

! scope="row" | Spring green

| 150°

| {{Mono|#00FF80}}

| style="background-color:#00FF80" |

| style="background-color:#9DFFCE; color:#3366CC;" | {{Mono|#9DFFCE}}

| style="background-color:#00C563;" | {{Mono|#00C563}}

| style="background-color:#00AC56; color:#000;" | {{Mono|#00AC56}}

| style="background-color:#006733; color:#FFF;" | {{Mono|#006733}}

|-

! scope="row" | Cyan

| 180°

| {{Mono|#00FFFF}}

| style="background-color:#00FFFF" |

| style="background-color:#7DFFFF; color:#3366CC;" | {{Mono|#7DFFFF}}

| style="background-color:#00BFBF;" | {{Mono|#00BFBF}}

| style="background-color:#00A6A6; color:#000;" | {{Mono|#00A6A6}}

| style="background-color:#006363; color:#FFF;" | {{Mono|#006363}}

|-

! scope="row" | Azure

| 210°

| {{Mono|#0080FF}}

| style="background-color:#0080FF" |

| style="background-color:#DCEEFF; color:#3366CC;" | {{Mono|#DCEEFF}}

| style="background-color:#60B0FF;" | {{Mono|#60B0FF}}

| style="background-color:#3098FF; color:#000;" | {{Mono|#3098FF}}

| style="background-color:#0057AF; color:#FFF;" | {{Mono|#0057AF}}

|-

! scope="row" | Blue

| 240°

| {{Mono|#0000FF}}

| style="background-color:#0000FF" |

| style="background-color:#EAEAFF; color:#3366CC;" | {{Mono|#EAEAFF}}

| style="background-color:#A2A2FF;" | {{Mono|#A2A2FF}}

| style="background-color:#8888FF; color:#000;" | {{Mono|#8888FF}}

| style="background-color:#3030FF; color:#FFF;" | {{Mono|#3030FF}}

|-

! scope="row" | Violet

| 270°

| {{Mono|#8000FF}}

| style="background-color:#8000FF" |

| style="background-color:#F3E7FF; color:#3366CC;" | {{Mono|#F3E7FF}}

| style="background-color:#C994FF;" | {{Mono|#C994FF}}

| style="background-color:#B974FF; color:#000;" | {{Mono|#B974FF}}

| style="background-color:#7600EC; color:#FFF;" | {{Mono|#7600EC}}

|-

! scope="row" | Magenta

| 300°

| {{Mono|#FF00FF}}

| style="background-color:#FF00FF" |

| style="background-color:#FFE3FF; color:#3366CC;" | {{Mono|#FFE3FF}}

| style="background-color:#FF73FF;" | {{Mono|#FF73FF}}

| style="background-color:#FF29FF; color:#000;" | {{Mono|#FF29FF}}

| style="background-color:#9F009F; color:#FFF;" | {{Mono|#9F009F}}

|-

! scope="row" | Rose

| 330°

| {{Mono|#FF0080}}

| style="background-color:#FF0080" |

| style="background-color:#FFE4F1; color:#3366CC;" | {{Mono|#FFE4F1}}

| style="background-color:#FF81C0;" | {{Mono|#FF81C0}}

| style="background-color:#FF52A8; color:#000;" | {{Mono|#FF52A8}}

| style="background-color:#B00058; color:#FFF;" | {{Mono|#B00058}}

|-

! scope="row" | Grey

| —

| {{Mono|808080}}

| style="background-color:#808080" |

| style="background-color:#EBEBEB; color:#3366CC;" | {{Mono|#EBEBEB}}

| style="background-color:#ABABAB;" | {{Mono|#ABABAB}}

| style="background-color:#959595; color:#000;" | {{Mono|#959595}}

| style="background-color:#595959; color:#FFF;" | {{Mono|#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.

Line 190 ⟶ 338:

| rowspan="2" style="background: blue; color: white;" | Blue

| style="background: red; color: white;" | Red

| rowspan="24" style="background: black; color: white;" | Black

| rowspan="2" style="background: gray; color: white;" | Grey

|-

Line 198 ⟶ 346:

| rowspan="2" style="background: purple; color: white;" | Purple

| style="background: brown; color: white;" | Brown

| rowspan="2" style="background: darkred; color: white;" | Dark Red

| style="background: cyan; color: black;" | Cyan

|-

Line 225 ⟶ 372:

*{{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 }}

== Contrast checking tools ==

{{seealso|Wikipedia:Manual of Style/Accessibility/CSS colors for text on white}}

{{see|Wikipedia:Tools}}

{{short|WP:COLORTOOLS|H:COLORTOOLS}}

You can use an online tool or software to check the color contrast ratio:<!-- Limit to 3 to 5 -->

* {{URL|https://webaim.org/resources/contrastchecker/|WebAIM contrast checker}}

* {{URL|https://whocanuse.com/|WhoCanUse}}

* [[File:Font Awesome 5 solid laptop-code.svg|18px|Warning: External software program]]{{nbsp}}{{URL|https://www.tpgi.com/color-contrast-checker/|Color contrast analyser application}}

Before using a tool, check if it supports [[Web Content Accessibility Guidelines|WCAG 2.0]], as older tools based on WCAG 1.0 are outdated.

==== Additional tools for color scheme selection ====

* [[wmdoc:codex/latest/style-guide/colors.html|Codex Style Guide for Wikimedia]]

* Chrome {{URL|https://developer.chrome.com/docs/devtools/accessibility/contrast|color contrast debugger}} (with a visual guide and built-in color-picker).

* {{URL|https://www.tpgi.com/color-contrast-checker/|Color contrast analyser}} (downloadable software for precise contrast checks; be sure to only use the up-to-date "luminosity" algorithm, and not the "color brightness/difference", which is outdated.).

* {{URL|https://paletton.com/|Paletton}} (formerly Color Scheme Designer) helps select suitable color schemes for a graphical chart.

* {{URL|https://colorbrewer2.org/|Color Brewer 2.0}} provides color-blind-friendly color schemes for maps.

* {{URL|https://personal.sron.nl/~pault/#fig:scheme_light|Light qualitative color scheme}} provides a set of nine colors that work well for color-blind users and black text labels.

* {{URL|https://www.toptal.com/designers/colorfilter|ColorFilter}} simulates color-blind vision

* {{URL|https://www.color-blindness.com/coblis-color-blindness-simulator/|Coblis Color-blindness simulator}}

* Firefox {{URL|https://addons.mozilla.org/en-US/firefox/addon/nocoffee/|NoCoffee}}

==== Color palettes ====

The Wikimedia Foundation Design team {{URL|https://doc.wikimedia.org/codex/latest/style-guide/colors.html|has provided a color palette}} for AA-level contrast compliance. 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 color.

For AAA-compliant color pairings for different text types (black text, white text, links, and visited links), refer to the table at [[Wikipedia:Manual of Style/Accessibility/Colors]]. For named CSS-based text colors on a white background, refer to [[Wikipedia:Manual of Style/Accessibility/CSS colors for text on white|Wikipedia:Manual of Style/Accessibility/CSS colors]] for recommended colors

==See also==

Line 250 ⟶ 426:

===Encyclopedia articles===

* [[ColorColour picker]]

* [[Web colorscolours]]

===Lists of colorscolours===

*[[Lists of colorscolours]]

*Template that list colorscolours

** {{tl|Colornames}}

** {{tl|Formula Supported Named Colors}}

** {{tl|X11 color chart}}

** {{tl|Web Colors}}

===Guide to colorscolours===

{{Web Colors|state=plain}}