Template:Swatch

 

{{{1}}}

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

• {{color sample}} – small colored box:  
• {{swatch inline}} – mostly for use on talk pages when discussing color: red
• {{color swatch}} – similar to {{swatch}} but with multiple parameters
• {{coltit}} – colored table header cell

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