Tachyony: Imported page

2021-12-06T16:05:06Z

Imported page

New page

{{Short description|Wikimedia help page}}
{{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|1={{big|'''Links should clearly be identifiable as links to readers'''.}} 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 is #CD7F32) or [[HTML colour names|HTML colour names]] (''e.g.'' red).

Editors are encouraged to make use of [[Brewer palettes]] for charts, maps, and other entities, using '''[https://colorbrewer2.org/ this tool]'''.

==Overriding font colour{{anchors|Overriding font color}}==
To make a word have colour, use:
<code><nowiki>''hex triplet or colour name''<nowiki>">text</nowiki></code>

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

Examples:
*<code><nowiki>red writing</nowiki></code> shows as red writing
*<code><nowiki>green writing</nowiki></code> shows as green writing
*<code><nowiki>blue writing</nowiki></code> shows as blue writing

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

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

{| class="wikitable" style="width:100%; text-align:left;"
! style="width: 450px" | Example
! Result
|- style="background-color: #fff; height: 80px;"
|  <code><nowiki>{{font color|red|This text is different}}</nowiki></code>
|{{font color|red|This text is different}} to change text-color only (Note: do not style text as a link)
|-style="background-color: #fff; height: 80px; padding-left: 6px;"
|  <code><nowiki>{{font color|red|yellow|This text is different}}</nowiki></code>
|{{font color|red|yellow|This text is different}} to change text and background color
|-style="background-color: #fff; height: 80px; padding-left: 6px;"
|  <code><nowiki>{{font color||yellow|This text is different}}</nowiki></code>
|{{font color||yellow|This text is different}} to change background color only '''note''' the two pipe-characters <code>||</code>
|}

==Colour generation guide==
*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]]. The 3 colours are generated using the [[HSV colour space]], then translated into [[RGB color model|RGB]].

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

==Wikimedia colour schemes{{anchors|Wikimedia color schemes}}==
===Wikipedia===
{{see also|Wikipedia:Skin}}
Wikipedia uses this colour scheme on its [[Main Page]].
:''Note: the colour for the border on the lighter boxes is also the colour of the backgrounds of the darker (title) boxes.''

{|
|-
| Hue: 150
| style="background:#F5FFFA; border:1px solid #CEF2E0; padding:1em; margin:auto;"| background:<kbd>#F5FFFA</kbd> border:<kbd>#CEF2E0</kbd> || style="background:#cef2e0;"|  
| style="background:#CEF2E0; border:1px solid #A3BFB1; padding:1em; margin:auto;"| background:<kbd>#CEF2E0</kbd> border:<kbd>#A3BFB1</kbd> || style="background:#A3BFB1;"|  
|-
| Hue: 210
| style="background:#F5FAFF; border:1px solid #CEE0F2; padding:1em; margin:auto;"| background:<kbd>#F5FAFF</kbd> border:<kbd>#CEE0F2</kbd> || style="background:#cedff2;"|  
| style="background:#CEE0F2; border:1px solid #A3B1BF; padding:1em; margin:auto;"| background:<kbd>#CEE0F2</kbd> border:<kbd>#A3B1BF</kbd> || style="background:#A3B1BF;"|  
|-
| Hue: 270
| style="background:#FAF5FF; border:1px solid #E0CEF2; padding:1em; margin:auto;"| background:<kbd>#FAF5FF</kbd> border:<kbd>#E0CEF2</kbd> || style="background:#E0CEF2;"|  
| style="background:#E0CEF2; border:1px solid #B1A3BF; padding:1em; margin:auto;"| background:<kbd>#E0CEF2</kbd> border:<kbd>#B1A3BF</kbd> || style="background:#B1A3BF;"|  
|-
| Hue: 330
| style="background:#FFF5FA; border:1px solid #F2CEE0; padding:1em; margin:auto;"| background:<kbd>#FFF5FA</kbd> border:<kbd>#F2CEE0</kbd> || style="background:#F2CEE0;"|  
| style="background:#F2CEE0; border:1px solid #BFA3B1; padding:1em; margin:auto;"| background:<kbd>#F2CEE0</kbd> border:<kbd>#BFA3B1</kbd> || style="background:#BFA3B1;"|  
|}

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

Additional 3-colour palettes using this same generation scheme are at the top of the [[Help talk:Using colours|talk page]]. In the Monobook skin, the background colour of Wikipedia pages is #F8FCFF. In the Vector skin, the background colour on all pages is #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 
border colour: #abd5f5</div>
| style="padding:0 0.5em;"|


| 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 
border colour: #fad67d</div>
|}

==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|url-status=live|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.

{| border=1 cellpadding=4 style="border-collapse: collapse; border: 1px solid black;"
|- style="vertical-align:top;text-align:center;"
| style="background: white; color: black;" | White
| style="background: yellow; color: black;"| Yellow
| style="background: blue; color: white;" | Blue
Purple
| style="background: red; color: white;" | Red
Green

Brown

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

* Pick a maximum of one colour from each box. Do not use more than one colour from any one box.
* 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 colourmap chosen to deliberately highlight certain features, are preferable. Diverging colourramps (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 colourramp with extremes "hot, cold" will be easier to understand than the reverse (hot, cold).

* {{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 |url=https://journals.plos.org/ploscompbiol/article?id=10.1371/journal.pcbi.1003833}}

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

*Template with color names
{{Web Colors|state=plain}}

'''Related help pages'''
* {{slink|Wikipedia:Manual of Style/Accessibility|Color}}
* [[Help:How to reduce colors for saving a JPEG as PNG]]
* [[Help:Link 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'''
* [[Color picker]]
* [[Lists of colors]]
* [[Web colors]]

==References==
{{reflist}}

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

Help:Using colours - Revision history

Tachyony: Imported page