Help:Using colours

(Redirected from Help:Using colors)

To use a colour 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 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
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 of 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

border colour: #abd5f5
background colour: #faecc8

background colour: #faf6ed

border colour: #fad67d

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.

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

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

  • 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. Bibcode:2014PLSCB..10E3833R. doi:10.1371/journal.pcbi.1003833. PMC 4161295. PMID 25210732.

See also

edit

Templates

edit
edit
edit

Encyclopedia articles

edit

Lists of colours

edit

Guide to colours

edit

References

edit
  1. ^ "Color Vision Deficiency". MedlinePlus. U.S. National Library of Medicine. 1 January 2015. Retrieved 29 January 2021.