Help:Using colours#Guide to colors

To apply colour to text, use:

text

Note that you cannot use the Commonwealth spelling, "colour", in HTML tags used in wikitext.

Examples:

• red writing shows as red writing
• green writing shows as green writing
• blue writing shows as blue writing

{{Tl|Font color}}, or its redirect {{Tl|Font colour}}, can also be used.

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

{{markup

|{{font color|red|This text is different}}

|{{font color|red|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}}

|{{font color|red|yellow|This text is different}}
to change text and background color

|{{font color||yellow|This text is different}}

|{{font color||yellow|This text is different}}
to change background color only
Note the two pipe-characters || to keep the text color at default.

}}

{{Hatnote|MOS:COLOR contains a list of tools for color scheme selection and creation.}}

The method used for selecting the colors 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.

{{see also|Wikipedia:Skin}}

Wikipedia uses this colour scheme on its Main Page and, for the final row, on the Community Portal.

{{hatnote|Note: the colour for the border of the lighter boxes is also the colour of the backgrounds of the darker (title) boxes.}}

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 {{Mono|#F8FCFF}}. In the Vector 2022 skin, the background colour on all pages in light mode is {{Mono|#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.

The Wikimedia Foundation Design team has provided a color palette with colors being marked toward level AA conformance. It is used for all user-interface elements across products and in the main Wikimedia themes, desktop and mobile. However, it does not consider linked text.

{{main|Wikipedia:Manual of Style/Accessibility/Colors}}

It is best to choose background colors that offer sufficient contrast in relation to text and blue links, which is also the color of references, both of which are very common in most articles. Use the [https://webaim.org/resources/linkcontrastchecker/?fcolor=202122&bcolor=FFFFFF&lcolor=3366CC WCAG link contrast checker] to ensure that the chosen background color offers the recommended WCAG AA level of contrast against normal text ({{Legend inline|#202122|{{mono|#202122}}}}) and blue links ({{Legend inline|#3366CC|{{mono|#3366CC}}}} for the default Vector 2022 skin).{{cite web |title=WCAG 2.0 and Link Colors |url=https://webaim.org/blog/wcag-2-0-and-link-colors/ |website=WebAIM Blog |publisher=WebAIM |date=22 July 2009}}

{{Shortcut|H:Colorblind}}

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.{{Cite web|last=|first=|date=1 January 2015|title=Color Vision Deficiency|url=https://medlineplus.gov/genetics/condition/color-vision-deficiency/#frequency|archive-url=|archive-date=|access-date=29 January 2021|website=MedlinePlus|publisher=U.S. National Library of Medicine}} 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.

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

• [https://addons.mozilla.org/en-US/firefox/search/?q=Colorblind&cat=all Mozilla Firefox color-blind addons]
• [https://michelf.ca/projects/sim-daltonism/ Sim Daltonism] simulates color blind vision and displays the results in a floating palette for macOS and iOS. Freeware.
• [https://www.colororacle.org/ Color Oracle] downloadable, free color blindness simulator for Windows, Mac and Linux. Freeware.

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

• {{cite web |last1=McNeall |first1=Doug |title=Picking a colour scale for scientific graphics |url=https://betterfigures.org/2015/06/23/picking-a-colour-scale-for-scientific-graphics/ |website=Better Figures |language=en |date=23 June 2015}}
• {{cite web |title=Elegant Figures - Subtleties of Color (Part 1 of 6) |url=https://earthobservatory.nasa.gov/blogs/elegantfigures/2013/08/05/subtleties-of-color-part-1-of-6/ |website=earthobservatory.nasa.gov |language=en |date=1 February 2020}}
• {{cite journal |last1=Rougier |first1=Nicolas P. |last2=Droettboom |first2=Michael |last3=Bourne |first3=Philip E. |title=Ten Simple Rules for Better Figures |journal=PLOS Computational Biology |date=11 September 2014 |volume=10 |issue=9 |pages=e1003833 |doi=10.1371/journal.pcbi.1003833 |pmid=25210732 |pmc=4161295 |bibcode=2014PLSCB..10E3833R |doi-access=free }}

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

• {{slink|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

• {{slink|Wikipedia:Manual of Style/Text formatting|Color}}
• Wikipedia:Template standardisation
• Wikipedia:WikiProject Color

• Colour picker
• Web colours

• Lists of colours
• Template that list colours
• {{tl|Colornames}}
• {{tl|Formula Supported Named Colors}}
• {{tl|X11 color chart}}
• {{tl|Web Colors}}

{{Web Colors|state=plain}}

{{reflist}}

{{Wikipedia technical help|collapsed}}

Colours