Help:Using colours
Template:Short descriptionTemplate:DMCA Lua error in package.lua at line 80: module 'Module:Hatnote list' not found. Script error: No such module "about".
Page Module:Message box/ombox.css has no content.
 | This help page is a how-to guide. It explains concepts or processes used by the Wikipedia community. It is not one of Wikipedia's policies or guidelines, and may reflect varying levels of consensus. | Page Module:Shortcut/styles.css has no content. |
To use a colour in a template or table you can use the hex triplet (e.g. Page Template:Mono/styles.css has no content.#CD7F32 is bronze) or HTML colour name (e.g. red).
Editors are encouraged to make use of tools, such as Color Brewer 2 to create Brewer palettes, listed at Wikipedia:Manual of Style/Accessibility § Color for colour scheme selection used in graphical charts, maps, tables, and webpages with accessibility in mind for colour-blind and visually impaired users.
For colour tables and a colour pallette, see Wikipedia:Manual of Style/Accessibility/Colors. For the WikiProject, see Wikipedia:WikiProject Color.
Overriding font colour
To apply colour to text, use:
<span style="color:hex triplet or colour name">text</span>
Note that you cannot use Commonwealth spellings like "colour" in HTML tags used in wikitext.
Examples:
<span style="color:Page Template:Highlight round/styles.css has no content.red">red writing</span>shows as red writing<span style="color:Page Template:Highlight round/styles.css has no content.#0f0">green writing</span>shows as green writing<span style="color:Page Template:Highlight round/styles.css has no content.#0000FF">blue writing</span>shows as blue writing
Template font colour
Template:Tl, or its redirect Template:Tl, can also be used.
Page Template:Markup/styles.css has no content.
| Markup | Renders as |
|---|---|
{{font color|red|This text is different}} |
This text is different |
{{font color|red|yellow|This text is different}} |
This text is different |
{{font color||yellow|This text is different}} |
This text is different |
Colour generation guide
Script error: No such module "For".
The 3 colours are generated using the HSV colour space, then translated into RGB. This method is used for selecting the colours used in various top-level pages, such as the Main Page, Village Pumps, Community Portal, Contents, and Help:Contents.
| 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. | ||||
| 0° | #FFF5F5 | #FFE6E6 | #F2CECE | #BFA3A3 |
| 10° | #FFF7F5 | #FFEAE6 | #F2D4CE | #BFA7A3 |
| 20° | #FFF8F5 | #FFEEE6 | #F2DACE | #BFACA3 |
| 30° | #FFFAF5 | #FFF2E6 | #F2E0CE | #BFB1A3 |
| 40° | #FFFCF5 | #FFF7E6 | #F2E6CE | #BFB6A3 |
| 50° | #FFFDF5 | #FFFBE6 | #F2ECCE | #BFBAA3 |
| 60° | #FFFFF5 | #FFFFE6 | #F2F2CE | #BFBFA3 |
| 70° | #FDFFF5 | #FBFFE6 | #ECF2CE | #BABFA3 |
| 80° | #FCFFF5 | #F7FFE6 | #E6F2CE | #B6BFA3 |
| 90° | #FAFFF5 | #F2FFE6 | #E0F2CE | #B1BFA3 |
| 100° | #F8FFF5 | #EEFFE6 | #DAF2CE | #ACBFA3 |
| 110° | #F7FFF5 | #EAFFE6 | #D4F2CE | #A7BFA3 |
| 120° | #F5FFF5 | #E6FFE6 | #CEF2CE | #A3BFA3 |
| 130° | #F5FFF7 | #E6FFEA | #CEF2D4 | #A3BFA7 |
| 140° | #F5FFF8 | #E6FFEE | #CEF2DA | #A3BFAC |
| 150° | #F5FFFA | #E6FFF2 | #CEF2E0 | #A3BFB1 |
| 160° | #F5FFFC | #E6FFF7 | #CEF2E6 | #A3BFB6 |
| 170° | #F5FFFD | #E6FFFB | #CEF2EC | #A3BFBA |
| 180° | #F5FFFF | #E6FFFF | #CEF2F2 | #A3BFBF |
| 190° | #F5FDFF | #E6FBFF | #CEECF2 | #A3BABF |
| 200° | #F5FCFF | #E6F7FF | #CEE6F2 | #A3B6BF |
| 210° | #F5FAFF | #E6F2FF | #CEE0F2 | #A3B1BF |
| 220° | #F5F8FF | #E6EEFF | #CEDAF2 | #A3ACBF |
| 230° | #F5F7FF | #E6EAFF | #CED4F2 | #A3A7BF |
| 240° | #F5F5FF | #E6E6FF | #CECEF2 | #A3A3BF |
| 250° | #F7F5FF | #EAE6FF | #D4CEF2 | #A7A3BF |
| 260° | #F8F5FF | #EEE6FF | #DACEF2 | #ACA3BF |
| 270° | #FAF5FF | #F2E6FF | #E0CEF2 | #B1A3BF |
| 280° | #FCF5FF | #F7E6FF | #E6CEF2 | #B6A3BF |
| 290° | #FDF5FF | #FBE6FF | #ECCEF2 | #BAA3BF |
| 300° | #FFF5FF | #FFE6FF | #F2CEF2 | #BFA3BF |
| 310° | #FFF5FD | #FFE6FB | #F2CEEC | #BFA3BA |
| 320° | #FFF5FC | #FFE6F7 | #F2CEE6 | #BFA3B6 |
| 330° | #FFF5FA | #FFE6F2 | #F2CEE0 | #BFA3B1 |
| 340° | #FFF5F8 | #FFE6EE | #F2CEDA | #BFA3AC |
| 350° | #FFF5F7 | #FFE6EA | #F2CED4 | #BFA3A7 |
| S: 0% | #FFFFFF | #F9F9F9 | #F2F2F2 | #BFBFBF |
Wikimedia colour schemes
Wikipedia
Script error: No such module "Labelled list hatnote". Wikipedia uses this colour scheme on its Main Page and, for the final row, on the Community Portal.
Page Module:Hatnote/styles.css has no content.
| Hue | Light Box background / border |
Title background / border | ||
|---|---|---|---|---|
| 150° | Page Template:Mono/styles.css has no content.#F5FFFA / Page Template:Mono/styles.css has no content.#CEF2E0 | Page Template:Mono/styles.css has no content.#CEF2E0 / Page Template:Mono/styles.css has no content.#A3BFB1 | ||
| 210° | Page Template:Mono/styles.css has no content.#F5FAFF / Page Template:Mono/styles.css has no content.#CEDFF2 | Page Template:Mono/styles.css has no content.#CEDFF2 / Page Template:Mono/styles.css has no content.#A3B0BF | ||
| 270° | Page Template:Mono/styles.css has no content.#FAF5FF / Page Template:Mono/styles.css has no content.#DDCEF2 | Page Template:Mono/styles.css has no content.#DDCEF2 / Page Template:Mono/styles.css has no content.#AFA3BF | ||
| 330° | Page Template:Mono/styles.css has no content.#FFF5FA / Page Template:Mono/styles.css has no content.#F2CEDD | Page Template:Mono/styles.css has no content.#F2CEDD / Page Template:Mono/styles.css has no content.#BFA3AF | ||
| 30° | Page Template:Mono/styles.css has no content.#FFFAF5 / Page Template:Mono/styles.css has no content.#F2E0CE | Page Template:Mono/styles.css has no content.#F2E0CE / Page Template:Mono/styles.css has no content.#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 Page Template:Mono/styles.css has no content.#F8FCFF. In the Vector 2022 skin, the background colour on all pages in light mode is Page Template:Mono/styles.css has no content.#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.
| Light Box background / border |
Title background / border | ||
|---|---|---|---|
| Page Template:Mono/styles.css has no content.#F1F5FC / Page Template:Mono/styles.css has no content.#ABD5F5 | Page Template:Mono/styles.css has no content.#D0E5F5 / Page Template:Mono/styles.css has no content.#ABD5F5 | ||
| Page Template:Mono/styles.css has no content.#FAF6ED / Page Template:Mono/styles.css has no content.#FAD67D | Page Template:Mono/styles.css has no content.#FAECC8 / Page Template:Mono/styles.css has no content.#FAD67D | ||
Wikimedia Foundation
The Wikimedia Foundation Design team has provided a colour palette with colours 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.
Accessibility
Script error: No such module "Labelled list hatnote". It is best to choose background colours that offer sufficient contrast in relation to text and blue links, which is also the colour of references, both of which are very common in most articles. Use the WCAG link contrast checker to ensure that the chosen background colour offers the recommended WCAG AA level of contrast against normal text (Page Template:Legend/styles.css has no content. Page Template:Mono/styles.css has no content.#202122) and blue links (Page Template:Legend/styles.css has no content. Page Template:Mono/styles.css has no content.#3366CC for the default Vector 2022 skin).[1]
| Base colour | Darkest backgrounds for dark text | Lightest background for white text | |||||
|---|---|---|---|---|---|---|---|
| Name | Hue | Hex | Colour | Text and links (WCAG AA) |
Text only | Pure black text (not default) | |
| Red | 0° | Page Template:Mono/styles.css has no content.#FF0000 | Page Template:Mono/styles.css has no content.#FFE6E6 | Page Template:Mono/styles.css has no content.#FF8888 | Page Template:Mono/styles.css has no content.#FF6060 | Page Template:Mono/styles.css has no content.#B60000 | |
| Orange | 30° | Page Template:Mono/styles.css has no content.#FF8000 | Page Template:Mono/styles.css has no content.#FFE8D0 | Page Template:Mono/styles.css has no content.#FF8E1C | Page Template:Mono/styles.css has no content.#E97500 | Page Template:Mono/styles.css has no content.#8C4600 | |
| Yellow | 60° | Page Template:Mono/styles.css has no content.#FFFF00 | Page Template:Mono/styles.css has no content.#F3F300 | Page Template:Mono/styles.css has no content.#B1B100 | Page Template:Mono/styles.css has no content.#9B9B00 | Page Template:Mono/styles.css has no content.#5C5C00 | |
| Chartreuse | 90° | Page Template:Mono/styles.css has no content.#80FF00 | Page Template:Mono/styles.css has no content.#B9FF72 | Page Template:Mono/styles.css has no content.#61C100 | Page Template:Mono/styles.css has no content.#54A900 | Page Template:Mono/styles.css has no content.#326500 | |
| Green | 120° | Page Template:Mono/styles.css has no content.#00FF00 | Page Template:Mono/styles.css has no content.#ABFFAB | Page Template:Mono/styles.css has no content.#00C700 | Page Template:Mono/styles.css has no content.#00AE00 | Page Template:Mono/styles.css has no content.#006800 | |
| Spring green | 150° | Page Template:Mono/styles.css has no content.#00FF80 | Page Template:Mono/styles.css has no content.#9DFFCE | Page Template:Mono/styles.css has no content.#00C563 | Page Template:Mono/styles.css has no content.#00AC56 | Page Template:Mono/styles.css has no content.#006733 | |
| Cyan | 180° | Page Template:Mono/styles.css has no content.#00FFFF | Page Template:Mono/styles.css has no content.#7DFFFF | Page Template:Mono/styles.css has no content.#00BFBF | Page Template:Mono/styles.css has no content.#00A6A6 | Page Template:Mono/styles.css has no content.#006363 | |
| Azure | 210° | Page Template:Mono/styles.css has no content.#0080FF | Page Template:Mono/styles.css has no content.#DCEEFF | Page Template:Mono/styles.css has no content.#60B0FF | Page Template:Mono/styles.css has no content.#3098FF | Page Template:Mono/styles.css has no content.#0057AF | |
| Blue | 240° | Page Template:Mono/styles.css has no content.#0000FF | Page Template:Mono/styles.css has no content.#EAEAFF | Page Template:Mono/styles.css has no content.#A2A2FF | Page Template:Mono/styles.css has no content.#8888FF | Page Template:Mono/styles.css has no content.#3030FF | |
| Violet | 270° | Page Template:Mono/styles.css has no content.#8000FF | Page Template:Mono/styles.css has no content.#F3E7FF | Page Template:Mono/styles.css has no content.#C994FF | Page Template:Mono/styles.css has no content.#B974FF | Page Template:Mono/styles.css has no content.#7600EC | |
| Magenta | 300° | Page Template:Mono/styles.css has no content.#FF00FF | Page Template:Mono/styles.css has no content.#FFE3FF | Page Template:Mono/styles.css has no content.#FF73FF | Page Template:Mono/styles.css has no content.#FF29FF | Page Template:Mono/styles.css has no content.#9F009F | |
| Rose | 330° | Page Template:Mono/styles.css has no content.#FF0080 | Page Template:Mono/styles.css has no content.#FFE4F1 | Page Template:Mono/styles.css has no content.#FF81C0 | Page Template:Mono/styles.css has no content.#FF52A8 | Page Template:Mono/styles.css has no content.#B00058 | |
| Grey | — | Page Template:Mono/styles.css has no content.808080 | Page Template:Mono/styles.css has no content.#EBEBEB | Page Template:Mono/styles.css has no content.#ABABAB | Page Template:Mono/styles.css has no content.#959595 | Page Template:Mono/styles.css has no content.#595959 | |
Schemes for colour-blind readers
Page Module:Shortcut/styles.css has no content.
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.[2] 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 colour-blind friendly palettes.
| Colour 1 | Colour 2 | Colour 3 | Colour 4 | Colour 5 | Colour 6 |
|---|---|---|---|---|---|
| White | Yellow | Blue | Red | Grey | Black |
| Green | |||||
| Lime | Purple | Brown | 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, 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's colour-blind addons
- Sim Daltonism simulates colour blind vision and displays the results in a floating palette for macOS and iOS. Freeware.
- Color Oracle downloadable, free colour blindness simulator for Windows, Mac and Linux. Freeware.
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).
- Page Module:Citation/CS1/styles.css has no content.McNeall, Doug (23 June 2015). "Picking a colour scale for scientific graphics". Better Figures.
- Page Module:Citation/CS1/styles.css has no content."Elegant Figures - Subtleties of Color (Part 1 of 6)". earthobservatory.nasa.gov. 1 February 2020.
- Page Module:Citation/CS1/styles.css has no content.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.
Tools for checking contrast
Script error: No such module "Labelled list hatnote". Script error: No such module "labelled list hatnote".
Page Module:Shortcut/styles.css has no content.
You can use an online tool or software to check the colour contrast ratio:
Before using a tool, check if it supports WCAG 2.0, as older tools based on WCAG 1.0 are outdated.
Additional tools for colour scheme selection
- Codex Style Guide for Wikimedia
- Chrome color contrast debugger (with a visual guide and built-in colour-picker).
- Color contrast analyser (downloadable software for precise contrast checks; be sure to only use the up-to-date "luminosity" algorithm, and not the "color brightness/difference", which is outdated.).
- Paletton (formerly Color Scheme Designer) helps select suitable colour schemes for a graphical chart.
- Color Brewer 2.0 provides colour-blind-friendly colour schemes for maps.
- Light qualitative color scheme provides a set of nine colours that work well for colour-blind users and black text labels.
- ColorFilter simulates colour-blind vision
- Coblis Color-blindness simulator
- Firefox NoCoffee
Colour palettes
The Wikimedia Foundation Design team has provided a color palette for AA-level contrast compliance. 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 colour.
For AAA-compliant colour pairings for different text types (black text, white text, links, and visited links), refer to the table at Wikipedia:Manual of Style/Accessibility/Colors. For named CSS-based text colours on a white background, refer to Wikipedia:Manual of Style/Accessibility/CSS colors for recommended colours
See also
Templates
- To colour text and background:
- To provide example squares of colour:
Related help pages
- 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
Somewhat related pages
- Wikipedia:Manual of Style/Text formatting § Color
- Wikipedia:Template standardisation
- Wikipedia:WikiProject Color
Encyclopaedia articles
Lists of colours
- Lists of colours
- Template that list colours
Guide to colours
References
Page Template:Reflist/styles.css has no content.
- ^ Page Module:Citation/CS1/styles.css has no content."WCAG 2.0 and Link Colors". WebAIM Blog. WebAIM. 22 July 2009.
- ^ Page Module:Citation/CS1/styles.css has no content."Color Vision Deficiency". MedlinePlus. U.S. National Library of Medicine. 1 January 2015. Retrieved 29 January 2021.
Lua error in package.lua at line 80: module 'Module:Navbox/configuration' not found.
