To use a colour in a template or table you can use the hex triplet (e.g.
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 Wiki's policies or guidelines, and may reflect varying levels of consensus and vetting. |
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 contrast, accessibility and navbox colors. |
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: text
Note that you can't use the British spelling, "colour", in this context.
Examples:
red writing
shows as red writinggreen writing
shows as green writingblue writing
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 |
Wiki 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 Wiki 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. 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).
This article uses material from the Wikipedia English article Help:Using colours, which is released under the Creative Commons Attribution-ShareAlike 3.0 license ("CC BY-SA 3.0"); additional terms may apply (view authors). Content is available under CC BY-SA 4.0 unless otherwise noted. Images, videos and audio are available under their respective licenses.
®Wikipedia is a registered trademark of the Wiki Foundation, Inc. Wiki English (DUHOCTRUNGQUOC.VN) is an independent company and has no affiliation with Wiki Foundation.