Template:Color sample

Usage

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

Parameters

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

Syntax

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

1

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

Notes

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

Usage

• {{colsamp|1}}

Optional parameters

desc

Description/custom tooltip text

Through this parameter, you can change the tooltiptext.

Notes

• No wiki-formatting can be used.

Usage

• {{colsamp|desc=custom text}}

size

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.

Usage

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

bdcolor

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.

Usage

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

bdwidth

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.

Usage

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

valign

Vertical alignment

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

Usage

• {{colsamp|valign=CSS value}}

Available values

Colours

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

Lengths

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

Examples

Correct use

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

See also

• {{color}}