Help:Using colours
This help page is ahow-to guide. It details processes or procedures of some aspect(s) of Wikipedia's norms and practices. It is not one ofWikipedia's policies or guidelines,and may reflect varying levels ofconsensusandvetting. |
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 atcontrast,accessibilityandnavbox colors. |
To use a colour in atemplateortableyou can use thehex triplet(e.g. bronze is #CD7F32) orHTML color names(e.g. red).
Editors are encouraged to make use ofBrewer palettesfor charts, maps, and other entities, usingthis tool.
Overriding font colour[edit]
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 asred writing<span style= "color:#0f0" >green writing</span>
shows asgreen writing<span style= "color:#0000FF" >blue writing</span>
shows asblue writing
Template font colour[edit]
Template:Font color,or its redirectTemplate: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 notethe two pipe-characters ||
|
Colour generation guide[edit]
- The method used for selecting the colours for various top-level pages, e.g.Main Page,Community Portal,Contents,andHelp:Contents.
The 3 colours are generated using theHSV colour space,then translated intoRGB.
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 |
Wikimedia colour schemes[edit]
Wikipedia[edit]
Wikipedia uses this colour scheme on itsMain Page.
Hue: 150 | background:#F5FFFAborder:#CEF2E0 | background:#CEF2E0border:#A3BFB1 | ||
Hue: 210 | background:#F5FAFFborder:#CEE0F2 | background:#CEE0F2border:#A3B1BF | ||
Hue: 270 | background:#FAF5FFborder:#E0CEF2 | background:#E0CEF2border:#B1A3BF | ||
Hue: 330 | background:#FFF5FAborder:#F2CEE0 | background:#F2CEE0border:#BFA3B1 |
And additionally on theCommunity Portal:
Hue: 030 | background:#FFFAF5border:#F2E0CE | background:#F2E0CEborder:#BFB1A3 |
Additional 3-colour palettes using this same generation scheme are at the top of thetalk 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[edit]
The Wikimedia Commons uses this colour scheme oncommons:Main Pageandcommons: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 |
Schemes for colour-blind readers[edit]
Approximately 1 in 12 men and 1 in 200 women with Northern European ancestry havered-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 alsoCommons:Commons:Creating accessible illustrationsfor color blind friendly palettes.
Colour 1 | Colour 2 | Colour 3 | Colour 4 | Colour 5 | Colour 6 |
---|---|---|---|---|---|
White | Yellow | Blue | Red | Black | Grey |
Green | |||||
Lime | Purple | Brown | Dark Red | Cyan | |
Orange | Pink |
- Pick a maximum of one colour from each column. Do not use more than one colour from any one column.
- 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,checkersorpolka-dots).
- 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:
- Mozilla Firefox color-blind addons
- Sim Daltonismsimulates color blind vision and displays the results in a floating palette for macOS and iOS. Freeware.
- Color Oracledownloadable, free color blindness simulator for Windows, Mac and Linux. Freeware.
Colour ramps[edit]
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).
- McNeall, Doug (23 June 2015)."Picking a colour scale for scientific graphics".Better Figures.
- "Elegant Figures - Subtleties of Color (Part 1 of 6)".earthobservatory.nasa.gov.1 February 2020.
- Rougier, Nicolas P.; Droettboom, Michael; Bourne, Philip E. (11 September 2014)."Ten Simple Rules for Better Figures".PLOS Computational Biology.10(9): e1003833.Bibcode:2014PLSCB..10E3833R.doi:10.1371/journal.pcbi.1003833.PMC4161295.PMID25210732.
See also[edit]
Templates[edit]
- To colour text and background:
- To provide example squares of colour:
Related help pages[edit]
- Wikipedia:Manual of Style/Accessibility § Color
- Wikipedia:Manual of Style/Accessibility/Colors
- Help:How to reduce colors for saving a JPEG as PNG
- Help:Link color
- Help:Displaying a formula#Color
- Wikipedia:Infobox colours– inactive
- Wikipedia:WikiProject Usability/Color– inactive
[edit]
- Wikipedia:Manual of Style/Text formatting § Color
- Wikipedia:Template standardisation
- Wikipedia:WikiProject Color
Encyclopedia articles[edit]
Lists of colours[edit]
- Lists of colours
- Template that list colours
- {{Colornames}}
- {{Formula Supported Named Colors}}
- {{X11 color chart}}
- {{Web Colors}}
Guide to colours[edit]
References[edit]
- ^"Color Vision Deficiency".MedlinePlus.U.S. National Library of Medicine. 1 January 2015.Retrieved29 January2021.