Template:Color box
Produces a simple colored box.
Usage
{{ color box | <color> | border = <color> | width = <box width> | height = <box height> | size = <box size> | text = y/yes | textformat = hex/rgb/hsl }}
- First unnamed parameter
Sets the background color of the box. Can be any valid CSS color.
- border (optional)
Sets the color of the border around the box. Defaults to text color.
- size/width/height (optional)
Size will override the width/height parameter. Width and height default to 1.25em.
- text (optional)
Appends the color value from the first unnamed parameter.
- textformat (optional)
Forces a specific format of the color text: hex (hex triplet), rgb, or hsl. The color value from the first unnamed parameter must be a valid hex triplet or RGB/HSL value (and will be converted according to this parameter, if necessary), otherwise the template will produce an error. For instance, orange as the first unnamed parameter will not work with this parameter. When converting between color spaces (RGB and HSL), decimal values are rounded to four places. This parameter has no effect at all if $text is not true.
Examples
| Code | Result |
|---|---|
| Basic usage | |
{{color box|#FF00FF}}
|
|
{{color box|orange}}
|
|
{{color box|orange|text=y}}
|
orange
|
{{color box|rgb(80, 80, 80)}}
|
|
{{color box|var(--theme-text-color-green)}}
|
|
| Box sizing | |
{{color box|#FF0000|width=40px}}
|
|
{{color box|#FF0000|height=40px}}
|
|
{{color box|#FF0000|size=40px}}
|
|
{{color box|#FF0000|size=40px|width=1000px}}
|
|
{{color box|#FF0000|size=40px|text=y}}
|
#FF0000
|
| Normalization | |
{{color box|#9933fF|text=y}}
|
#9933fF
|
{{color box|#9933fF|text=y|textformat=hex}}
|
#9933FF
|
{{color box|#93f|text=y|textformat=hex}}
|
#9933FF
|
{{color box|RgB( 153, 51 ,255)|text=y}}
|
RgB( 153, 51 ,255)
|
{{color box|RgB( 153, 51 ,255)|text=y|textformat=rgb}}
|
rgb(153, 51, 255)
|
{{color box|rgb(60%, 20%, 100%)|text=y|textformat=rgb}}
|
rgb(153, 51, 255)
|
{{color box|hSL( 270, 100% ,60%)|text=y}}
|
hSL( 270, 100% ,60%)
|
{{color box|hSL( 270, 100% ,60%)|text=y|textformat=hsl}}
|
hsl(270, 100%, 60%)
|
| Conversion | |
{{color box|#9933FF|text=y|textformat=rgb}}
|
rgb(153, 51, 255)
|
{{color box|#9933FF|text=y|textformat=hsl}}
|
hsl(270, 100%, 60%)
|
{{color box|rgb(153, 51, 255)|text=y|textformat=hex}}
|
#9933FF
|
{{color box|rgb(153, 51, 255)|text=y|textformat=hsl}}
|
hsl(270, 100%, 60%)
|
{{color box|hsl(270, 100%, 60%)|text=y|textformat=hex}}
|
#9933FF
|
{{color box|hsl(270, 100%, 60%)|text=y|textformat=rgb}}
|
rgb(153, 51, 255)
|