Help:Using colours
 | 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. |
 | Links should clearly be identifiable as links to readers. Refrain from implementing colored links that may impede user ability to distinguish links from regular text, or color links for purely aesthetic reasons. See the guides to editing articles for accessibility at contrast, accessibility and navbox colors. |
To use a color 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 color
To make a word have color, use:
<span style="color:hex triplet or color name">text</span>
Note that you can't use the British spelling, "color", 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 color
Template:Font color, or its redirect Template:Font color, can also be used.
{{Font color|fontcolor|backgroundcolor|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 note the two pipe-characters ||
|
Color generation guide
- The method used for selecting the colors for various top-level pages, e.g. Main Page, Community Portal, Contents, and Help:Contents.
The 3 colors are generated using the HSV color space, then translated into RGB.
| Hue | Saturation 4% Brightness 100% main background |
Saturation 10% Brightness 100% 2nd header, accent color |
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 color. | ||||
| 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 color schemes
Wikipedia
Wikipedia uses this color scheme on its Main Page.
| 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-color palettes using this same generation scheme are at the top of the talk page. In the Monobook skin, the background color of Wikipedia pages is #F8FCFF. In the Vector skin, the background color on all pages is #FFFFFF.
Commons
The Wikimedia Commons uses this color scheme on commons:Main Page and commons:Help:Contents. Differing from the English Wikipedia, Commons does not use an extra, darker color for bordering the header. Also, the color sets are not derived from a hue the way the above table does.
|
background color: #d0e5f5
background color: #f1f5fc |
background color: #faecc8
background color: #faf6ed |
Schemes for color-blind readers
Approximately 1 in 12 men and 1 in 200 women with Northern European ancestry have red-green color blindness; this and other types affect people worldwide.[1] This table shows "safe" groups of colors which are distinguishable to most color-blind people, although color should never be used as the sole method to convey information.
See also Commons:Commons:Creating accessible illustrations for color blind friendly palettes.
| Color 0 | Color 1 | Color 2 | Color 3 | Color 4 |
|---|---|---|---|---|
| Black | Red | Grey | Lime | White |
| Blue | ||||
| Maroon | Green | |||
| Purple |
- Pick a maximum of one color from each column. Do not use more than one color from any one column.
- Use large expanses of the color. If you're coloring text, use bold and a large font.
- For small expanses of color, such as thin lines, clearly label them with text, or use non-color 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 colors, like children's crayons. Do not use light or dark variants of the colors.
- If you need more colors... hard luck. Instead use non-color 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 color-blind yourself, check your revised image with a color-sighted person to confirm the meaning is intact.
The following utilities may be of use in determining whether a revised image is distinguishable to color-blind users. Typically they take a web page or image file as an input, and render a color-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.
Color 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 color ramps, or a color map chosen to deliberately highlight certain features, are preferable. Diverging color ramps (two color extremes around a white or black neutral value) tend to hide some high-frequency features.
Colors have cultural connotations; pick ones that match your data. That is, a diverging color ramp with extremes "hot, cold" will be easier to understand than the reverse (hot, cold).
- McNeall, Doug (23 June 2015). "Picking a color 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
- To color text and background:
- To provide example squares of color:
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 colors – inactive
- Wikipedia:WikiProject Usability/Color – inactive
Somewhat related pages
- Wikipedia:Manual of Style/Text formatting § Color
- Wikipedia:Template standardisation
- Wikipedia:WikiProject Color
Encyclopedia articles
Lists of colors
- Lists of colors
- Template that list colors
- {{Colornames}}
- {{Formula Supported Named Colors}}
- {{X11 color chart}}
- {{Web Colors}}
Guide to colors
References
- ^ "Color Vision Deficiency". MedlinePlus. U.S. National Library of Medicine. 1 January 2015. Retrieved 29 January 2021.