Langbahn Team – Weltmeisterschaft

Help:Using colours

To use a colour in a template or table you can use the hex triplet (e.g. #CD7F32 is bronze) or HTML color name (e.g. red).

Editors are encouraged to make use of tools, such as Color Brewer 2 to create Brewer palettes, listed at MOS:COLOR for color scheme selection used in graphical charts, maps, tables, and webpages with accessibility in mind for color-blind and visually impaired users.

For color tables and a color pallette, see MOS: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 the Commonwealth spelling, "colour", in HTML tags used in wikitext.

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

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

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

Markup Renders as
{{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 || to keep the text color at default.

Colour 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 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.
#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

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

Hue Light Box
background / border
Title
background / border
150° #F5FFFA / #CEF2E0   #CEF2E0 / #A3BFB1  
210° #F5FAFF / #CEDFF2   #CEDFF2 / #A3B0BF  
270° #FAF5FF / #DDCEF2   #DDCEF2 / #AFA3BF  
330° #FFF5FA / #F2CEDD   #F2CEDD / #BFA3AF  
30° #FFFAF5 / #F2E0CE   #F2E0CE / #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 2022 skin, the background colour on all pages in light mode is #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
#F1F5FC / #ABD5F5   #D0E5F5 / #ABD5F5  
#FAF6ED / #ABD5F5   #FAECC8 / #FAD67D  

Wikimedia Foundation

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.

Accessibility

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 WCAG link contrast checker to ensure that the chosen background color offers the recommended WCAG AA level of contrast against normal text (  #202122) and blue links (  #3366CC for the default Vector 2022 skin).[1]

Compatible WCAG AAA background colors against text and links
Base color Darkest backgrounds for dark text Lightest background for white text
Name Hue Hex Color Text and links
(WCAG AA)
Text only Pure black text
(not default)
Red #FF0000 #FFE6E6 #FF8888 #FF6060 #B60000
Orange 30° #FF8000 #FFE8D0 #FF8E1C #E97500 #8C4600
Yellow 60° #FFFF00 #F3F300 #B1B100 #9B9B00 #5C5C00
Chartreuse 90° #80FF00 #B9FF72 #61C100 #54A900 #326500
Green 120° #00FF00 #ABFFAB #00C700 #00AE00 #006800
Spring green 150° #00FF80 #9DFFCE #00C563 #00AC56 #006733
Cyan 180° #00FFFF #7DFFFF #00BFBF #00A6A6 #006363
Azure 210° #0080FF #DCEEFF #60B0FF #3098FF #0057AF
Blue 240° #0000FF #EAEAFF #A2A2FF #8888FF #3030FF
Violet 270° #8000FF #F3E7FF #C994FF #B974FF #7600EC
Magenta 300° #FF00FF #FFE3FF #FF73FF #FF29FF #9F009F
Rose 330° #FF0080 #FFE4F1 #FF81C0 #FF52A8 #B00058
Grey 808080 #EBEBEB #ABABAB #959595 #595959


Schemes for colour-blind readers

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 color blind friendly palettes.

Colour 1 Colour 2 Colour 3 Colour 4 Colour 5 Colour 6
White Yellow Blue Red Black Grey
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:

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

See also

Templates

Encyclopedia articles

Lists of colours

Guide to colours

References

  1. ^ "WCAG 2.0 and Link Colors". WebAIM Blog. WebAIM. 22 July 2009.
  2. ^ "Color Vision Deficiency". MedlinePlus. U.S. National Library of Medicine. 1 January 2015. Retrieved 29 January 2021.