Template:Swatch

 

{{{1}}}

File:Test Template Info-Icon - Version (2).svg Template documentation

This template generates a color swatch box floating to the right margin.

Parameters

1. The color code in any notation supported by CSS.
2. Height of the swatch box, defaults to 100 pixels.
3. Width of the swatch box, defaults to 162 pixels.
4. or title: The caption of the color box, defaults to the color code.

Examples

{{Swatch|Blue}}

 

Blue

{{Swatch|#FFFF00}}

 

#FFFF00

{{Swatch|rgb(20%, 40%, 60%)}}

 

rgb(20%, 40%, 60%)

{{Swatch|rgba(20%, 40%, 60%, 80%)}}

 

rgba(20%, 40%, 60%, 80%)

{{Swatch|rgb(20% 40% 60% / 80%)}}

 

rgb(20% 40% 60% / 80%)

{{Swatch|hsl(210deg, 40%, 60%)}}

 

hsl(210deg, 40%, 60%)

{{Swatch|hsl(3.66rad 40% 60%)}}

 

hsl(3.66rad 40% 60%)

{{Swatch|hsl(0.6turn 40% 60%)}}

 

hsl(0.6turn 40% 60%)

{{Swatch|hwb(210deg 40% 60%)}}

 

hwb(210deg 40% 60%)

{{Swatch|Lab(20% 0.4 0.6)}}

 

Lab(20% 0.4 0.6)

{{Swatch|Lch(40% 0.6 210deg)}}

 

Lab(50% 0.8 210deg)

See also

• Template:Tl – small colored box: <span style="display:inline-block;border:1.62px solid black;vertical-align:text-top;" title=""> 
• Template:Tl – mostly for use on talk pages when discussing color: red
• Template:Tl – similar to Template:Tl but with multiple parameters
• Template:Tl – colored table header cell

Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Subpages of this template.