Help:Using colours

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

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.

{}

Example Result
  {} This text is different
to change text-color only (Note: do not style text as a link)
  {} This text is different
to change text and background color
  {} 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
  • Easily generate similar palettes, from different starting hues, using colorblender.com

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

border colour: #abd5f5
background colour: #faecc8

background colour: #faf6ed

border colour: #fad67d

Schemes for color-blind readers[edit]

Approximately one in ten white males have red-green color vision deficiency; this and other types of color vision deficiency affect around one in two hundred people of all races and sexes.[1] If you must use color to convey meaning or make distinctions between visual items (i.e. not merely for decoration), then this table shows "safe" groups of colors which are distinguishable to most color-blind people.

White Yellow Blue

Purple

Red

Green

Brown

Grey

Black
  • Pick a maximum of one color from each box. Do not use more than one color from any one box.
  • 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:

See also[edit]

Templates

Related help pages

Somewhat related pages

Encyclopedia articles

References[edit]

  1. ^ Kalloniatis, Michael; Luu, Charles. "Color Perception". Retrieved 18 May 2019.