Difference between revisions of "Template:Color"
m |
m (personal css test) |
||
Line 28: | Line 28: | ||
Draw the square | Draw the square | ||
− | --> <div style="width:{{{size|16px}}};height:{{{size|16px}}};background-color:rgba({{#var:red}},{{#var:green}},{{#var:blue}},{{#if:{{#var:alpha}}|{{#var:alpha}}|255}});display:inline-block;border:1px solid black;vertical-align:middle;"></div><span></includeonly><noinclude>{{Documentation}}</noinclude> | + | --> <div class="colorSquare" style="width:{{{size|16px}}};height:{{{size|16px}}};background-color:rgba({{#var:red}},{{#var:green}},{{#var:blue}},{{#if:{{#var:alpha}}|{{#var:alpha}}|255}});display:inline-block;border:1px solid black;vertical-align:middle;"></div><span></includeonly><noinclude>{{Documentation}}</noinclude> |
Revision as of 00:54, 9 August 2024
Overview
Color produces a small colored square using a provided set of RGB or optional RGBA values.
255, 255, 255: #FFFFFF; White
255, 0, 0: #FF0000; Red
0, 255, 0: #00FF00; Green
0, 0, 255: #0000FF; Blue
255, 255, 0: #FFFF00; Yellow
0, 255, 255: #00FFFF; Cyan
255, 0, 255: #FF00FF; Magenta
0, 0, 0: #000000; Black
Alpha
The alpha channel can be appended as a 4th value to control opacity. This can be represented as a percentage (0% - 100%), or value ranging from 0 - 1. If no alpha is provided, it defaults to 100%.
160,178,181,
{{Color|rgba=160,178,181,}}(160, 178, 181)
160,178,181,0%
{{Color|rgba=160,178,181,0%}}(160, 178, 181, 0%)
160, 178, 181, 25%
{{Color|rgba=160, 178, 181, 25%}}(160, 178, 181, 25%)
(160,178,181,50%)
{{Color|rgba=(160,178,181,50%)}}(160, 178, 181, 50%)
(160, 178, 181, 75%)
{{Color|rgba=(160, 178, 181, 75%)}}(160, 178, 181, 75%)
( 160, 178, 181, 100% )
{{Color|rgba=( 160, 178, 181, 100% )}}(160, 178, 181, 100%)
( 160, 178, 181, 0.5 )
{{Color|rgba=( 160, 178, 181, 0.5 )}}(160, 178, 181, 0.5)
( 160, 178, 181, 0.75 )
{{Color|rgba=( 160, 178, 181, 0.75 )}}(160, 178, 181, 0.75)
Optional parameters
Optional parameters include toggling the text color code, border, and resizing the square.
text=false
{{Color|rgb=160,178,181|text=false}}
border=false
{{Color|rgb=160,178,181|border=false}}(160, 178, 181)
size=50px
{{Color|rgb=160,178,181|size=50px}}(160, 178, 181)
Alternate usage
The format in which these values can be inputted is quite flexible:
- Individual parameters:
{{Color|r|g|b}}
- Comma separated list of values assigned to value rgb:
{{Color|rgb=r,g,b}}
- Comma and space separated list:
{{Color|rgb=r, g, b}}
- Comma and space separated list inside of parentheses:
{{Color|rgb=(r, g, b)}}
160|178|181
(160, 178, 181)160|178|181|100
(160, 178, 181, 100)Examples
Here is some text. It is in English.
Things made of plasteel will use the color (160, 178, 181) . This color is blue.Lorem ipsum dolor sit amet.
160,178,181
(160, 178, 181)160, 178, 181
(160, 178, 181)(160,178,181)
(160, 178, 181)(160, 178, 181)
(160, 178, 181)( 160, 178, 181 )
(160, 178, 181)Rock
Invalid Inputs
Not within 0-255 rgb range:
{{Color|text=false|256,256,256}}
{{Color|rgb=700,700,700}}(700, 700, 700)
Color name: red
{{Color|red}}(red, 255, 255)
Hexidecimal color code: #ffeeaa
{{Color|rgb=#ffeeaa}}
(
- ffeeaa, , )
The above documentation is transcluded from Template:Color/doc. (edit | history) Editors can experiment in this template's sandbox (edit | diff) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template. |