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

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

Template:Font color, or its redirect Template:Font colour, can also be used.

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

Colour generation guide

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

• Easily generate similar palettes, from different starting hues, using colorblender.com

Wikimedia colour schemes

Wikipedia

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.

And additionally on the Community Portal:

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

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.

Schemes for color-blind readers

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.

• 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:

• Mozilla Firefox color-blind addons
• Sim Daltonism for Mac OSX. Freeware.

See also

Templates

• To colour text and background:
  • Template:Font color
• To provide example squares of colour:
  • Template:Colorsample
  • Template:Swatch
  • Template:Swatch-inline
• Template with color names

Related help pages

• Wikipedia:Accessibility § Color
• Category:Articles with images not understandable by color blind users
• Wikipedia:Link color
• Wikipedia:How to reduce colors for saving a JPEG as PNG
• 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

• Color tool
• Web colors
• List of colors

References