Template:Color: Difference between revisions
No edit summary |
Dat Hack3r (talk | contribs) m Added default color and moved templatedata to documentation. |
||
| Line 5: | Line 5: | ||
border-radius:4px 0 0 4px; | border-radius:4px 0 0 4px; | ||
font-family:Courier,monospace;"> | font-family:Courier,monospace;"> | ||
<nowiki>#</nowiki>{{{color}}}</span> | <nowiki>#</nowiki>{{{color|000000}}}</span> | ||
<span style="color:transparent; | <span style="color:transparent; | ||
background:#{{{color}}}; | background:#{{{color|000000}}}; | ||
margin:0; | margin:0; | ||
border-radius:0 4px 4px 0; | border-radius:0 4px 4px 0; | ||
width:1.75em;"></span></span><noinclude> | width:1.75em;"></span></span><noinclude> | ||
{{Documentation}} | |||
{ | |||
} | |||
</noinclude> | </noinclude> | ||
Revision as of 22:13, 16 November 2024
#000000
| This template is a high priority for maintenance as it is original to the OWOT Wiki and used in articles. As such, this template may contain bugs and it should be a top priority of template maintainers to quickly fix any issues that arise with it. Discuss breaking changes on the talk page before implementing them. |
{{Color}} generates a stylized color box that displays a color name or value in that color alongside a matching swatch. The color can be specified as either a CSS color name (e.g., royalblue) or a hex triplet with the # prefix (e.g., #4169e1). The color value can be passed either as the first positional parameter or via |color=. The color box automatically chooses either a light or dark background to maximize contrast, ensuring a contrast ratio greater than 4.58 and exceeding the WCAG 2.2 AA minimum of at least 4.5 for normal-sized text.
{{color|royalblue}}→
#000000
{{color|#4169e1}}→
#000000
{{color|khaki}}→
#000000
{{color|#f0e68c}}→
#000000
{{color|color=royalblue}}→
#royalblue
{{color|color=#4169e1}}→
##4169e1
{{color|color=khaki}}→
#khaki
{{color|color=#f0e68c}}→
##f0e68c
TemplateData
This template generates a stylized color box that displays a color name or value in that color alongside a matching swatch, automatically selecting a light or dark background to ensure the color name remains legible for all colors.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Color | 1 color | CSS name or hex code of color
| String | suggested |