Template:Color/doc: Difference between revisions

From Our World of Text Wiki
Jump to navigation Jump to search
Dat Hack3r (talk | contribs)
Create decent template documentation
Dat Hack3r (talk | contribs)
m Better wording
 
Line 1: Line 1:
{{High priority}}
{{High priority}}
{{tlx|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., <code>royalblue</code>) or a hex triplet with the <code>#</code> prefix (e.g., <code>#4169e1</code>). The color value can be passed either as the first positional parameter or via {{para|color}}. {{tlx|Color}} automatically chooses either a light or dark background to maximize contrast, ensuring a contrast ratio greater than 4.58 and exceeding the [https://www.w3.org/TR/WCAG22/#contrast-minimum WCAG 2.2 AA minimum] of at least 4.5 for normal-sized text.
{{tlx|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., <code>royalblue</code>) or a hex triplet with the <code>#</code> prefix (e.g., <code>#4169e1</code>). The color value can be passed either as the first positional parameter or via {{para|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 [https://www.w3.org/TR/WCAG22/#contrast-minimum WCAG 2.2 AA minimum] of at least 4.5 for normal-sized text.


* {{tlx|color|royalblue}} →
* {{tlx|color|royalblue}} →

Latest revision as of 02:26, 31 January 2026

{{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}}
    royalblue
  • {{color|#4169e1}}
    #4169e1
  • {{color|khaki}}
    khaki
  • {{color|#f0e68c}}
    #f0e68c
  • {{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.

Template parameters

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
Color1 color

CSS name or hex code of color

Default
#000000
Example
#4169e1, royalblue
Stringsuggested