This help page is a how-to guide. It details processes or procedures of some aspect(s) of Wikipedia's norms and practices. It is not one of Wikipedia's policies or guidelines, and may reflect varying levels of consensus and vetting. |
To use a colour in a template or table you can use the hex triplet (e.g. bronze is #CD7F32) or HTML color names (e.g. red).
Editors are encouraged to make use of Brewer palettes for charts, maps, and other entities, using this tool.
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 writingTemplate: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 ||
|
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 |
Wikipedia uses this colour scheme on its Main Page.
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.
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 |
Approximately 1 in 12 men and 1 in 200 women with Northern European ancestry have red-green colour blindness; this and other types affect people worldwide.[1] 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.
See also Commons:Commons:Creating accessible illustrations for color blind friendly palettes.
Colour 1 | Colour 2 | Colour 3 | Colour 4 | Colour 5 | Colour 6 |
---|---|---|---|---|---|
White | Yellow | Blue | Red | Black | Grey |
Green | |||||
Neon Green | Purple | Brown | Dark Red | Cyan | |
Orange | Pink |
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:
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 colour map chosen to deliberately highlight certain features, are preferable. Diverging colour ramps (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 colour ramp with extremes "hot, cold" will be easier to understand than the reverse (hot, cold).