View source for Help:Using colors

{{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|Wikipedia:Accessibility#Color}}
{{Wikipedia how to|H:Color|WP:COLOURS|H:UC}}
{{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 is #CD7F32) or [[HTML colour names|HTML colour names]] (''e.g.'' red).

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

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

Examples:
*<code><nowiki><span style="color:red">red writing</span></nowiki></code> shows as <span style="color:red">red writing</span>
*<code><nowiki><span style="color:#0f0">green writing</span></nowiki></code> shows as <span style="color:#0f0">green writing</span>
*<code><nowiki><span style="color:#0000FF">blue writing</span></nowiki></code> shows as <span style="color:#0000FF">blue writing</span>

===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" cellpadding=2 style="width: 100%; text-align: left;"
! style="width: 450px" | Example
! Result
|- style="background-color: #fff; height: 80px;"
|&nbsp;&nbsp;<code><nowiki>{{font color|red|This text is different}}</nowiki></code>
|{{font color|red|This text is different}}<br />to change text-color only (Note: do not style text as a link)
|-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>==
*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]].

<table border="0" cellspacing="4" cellpadding="8" style="border:black solid 1px;"> 
<tr>
<th width="60px">Hue</th>
<th>Saturation 4%<br />Brightness 100%<br /><br /><small>main background</small></th>
<th>Saturation 10%<br />Brightness 100%<br /><br /><small>2nd header, accent colour</small></th>
<th>Saturation 15%<br />Brightness 95%<br /><small>main border<br />header background</small></th>
<th>Saturation 15%<br />Brightness 75%<br /><br /><small>header border only</small></th>
</tr>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th colspan="3" style="text-align:right"><small>Note: for layouts with no spacing between borders, use the darker border colour.</small></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:white; 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>

*Easily generate similar palettes, from different starting hues, using [http://colorblender.com/ colorblender.com]

==Wikimedia colour schemes{{anchors|Wikimedia color schemes}}==
===Wikipedia===
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.''
<!-- legacy XHTML table visible with any browser -->
{|
|-
| Hue: 150
| style="background:#F5FFFA; border:1px solid #CEF2E0; padding:1em; margin:auto;"| background:<tt>#F5FFFA</tt> border:<tt>#CEF2E0</tt> || style="background:#cef2e0;"| &#160;
| style="background:#CEF2E0; border:1px solid #A3BFB1; padding:1em; margin:auto;"| background:<tt>#CEF2E0</tt> border:<tt>#A3BFB1</tt> || style="background:#A3BFB1;"| &#160;
|-
| Hue: 210
| style="background:#F5FAFF; border:1px solid #CEE0F2; padding:1em; margin:auto;"| background:<tt>#F5FAFF</tt> border:<tt>#CEE0F2</tt> || style="background:#cedff2;"| &#160;
| style="background:#CEE0F2; border:1px solid #A3B1BF; padding:1em; margin:auto;"| background:<tt>#CEE0F2</tt> border:<tt>#A3B1BF</tt> || style="background:#A3B1BF;"| &#160;
|-
| Hue: 270
| style="background:#FAF5FF; border:1px solid #E0CEF2; padding:1em; margin:auto;"| background:<tt>#FAF5FF</tt> border:<tt>#E0CEF2</tt> || style="background:#E0CEF2;"| &#160;
| style="background:#E0CEF2; border:1px solid #B1A3BF; padding:1em; margin:auto;"| background:<tt>#E0CEF2</tt> border:<tt>#B1A3BF</tt> || style="background:#B1A3BF;"| &#160;
|-
| Hue: 330
| style="background:#FFF5FA; border:1px solid #F2CEE0; padding:1em; margin:auto;"| background:<tt>#FFF5FA</tt> border:<tt>#F2CEE0</tt> || style="background:#F2CEE0;"| &#160;
| style="background:#F2CEE0; border:1px solid #BFA3B1; padding:1em; margin:auto;"| background:<tt>#F2CEE0</tt> border:<tt>#BFA3B1</tt> || style="background:#BFA3B1;"| &#160;
|}

And additionally on the [[Wikipedia:Community Portal|Community Portal]]:
{|
|-
| Hue: 030
| style="background:#FFFAF5; border:1px solid #F2E0CE; padding:1em; margin:auto;"| background:<tt>#FFFAF5</tt> border:<tt>#F2E0CE</tt> || style="background:#F2E0CE;"| &#160;
| style="background:#F2E0CE; border:1px solid #BFB1A3; padding:1em; margin:auto;"| background:<tt>#F2E0CE</tt> border:<tt>#BFB1A3</tt> || 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 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<br />
border colour: #abd5f5</div>
| style="padding:0 0.5em;"|

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

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

'''Related help pages'''
* {{slink|Wikipedia:Accessibility|Color}} 
* [[:Category:Articles with images not understandable by color blind users]]
* [[Wikipedia:Link color]]
* [[Wikipedia:How to reduce colors for saving a JPEG as PNG]]
* [[Wikipedia:Infobox colours]] – inactive
* [[Wikipedia:WikiProject Usability/Color]] – inactive

'''Somewhat related pages'''
* [[Wikipedia:Manual of Style (text formatting)#Color]]
* [[Wikipedia:Template standardisation]]
* [[Wikipedia:WikiProject Color]]

'''Encyclopedia articles'''
* [[Color tool]]
* [[Web colors]]
* [[List of colors]]

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