Wikipedia:Colours

Help:Using colours

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 color names (e.g. red).

Editors are encouraged to make use of Brewer palettes for charts, maps, and other entities, using this tool.

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}}

More information Example, Result ...

Colour generation guide

More information Hue, Saturation 4%Brightness 100% main background ...

Wikimedia colour schemes

Wikipedia

Wikipedia uses this colour scheme on its Main Page.

Note: the colour for the border of 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

border colour: #abd5f5
background colour: #faecc8

background colour: #faf6ed

border colour: #fad67d

Schemes for colour-blind readers

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.

More information Colour 1, Colour 2 ...
  • 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, checkers or polka-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:

Colour ramps

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. PMC 4161295. PMID 25210732.

See also

Templates

Encyclopedia articles

Lists of colors

Guide to colors


References

  1. "Color Vision Deficiency". MedlinePlus. U.S. National Library of Medicine. 1 January 2015. Retrieved 29 January 2021.

Share this article:

This article uses material from the Wikipedia article Wikipedia:Colours, and is written by contributors. Text is available under a CC BY-SA 4.0 International License; additional terms may apply. Images, videos and audio are available under their respective licenses.