Template:Color sample/doc
It contains usage information, categories and other content that is not part of the original template page.
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}}
