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).

Editors are encouraged to make use of Brewer palettes for charts, maps, and other entities, using this 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 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 [edit]

Template:Font color, or its redirect Template:Font colour, can also be used.

{{Font colour|fontcolour|backgroundcolour|Your text here}}

Colour generation guide[edit]

• 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.

Wikimedia colour schemes[edit]

Wikipedia[edit]

Wikipedia uses this colour scheme on its Main Page.

Note: the colour for the border on the lighter boxes is also the colour of the backgrounds of the darker (title) boxes.

And additionally on the Community Portal:

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[edit]

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.

Schemes for colour-blind readers[edit]

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.

• Pick a maximum of one colour from each box. Do not use more than one colour from any one box.
• 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:

• Mozilla Firefox color-blind addons
• Sim Daltonism simulates color blind vision and displays the results in a floating palette for macOS and iOS. Freeware.
• Color Oracle downloadable, 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 colourmap chosen to deliberately highlight certain features, are preferable. Diverging colourramps (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 colourramp 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. doi:10.1371/journal.pcbi.1003833.

See also[edit]

Templates

• To colour text and background:
  • Template:Font color
• To provide example squares of colour:
  • Template:Color sample
  • Template:Swatch
  • Template:Swatch inline

• Template with color names

Related help pages

• Wikipedia:Manual of Style/Accessibility § Color
• Help:How to reduce colors for saving a JPEG as PNG
• Help:Link color
• 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

• Color picker
• Lists of colors
• Web colors

References[edit]