Template:Color sample/doc

From MozillaWiki
Jump to: navigation, search
Edit-copy green.svg
This is a documentation subpage for Template:Color sample.
It contains usage information, categories and other content that is not part of the original template page.


{{colsamp}} creates a small, inline box (1 em × 1 em) filled with a specified background color. It should be used to present colour samples, e.g. in development texts, style guides, tutorials, help pages, etc.

Although the template has an array of parameters, the intended use is very basic. Because of that, all optional parameters have preset default values. The only thing you have to do, is to provide the colour code for the colour sample.


There are 6 parameters, of which 1 is unnamed and required, and 5 are named and optional.


The template's syntax is

  • {{colsamp|colour value| |desc= |size= |bdcolor= |bdwidth= |valign= }}

Copy-paste templates

Basic use
Use Template code
Colour sample colour value}}
Custom tooltip colour value|desc=}}
Advanced use
Use Template code
Change size colour value|size=}}
Change contrast colour value|bdcolor=|bdwidth=}}
All colour value|desc=|size=|bdcolor=|bdwidth=|valign=}}

Required parameters


Sample colour

You can specify the colour in the colour sample box using HTML/CSS/X11 colour names (e.g. "orange" or "forestgreen"), or by providing a hexadecimal colour value (e.g. "#FFA500" for orange, or "#228B22" for forest green).

  • The sample box will automatically be given a tooltip, using the HTML attribute <* title="…">...</*>. By default, the tooltip text is the colour code specified with this parameter, as you entered it. For example, the values "ForestGreen" and "forestgreen" will produce the same colour (forest green), but will be displayed in the tooltip with the letter-casing you specified, i.e. as "ForestGreen" and "forestgreen", respectively. Use the parameter |desc= to add a custom tooltip text.
  • {{colsamp|1}}

Optional parameters


Description/custom tooltip text

Through this parameter, you can change the tooltiptext.

  • No wiki-formatting can be used.
  • {{colsamp|desc=custom text}}


Box size

It is possible to change the size of the sides of the box, using this parameter. The value can be given in pixels (px) or em-units (em), use the decimal point for fractions.

  • {{colsamp|size=number value + px/em}}


Border colour

The border colour can be changed to enhance the visibility of the colour in the sample. Specifiy the colour using a HTML/CSS/X11 colour name, or hexadecimal colour value.

  • {{colsamp|bdcolor=HTML/CSS/X11 or hex colour value}}


Border size

You can change the thickness of the border. The value can be given in pixels (px) or em-units (em), use the decimal point for fractions.

  • {{colsamp|bdwidth=number value + px/em}}


Vertical alignment

If necessary, you are able to adjust the vertical alignment of the box using this parameter.

  • {{colsamp|valign=CSS value}}

Available values


There are two ways of specifying colour values for this template. You can use web color names, or hexadecimal colour triplets.

The former are names of colours. They can be simple, like yellow or red, or more complex or difficult to infer, for example mediumspringgreen or wheat.

The latter are hexadecimal combinations of RGB colours, in the format #RRGGBB (note the prefixed number sign).

Color value type Example value Result
HTML/CSS/X11 blueviolet
Hexadecimal #8A2BE2


Value type Value Comments
Number value + px/em a) e.g. 14px Can't be a negative value. Decimal point, no comma.
e.g. 2.5em a)

a) There can't be any space character between the number value and its unit (px or em).

Vertical alignment

Type Value type Value Comments
CSS CSS value baseline Aligns the baseline of the element with its parent's baseline.
middle Vertical center-alignment.
sub Subscript.
super Superscript.
text-top Aligns the top of the element with the top of the parent element's font.
text-bottom Aligns the bottom of the element with the bottom of the parent element's font.
top Aligns to the top of the tallest element on the line.
bottom Aligns to the bottom of the lowest element on the line.
inherit Inherits the value from its parent.
Length a) Number value + px/em e.g. 14px Raises or lowers the element by the value. 0cm is baseline. Can be a negative value. Decimal point, no comma.
e.g. 2.5em
Percentage a) Number value + % e.g. 125% Raises or lowers the element by the percentage value. 0% is baseline. Can be a negative value.

a) When using length or percentage, there can't be any space character between the number value and its unit (px or em for length, and % for percentage).


Correct use

Case What you type What you see Comments
Basic use red}} Hover over the box to see the tooltip.
desc red|desc=This is the colour red}}
|size #00FFFF|size=12px}}
|bdcolor and |bdwidth Seashell|bdcolor=#696969|bdwidth=50px}}
|valign orange|valign=middle}} Some text. Some text.
orange|valign=-125%}} Some text. Some text.

See also