Help:Using colours
To use a colour in a template or table you can use the hex triplet (e.g. bronze is #CD7F32) or HTML colour names (e.g. red).
Overriding font colour
To make a word have colour, use: <span style="color:hex triplet or colour name">text</span>
Note that you can't use the British spelling, "colour", in this context.
Examples:
<span style="color:red">red writing</span>shows as red writing<span style="color:#0f0">green writing</span>shows as green writing<span style="color:#0000FF">blue writing</span>shows as blue writing
Template font colour
Template:Font color, or its redirect Template:Font colour, can also be used.
{{Font colour|fontcolour|backgroundcolour|Your text here}}
| Example | Result |
|---|---|
{{font color|red|This text is different}} |
This text is different to change text-color only (Note: do not style text as a link) |
{{font color|red|yellow|This text is different}} |
This text is different to change text and background color |
{{font color||yellow|This text is different}} |
This text is different to change background color only note the two pipe-characters || |
Colour generation guide
- The method used for selecting the colours for various top-level pages, e.g. Main Page, Community Portal, Contents, and Help:Contents.
The 3 colours are generated using the HSV colour space, then translated into RGB.
| Hue | Saturation 4% Brightness 100% main background |
Saturation 10% Brightness 100% 2nd header, accent colour |
Saturation 15% Brightness 95% main border header background |
Saturation 15% Brightness 75% header border only |
|---|---|---|---|---|
| Note. for layouts with no spacing between borders, use the darker border colour. | ||||
| Hue: 0 | #FFF5F5 | #FFE6E6 | #F2CECE | #BFA3A3 |
| Hue: 10 | #FFF7F5 | #FFEAE6 | #F2D4CE | #BFA7A3 |
| Hue: 20 | #FFF8F5 | #FFEEE6 | #F2DACE | #BFACA3 |
| Hue: 30 | #FFFAF5 | #FFF2E6 | #F2E0CE | #BFB1A3 |
| Hue: 40 | #FFFCF5 | #FFF7E6 | #F2E6CE | #BFB6A3 |
| Hue: 50 | #FFFDF5 | #FFFBE6 | #F2ECCE | #BFBAA3 |
| Hue: 60 | #FFFFF5 | #FFFFE6 | #F2F2CE | #BFBFA3 |
| Hue: 70 | #FDFFF5 | #FBFFE6 | #ECF2CE | #BABFA3 |
| Hue: 80 | #FCFFF5 | #F7FFE6 | #E6F2CE | #B6BFA3 |
| Hue: 90 | #FAFFF5 | #F2FFE6 | #E0F2CE | #B1BFA3 |
| Hue: 100 | #F8FFF5 | #EEFFE6 | #DAF2CE | #ACBFA3 |
| Hue: 110 | #F7FFF5 | #EAFFE6 | #D4F2CE | #A7BFA3 |
| Hue: 120 | #F5FFF5 | #E6FFE6 | #CEF2CE | #A3BFA3 |
| Hue: 130 | #F5FFF7 | #E6FFEA | #CEF2D4 | #A3BFA7 |
| Hue: 140 | #F5FFF8 | #E6FFEE | #CEF2DA | #A3BFAC |
| Hue: 150 | #F5FFFA | #E6FFF2 | #CEF2E0 | #A3BFB1 |
| Hue: 160 | #F5FFFC | #E6FFF7 | #CEF2E6 | #A3BFB6 |
| Hue: 170 | #F5FFFD | #E6FFFB | #CEF2EC | #A3BFBA |
| Hue: 180 | #F5FFFF | #E6FFFF | #CEF2F2 | #A3BFBF |
| Hue: 190 | #F5FDFF | #E6FBFF | #CEECF2 | #A3BABF |
| Hue: 200 | #F5FCFF | #E6F7FF | #CEE6F2 | #A3B6BF |
| Hue: 210 | #F5FAFF | #E6F2FF | #CEE0F2 | #A3B1BF |
| Hue: 220 | #F5F8FF | #E6EEFF | #CEDAF2 | #A3ACBF |
| Hue: 230 | #F5F7FF | #E6EAFF | #CED4F2 | #A3A7BF |
| Hue: 240 | #F5F5FF | #E6E6FF | #CECEF2 | #A3A3BF |
| Hue: 250 | #F7F5FF | #EAE6FF | #D4CEF2 | #A7A3BF |
| Hue: 260 | #F8F5FF | #EEE6FF | #DACEF2 | #ACA3BF |
| Hue: 270 | #FAF5FF | #F2E6FF | #E0CEF2 | #B1A3BF |
| Hue: 280 | #FCF5FF | #F7E6FF | #E6CEF2 | #B6A3BF |
| Hue: 290 | #FDF5FF | #FBE6FF | #ECCEF2 | #BAA3BF |
| Hue: 300 | #FFF5FF | #FFE6FF | #F2CEF2 | #BFA3BF |
| Hue: 310 | #FFF5FD | #FFE6FB | #F2CEEC | #BFA3BA |
| Hue: 320 | #FFF5FC | #FFE6F7 | #F2CEE6 | #BFA3B6 |
| Hue: 330 | #FFF5FA | #FFE6F2 | #F2CEE0 | #BFA3B1 |
| Hue: 340 | #FFF5F8 | #FFE6EE | #F2CEDA | #BFA3AC |
| Hue: 350 | #FFF5F7 | #FFE6EA | #F2CED4 | #BFA3A7 |
| H: 0 S: 0 | #FFFFFF | #F9F9F9 | #F2F2F2 | #BFBFBF |
- Easily generate similar palettes, from different starting hues, using colorblender.com
Wikimedia colour schemes
Wikipedia
Wikipedia uses this colour scheme on its Main Page.
- Please note that the colour for the border on the lighter boxes is also the colour of the backgrounds of the darker (title) boxes.
| Hue: 150 | background:#F5FFFA border:#CEF2E0 | background:#CEF2E0 border:#A3BFB1 | ||
| Hue: 210 | background:#F5FAFF border:#CEE0F2 | background:#CEE0F2 border:#A3B1BF | ||
| Hue: 270 | background:#FAF5FF border:#E0CEF2 | background:#E0CEF2 border:#B1A3BF | ||
| Hue: 330 | background:#FFF5FA border:#F2CEE0 | background:#F2CEE0 border:#BFA3B1 |
And additionally on the Community Portal:
| Hue: 030 | background:#FFFAF5 border:#F2E0CE | background:#F2E0CE border:#BFB1A3 |
Additional 3-colour palettes using this same generation scheme are at the top of the 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.
|
background colour: #d0e5f5
background colour: #f1f5fc |
background colour: #faecc8
background colour: #faf6ed |
See also
- Templates
- To colour text and background:
- To provide example squares of colour:
- Related help pages
- 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