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}}
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 ||
|
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.
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. | ||||
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 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.
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[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.
background colour: #d0e5f5
background colour: #f1f5fc |
background colour: #faecc8
background colour: #faf6ed |
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.
White | Yellow | Blue
Purple |
Red
Green Brown Grey |
Black |
- 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:
- To provide example squares of colour:
- 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
References[edit]
- ^ "Color Vision Deficiency". MedlinePlus. U.S. National Library of Medicine. 1 January 2015. Retrieved 29 January 2021.
{{cite web}}
: CS1 maint: url-status (link)