Help:Using colours: Difference between revisions

Revision as of 16:13, 31 May 2024

Latest revision as of 21:04, 20 August 2025

(39 intermediate revisions by 13 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 colorscolours in articles|the civility essay dealing with colorscolours|Wikipedia:Don't edit war over the colorcolour of templates|guidelines on colorcolour use|MOS:COLORCOLOUR|the help page about link color|H:LC|the help page about user contributions|WP:UCP}}

{{Wikipedia how to|HELP:COLOR|WP:COLORSCOLOURS|H:UC}}

{{Warning link color}}

{{Warning|1={{big|'''Links should clearly be identifiable as links to readers'''.}}<br />Refrain from implementing colored links that may impede user ability to distinguish links from regular text, or color 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:NAVBOXCOLOR|navbox colors]].}}

To use a colorcolour 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 color{{anchors|Overriding font color}}==

To make a word have color, use:

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

==Overriding font colour{{anchors|Overriding font color}}==

Note that you can't use the British spelling, "color", in this context.

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><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 colorcolour {{anchors|Template font color}}===

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

<code><nowiki>{{tlx|Font colorcolour|fontcolorfontcolour|backgroundcolorbackgroundcolour|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">ColorColour 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 colors for various top-level pages, e.g. [[Main Page]], [[Wikipedia:Community Portal|Community Portal]], [[Wikipedia:Contents|Contents]], and [[Help:Contents]].<br />The 3 colors are generated using the [[HSV color 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;"

|+

|-

! 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 colorcolour</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 colorcolour.</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 colorcolour schemes{{anchors|Wikimedia color schemes}}==

===Wikipedia===

{{see also|Wikipedia:Skin}}

Wikipedia uses this colorcolour 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 colorcolour for the border of the lighter boxes is also the colorcolour 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-->

|-

| 30°

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

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

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

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

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

{|

!colspan=2| Light Box<br/>background / border !!colspan=2| Title<br/>background / border

|-

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

| Hue: 030

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

| 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:#F2E0CED0E5F5; border:1px solid #BFB1A3ABD5F5; padding:1em; margin:auto;"| background:<kbd>{{Mono|#F2E0CE</kbd>D0E5F5}} border:<kbd>#BFB1A3</kbd> {{Mono|| style="background:#BFB1A3;"| &#160;ABD5F5}}

| style="background:#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 -->

|}

=== Wikimedia Foundation ===

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

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.

===Commons=Accessibility==

{{main|Wikipedia:Manual of Style/Accessibility/Colors}}

The Wikimedia Commons uses this color scheme on [[:commons:Main Page]] and [[:commons:Help:Contents]]. Differing from the English Wikipedia, Commons does not use an extra, darker color for bordering the header. Also, the color sets are not derived from a hue the way the above table does.

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>

{| cellspacing="0" cellpadding="0" style="margin:0 0 1em; width:100% background:white;"

{| class="wikitable plainrowheaders" style="text-align: center;"

| style="width:50%; vertical-align:top; border:1px solid #abd5f5; background:#f1f5fc;"|

|+ Compatible WCAG AAA background colors against text and links

<div style="border-bottom:1px solid #abd5f5; background:#d0e5f5; padding:0.2em 0.5em; font-size:110%; font-weight:bold;">background color: #d0e5f5</div>

|-

<div style="border-bottom:1px solid #abd5f5; padding:0.4em 1em 1em;">

! scope="col" colspan=4 | Base color

background color: #f1f5fc<br />

! scope="col" colspan=3 | Darkest backgrounds for dark text

border color: #abd5f5</div>

! scope="col" rowspan="2" style="max-width: 7em;" | Lightest background for white text

| style="padding:0 0.5em;"|

|-

! scope="col" | Name

<!-- Right column 3 orange -->

! scope="col" | [[HSL and HSV|Hue]]

| style="width:50%; vertical-align:top; border:1px solid #fad67d; background:#faf6ed;"|

! scope="col" | [[Hex triplet|Hex]]

<div style="border-bottom:1px solid #fad67d; background:#faecc8; padding:0.2em 0.5em; font-size:110%; font-weight:bold;">background color: #faecc8</div>

! scope="col" | Color

<div style="border-bottom:1px solid #fad67d; padding:0.4em 1em 1em;">

! scope="col" | Text and [[Help:Link color|links]]<br/>(WCAG AA)

background color: #faf6ed<br />

! scope="col" | Text only

border color: #fad67d</div>

! 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 color-blind readers==

===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 [[colorcolour 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 colorscolours which are distinguishable to most colorcolour-blind people, although colorcolour 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: 0px1px solid black;"

|- style="vertical-align:top;text-align:center;"

! ColorColour 01 !! ColorColour 12 !! ColorColour 23 !! ColorColour 34 !! ColorColour 45 !! Colour 6

|-

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

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

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

| rowspan="4" style="background: lime; color: black;"| Lime

| 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: bluegreen; color: white;" | BlueGreen

|-

| rowspan="2" style="background: maroonlime; color: whiteblack;" | MaroonLime

| rowspan="2" style="background: greenpurple; color: white;" | GreenPurple

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

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

|-

| style="background: purpleorange; color: whiteblack;" | PurpleOrange

| style="background: pink; color: black;" | Pink

|}

* Pick a maximum of one colorcolour from each column. Do not use more than one colorcolour from any one column.

* Use large expanses of the colorcolour. If you're coloringcolouring text, use bold and a large font.

* For small expanses of colorcolour, such as thin lines, clearly label them with text, or use non-colorcolour 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 colorscolours, like children's crayons. Do not use light or dark variants of the colorscolours.

* If you need more colorscolours... hard luck. Instead use non-colorcolour 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 colorcolour-blind yourself, check your revised image with a colorcolour-sighted person to confirm the meaning is intact.

The following utilities may be of use in determining whether a revised image is distinguishable to colorcolour-blind users. Typically they take a web page or image file as an input, and render a colorcolour-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.

==ColorColour 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 colorcolour ramps, or a colorcolour map chosen to deliberately highlight certain features, are preferable. Diverging colorcolour ramps (two colorcolour extremes around a white or black neutral value) tend to hide some high-frequency features.

ColorsColours have cultural connotations; pick ones that match your data. That is, a diverging colorcolour 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 colorcolour scale for scientific graphics |url=https://betterfigures.org/2015/06/23/picking-a-colorcolour-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 }}

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

===Templates===

*To colorcolour text and background:

** [[Template:Font color]]

*To provide example squares of colorcolour:

** [[Template:Color sample]]

** [[Template:Swatch]]

Line 236 ⟶ 417:

* [[Help:Link color]]

* [[Help:Displaying a formula#Color]]

* [[Wikipedia:Infobox colorscolours]] – inactive

* [[Wikipedia:WikiProject Usability/Color]] – inactive

Line 245 ⟶ 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}}

Line 262 ⟶ 443:

{{Wikipedia technical help|collapsed}}

[[Category:Wikipedia accessibility|ColorsColours]]